Hover Aint Workin'

HTML & CSS
1

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>
2

What (exactly) do you mean by “jump out a little”?

3

The position is at right -8. Hover should set position to right 0, giving the impression the tab comes out of hiding by moving to the left.

4

The -8px is set on the div, whereas the right: 0 is set on the <a>, which can’t work. With this setup, you’d need to set the right:0 on the .socialmediatab div itself (e.g. .socialmediatab:hover).

It won’t work in IE6, but you could add this:

.socialmediatab:hover {
	right: 0;	
}

Also, note that if you want to style the links in .socialmeditab, you needd to do it like so:

.socialmediatab a:link  {} 
.socialmediatab a:visited {}
.socialmediatab a:hover  {}
.socialmediatab a:active {}

PS: Tread moved to the CSS forum. :slight_smile:

5

Just wanted to say thank you again. Made the changes and got it working.

6

Great! Thanks for the feedback. :slight_smile:

7

If you want to see your handiwork in action: Bintaro Chiropractic - Welcome

8

Thank you Ralph.m. Let me get on that and get it fixed. This is a slow learning process for me. Thanks for the help.