Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    May 2008
    Location
    Northern Virginia (DC Metro Area)
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    CSS & HTML Link Text

    I'm redoing my website and want to use one feature from the old temporary one I have up now. The problem is that I used a template and modified and I don't know what parts of the CSS accomplish the effect.

    When I hover my mouse over the menu items, text appears in one spot in the header. This is what I want to use for my website but don't know which parts of the code cause it to pop up in the book. Can anyone help?

    http://karynsplace.net/

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,678
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Karyn,
    that is just positioning the spanned text on hover.
    This text -
    Code:
    <div id="navcontainer">
    	<ul id="navlist">
    		<li id="active"><a href="index.html" id="current">Home<span>Back to the main
    		page.</span></a></li>
    		<li><a href="personal.html">Personal Info<span>Psuedo-personal information about me</span></a></li>
    		<li><a href="hobbies.html">Hobbies<span>Some of the things I do for fun</span></a></li>
    		<li><a href="index.html">Vero Eros Et<span>Did you vero your eros et today?</span></a></li>
    		<li><a href="index.html">Duis Te Feugi<span>There is a duis in my te feugi. </span> </a></li>
    	</ul>
    </div>
    Hidden and position on hover with this CSS -
    Code:
    #navcontainer li a span {
         display: none
    }
    
    #navcontainer li a:hover span { 
         display:block;
         position:absolute;
         top: -180px; 
         left:392px; 
         width:105px;
         background-color:transparent; 
         color:#6f443d;
         text-align: center;
         padding: 15px;
         text-decoration: none;
         font-family: Verdana, Arial, Helvetica,sans-serif;
         font-size: 12px;
         font-weight: bold;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    May 2008
    Location
    Northern Virginia (DC Metro Area)
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hello Excavator,

    Thank you! I'm going to give that a shot and see how it works on my in-progress theme.

  • #4
    New to the CF scene
    Join Date
    May 2008
    Location
    Northern Virginia (DC Metro Area)
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Unhappy

    Argh - I'm seriously missing something here. I cannot get this to work and as near as I can tell, I have converted the necessary parts to the menu I'm trying to use for the new design, which is here - http://karynsplace.net/index2.html

    Here's the code I'm using for the menu (with the names changed to menu instead of nav*):
    Code:
    #footer, #menu, #menu li a { 
      background: #636363 url(images/centermenu.png);
      color: #FFFFFF;
      border-color: #D7D7D7;}
    
    #menu li a:hover, #menu li a#selected, #menu li a#selected:hover{ 
      background: #FFF url(images/centermenu.png);}
    
    #main, #footer, #logo, #menu, #content{
      margin-left: auto; 
      margin-right: auto;}
    
    
    #menu
    { height: 64px;
      width: 870px;
    }
    
    #menu ul{margin: 0px auto;} 
    
    #menu li
    { float: left; 
      margin: 0px; 
      padding: 0px;
      list-style: none;
    } 
    
    #menu li a 
    { display: inline; 
      float: left; 
      height: 37px;
      text-decoration: none; 
      padding: 3px 19px 2px 19px;
      text-transform: uppercase;
    }
    
    #menu li a span {
         display: none;}
    
    #menu li a:hover span { 
         display:block;
         position:absolute;
         top: -180px; 
         left:392px; 
         width:105px;
         background-color:transparent; 
         text-align: center;
         padding: 15px;
         text-decoration: none;
         font-family: Verdana, Arial, Helvetica,sans-serif;
         font-size: 12px;
         font-weight: bold;}
    Can you tell what I've done wrong? As near as I can tell, all of the code that would be needed to make that feature (I have no idea what it's called) work is contained in the last two sections, which are about the span tag.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,678
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    To start with, you're re-using id's.
    You have a a div and a ul both with the id menu. Check the suggestion and links about validation in my sig below.

    But your span is hovering - you have a huge negative margin that is hovering it off the page but at least it's hovering. Change that top: -180px; to something smaller...
    You may also want to use something other than color: #fff; on your span text so you can find it easier.
    I think this is where I realize I'm probably too boring to have a website but of course I'll do it anyway.
    Haha - good for you! This cracked me up :0
    Last edited by Excavator; 12-02-2009 at 06:20 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Karyn (12-03-2009)

  • #6
    New to the CF scene
    Join Date
    May 2008
    Location
    Northern Virginia (DC Metro Area)
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    To start with, you're re-using id's.
    You have a a div and a ul both with the id menu. Check the suggestion and links about validation in my sig below.

    But your span is hovering - you have a huge negative margin that is hovering it off the page but at least it's hovering. Change that top: -180px; to something smaller...
    You may also want to use something other than color: #fff; on your span text so you can find it easier.

    Haha - good for you! This cracked me up :0
    Oy - this is what I get for deciding to figure this out when I'm in the middle of a strong bout of insomnia. I do usually validate while I'm working because it's so much easier to figure out exactly what you've goofed without having to examine every bit of code instead of just what you've added and anything it modifies, but I figured I'd validate after - which of course makes no sense. I was planning to relocate the location where it hovers after I got it working, since that was the exact code that works on the old one. An insomnia-addled mind is not a pretty thing.

    I'm glad that amused you. It makes me 1/100000th of a percent less boring. Your website is far less boring than mine - especially the in-dev one for the hair salon!

    Thanks tons for your help. I'll get this fixed as soon as I get home!

  • #7
    New to the CF scene
    Join Date
    May 2008
    Location
    Northern Virginia (DC Metro Area)
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thumbs up

    Those two changes were exactly the problem - but you knew that.

    Thanks so much for your help! You, sir, are Awesome with a side of Awesome Sauce.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,678
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    You, sir, are Awesome with a side of Awesome Sauce
    hahaha, you crack me up
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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