SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Dec 2008
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hover Aint Workin'

    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:

    Code:
    .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:

    Code:
    /* 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:

    Code:
    <!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. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    What (exactly) do you mean by "jump out a little"?

  3. #3
    SitePoint Member
    Join Date
    Dec 2008
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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:

    Code:
    .socialmediatab:hover {
    	right: 0;	
    }
    Also, note that if you want to style the links in .socialmeditab, you needd to do it like so:

    Code:
    .socialmediatab a:link  {} 
    .socialmediatab a:visited {}
    .socialmediatab a:hover  {}
    .socialmediatab a:active {}
    PS: Tread moved to the CSS forum.

  5. #5
    SitePoint Member
    Join Date
    Dec 2008
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    SitePoint Member
    Join Date
    Dec 2008
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just wanted to say thank you again. Made the changes and got it working.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Great! Thanks for the feedback.

  8. #8
    SitePoint Member
    Join Date
    Dec 2008
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you want to see your handiwork in action: Bintaro Chiropractic - Welcome


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •