Objective: Have a tab at the far right end of the browser that will send people to a page where they can sign on to follow me on Twitter and join my page on Facebook. Ah the self-promotional wonders of social media. I want the tab to jump out a little when they hover the mouse over it. I’d really like it to come out slow and go in slowly (about .5 sec each way) but I’ll settle for jumping right now.
Problem: It don’t work
So far I’ve got the tab linked but I can’t get it to jump.
Help and thank you.
This is the CSS and HTML regarding what I’ve tried:
.socialmediatab {
position: fixed;
right: -8px;
top: 400px;
}
.socialmediatab
a:link {}
a:visited {}
a:hover {right: 0 }
a:active {}
<div class="socialmediatab">
<a href="#"><img src="../images/followme.jpg" /></a>
</div>
Here’s the whole CSS:
/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
margin:0;
padding:0;
}
h2 {
font:bold 150%/120% verdana,helvetica,sans-serif;
padding-bottom:0.4em;
}
p {
padding-bottom:1em;
}
img,fieldset {
border:none;
}
body {
text-align:center; /* center #pageWrapper IE 5.x */
font:100%/140% verdana,helvetica,sans-serif;
color:#000;
background:#ffffff url(images/backgroundbase3.png) top center repeat-x;
}
.socialmediatab {
position: fixed;
right: -8px;
top: 400px;
}
.socialmediatab
a:link {}
a:visited {}
a:hover {right: 0 }
a:active {}
#pageWrapper {
width:960px;
margin:0 auto;
text-align:left;
background:url(images/logograd2.jpg) top center no-repeat;
}
h1 {
overflow:hidden;
height:60px;
font:italic 36px/60px georgia,times,serif;
}
h1 span {
float:left;
text-transform:uppercase;
color:#FFFF00;
-moz-text-shadow:2px -2px 1px #000;
-webkit-text-shadow:2px -2px 1px #000;
text-shadow:1px -1px 2px #000;
}
h1 small {
display:block;
margin:0 225px 0 390px;
text-align:center;
font:normal 20px/62px georgia,times,serif;
-moz-text-shadow:2px -2px 1px #FFFFFF;
-webkit-text-shadow:2px -2px 1px #FFFFFF;
text-shadow:2px -2px 1px #FFFFFF;
}
h2 content {
overflow:hidden;
height:50px;
font-family: georgia, times, serif;
font-size: 20px;
font-style: normal;
line-height: 60px;
color: #ebebeb;
text-decoration: none;
padding: 0px;
}
p content {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 1.7em;
color: #ebebeb;
text-decoration: none;
text-align: left;
margin: 0px;
padding: 0px;
}
p contentimportant {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 1.7em;
color: #ebebeb;
text-decoration: none;
text-align: left;
margin: 0px;
padding: 0px;
}
#topContact {
float:right;
text-align:right;
margin-top:-55px;
height:57px;
font:normal 12px/16px verdana,helvetica,sans-serif;
color:#FFF;
}
#mainMenu {
clear:both;
list-style:none;
height:35px;
font:bold 16px/19px verdana,helvetica,sans-serif;
border-left:1px solid #FFF;
}
#mainMenu li {
float:left;
height:35px;
border-right:1px solid #FFF;
}
#mainMenu a {
position:relative;
float:left;
padding:8px 16px 13px;
/*margin-bottom:-5px;*/
text-decoration:none;
color:#FFF;
}
#mainMenu .current a {
background:#BDE;
}
#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
padding-bottom:8px; /* adjusts for height change */
border-bottom:5px solid #C56065;
}
.flag {
position:relative;
top:8px;
left: 8px;
}
#label {
/*line-height:48px;*/ /* should be larger than default font */
/*
120px + 132px + 48px == 300px
the amount we want to push #content down by!
*/
/*background:#8F8;*/
text-align: left;
margin-top: 20px;
margin-right: 0;
margin-bottom: 0px;
margin-left: 0;
padding-top: 0;
padding-right: 1em;
padding-bottom: 0;
padding-left: 7px;
}
#content {
/*background-color:#66FF00;*/
text-align:left;
width:960px;
height: 690px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
background-image: url(images/textbkgnd.jpg);
background-repeat: no-repeat;
background-position: left top;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 7px;
overflow:auto;
}
#left {
/*background-color:#FF0000;*/
width: 690px;
height: 635px;
padding-top: 30px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 20px;
float:left;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.floatleftcontentpix{
float: left;
margin: 0px 10px 0px 0px;
padding: 0px;
}
.newsletter {
float: right;
margin: 0 10px 0 0;
padding: 0;
}
#right{
/*Background-color:#FF0;*/
width: 200px;
height: 635px;
padding-top: 30px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 0px;
float:right;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#navcontainer
{
/*background: #40627d;*/
width: 100%;
margin: 0 auto;
padding: 1em 0;
font-family: georgia, serif;
font-size: 13px;
text-align: center;
/*text-transform: lowercase;*/
}
ul#navlist
{
text-align: left;
list-style: none;
padding: 0;
margin: 0 auto;
width: 80%;
}
ul#navlist li
{
display: block;
margin: 0;
padding: 0;
}
ul#navlist li a
{
display: block;
width: 100%;
padding: 0.2em 0 0.2em 2em;
border-width: 1px;
border-color: #ffe #aaab9c #40627d #fff;
border-style: solid;
color: #fff; /*Button Text Color*/
text-decoration: none;
background: #000; /*Button Color*/
}
#navcontainer>ul#navlist li a { width: auto; }
ul#navlist li#active a
{
background: #fbff34;
color: #800000;
}
ul#navlist li a:hover, ul#navlist li#active a:hover
{
color: #ebebeb;
background: transparent;
border-color: #aaab9c #fff #fff #ccc;
}
#labelindex {
height:250px;
text-align: left;
margin-top: 15px;
margin-right: 0;
margin-bottom: 0px;
margin-left: 0;
padding-top: 0;
padding-right: 1em;
padding-bottom: 0;
padding-left: 7px;
}
.floatrightlabelindex{
float:right;
clear:both
height:250px;
width:350px;
}
#contentindex {
text-align:left;
width:960px;
height: 690px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
background-image: url(images/textbkgndnologo.jpg);
background-repeat: no-repeat;
background-position: left top;
margin-top: 30px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 7px;
overflow:auto;
}
.ulindex{
margin:0;
padding:0;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 1.7em;
color: #ebebeb;
text-decoration: none;
list-style:circle;
text-shadow:1px -1px 2px #333;
}
Here’s the whole HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en"
><head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<meta
http-equiv="Content-Language"
content="en"
/>
<link
type="text/css"
rel="stylesheet"
href="../screen.css"
media="screen,projection,tv"
/>
<!-- TemplateBeginEditable name="doctitle" -->
<title>New Norway Template</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>
<body>
<div class="socialmediatab">
<a href="#"><img src="../images/followme.jpg" /></a>
</div>
<div id="pageWrapper">
<h1>
<span>Bintaro Chiropractic</span>
<small>Freedom From Pain</small>
</h1>
<div id="topContact">
Radmann Halmrasts vei 18<br />
1337 Sandvika, NORWAY<br />
Tel: xxx-xxxx-xxxx <a href="mailto:drgarylgreen@gmail.com">E-Mail (click) </a>
</div>
<ul id="mainMenu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Treatment</a></li>
<li><a href="#">More!</a></li>
<li><a href="#">Contact</a></li>
<!-- TemplateBeginEditable name="EditLang" -->
<li><a href="#">Norge</a></li>
<!-- TemplateEndEditable --><img class=flag src="../images/norgemenubutton.jpg">
</ul>
<!-- TemplateBeginEditable name="Editable" -->
<div id="label"> <img src="../images/labelabout.jpg" /> </div>
<div id="content">
<div id="left">
<h2>
<content>Instructions</content>
</h2>
<p>
<content> <img class="floatleftcontentpix"src="../images/200x300space.jpg" />Be aware that the CSS for these layouts is heavily commented. If you do most of your work in Design view, have a peek at the code to get tips on working with the CSS for the fixed layouts. You can remove these comments before you launch your site. To learn more about the techniques used in these CSS Layouts, read this article at Adobe's Developer Center - <a href="http://www.adobe.com/go/adc_css_layouts">http://www.adobe.com/go/adc_css_layouts</a>. </content>
</p>
<p></p>
<p></p>
<p></p>
<h2>
<content>Layout</content>
</h2>
<p>
<content> Since this is a one-column layout, the .content is not floated. If you add a .footer within the .container, it will simply follow the .content div. </content>
</p>
<p>
<content> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? </content>
</p>
<!--#left-->
</div>
<div id="right">
<h2>
<content>Problems</content>
</h2>
<p>
<content>What is your complaint? Choose a symptom to learn more about it. We can help</content>
</p>
<div id="navcontainer">
<ul id="navlist">
<li><a href="#"> Low Back Pain</a></li>
<li><a href="#"> Headache / Migraine</a></li>
<li><a href="#"> Neck Pain</a></li>
<li><a href="#"> Shoulder Pain</a></li>
<li><a href="#"> Foot Pain</a></li>
<li><a href="#">Hand Pain</a></li>
<li><a href="#">Arm Pain</a></li>
<li><a href="#">Leg Pain</a></li>
<li><a href="#">Knee Pain</a></li>
<li><a href="#">Elbow Pain</a></li>
</ul>
</div>
<a href="#"><img class=newsletter src="../images/newsletter.jpg" /></a>
<!--#right-->
</div>
<!-- #content -->
</div>
<!-- TemplateEndEditable -->
<div class="footer">
<h6><!-- #BeginLibraryItem "/Library/Footer.lbi" -->Copyright © 2011 Bintaro Chiropractic<!-- #EndLibraryItem --></h6>
<!-- #footer --></div>
<!-- #pageWrapper --></div>
</body></html>