SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Iowa City, IA
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css navigation - hover question

    Hi,

    I have a question about css navigation. I have put a website together (see link below):

    http://www.sitesbysarah.com/bailey/index.htm

    I am trying to extend the hover link on the navigation in the far left and far right columns to cover the whole box when a person rolls over the link. right now all it highlights is the text in the box.

    I have tried a couple different things, but just seem to mess up what I've already got.

    I also am trying to get the dark blue header box in each nav column to stretch across the whole column, but so far all I've been able to accomplish is to make the whole column resize which messes everything else up.

    Any suggestions?

    Thanks,
    Sarahb

  2. #2
    SitePoint Addict buildakicker's Avatar
    Join Date
    Jun 2005
    Location
    NorCal
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is this what you mean?

    Here is your CSS code(backup your original):
    Code:
    /* CSS Document */
    
    * {margin; 0; padding: 0; }
    
    body {
    margin: 0;
    padding 0;
    background: #006699;
    }
    
    #wrapper {
    text-align: left;
    width: 800px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 0 0 0 0;
    }
    
    a:link {
    color: #ffffff;
    text-decoration: none;
    }
    
    a:visited{color: #ffffff;}
    a:hover{color: #D4E4FA;
    text-decoration: underline;}
    
    
    
    p {
    font-family: Arial, sans-serif;
    font-size: .9em;
    padding: 0 20px;
    color: #006699;
    }
    
    
    
    
    h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: #006699;
    font-weight: bold;
    padding: 0 0 0 15px;
    }
    
    
    #header {
    background-image: url(images/NEW_HEADER_800px.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    height: 200px;
    margin-top: 30px;
    border-bottom: 20px solid #006699;
    
    }
    
    #content {
    width: 386px;
    margin: 10px 0 10px 201px;
    padding: 20px 10px 0 0;
    background-color: #D4E4FA;
    background-image:url(images/content_bkgd_tile.gif);
    background-repeat: repeat-y;
    height: 880px;
    font-family: Arial, sans-serif;
    font-size: .9em;
    line-height: 1.5;
    }
    
     
    
    
    
    
     /*Navigation on left side in table */
    
    #leftnav {
    position: absolute;
    margin-top: 10px;
    margin-left: 102px;
    width: 200px;
    height: 900px;
    background-image:url(images/navigation_bkgd_tile.gif);
    background-repeat: repeat-y;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .8em;
    background-color: #6ba7eb;
    }
    
    #leftnav ul {
    list-style: none;
    margin-bottom: 10px;
    
    }
    
    #leftnav li {
    margin-bottom: 10px;
    border-bottom: 1px solid #fff;
    }
    
    #leftnav li a:link {
    display: block;
    padding-left 5px;
    background-color: #6ba7eb;
    color: #fff;
    text-decoration: none;
    }
    
    #leftnav li a:hover {
    background-color: #D4E4FA;
    color: #006699;
    font-weight: bold;
    
    }
    
    #leftnav_header
    {
    background:  #015A9E;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .9em;
    padding: 5px 5px;
    margin-top: 10px;
    margin-bottom: 5px;
    color: #fff;
    font-weight: bold;
    
    }
    
     /*Navigation on right side straight css */
    
    #rightnavcontainer {
    position: absolute;
    top: 260px;
    left: 698px;
    width: 200px;
    height: 900px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .9em;
    background-color: #6699ff;
       }
    
    
    #rightnav {
    
    padding: 0px;
    margin: 0px;
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .9em;
    }
    
    #rightnav ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    
    }
    
    #rightnav li {
    margin-bottom:10px;
    border-bottom: 1px solid #fff;
    }
    
    #rightnav li a {
    display: block;
    padding-left 5px;
    background-color: #6699FF;
    color: #fff;
    text-decoration: none;
    }
    
    #rightnav li a:hover {
    background-color: #D4E4FA;
    color: #006699;
    }
    
    #rightnav_header
    {
    
    background:  #015A9E;
    padding: 5px 10px;
    margin-top: 10px;
    margin-bottom: 5px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .9em;
    color: #fff;
    font-weight: bold;
    }
    
    
     /*Navigation on download page */
     
     #downloadnav {
    position: absolute;
    top: 275px;
    left: 320px;
    width: 370px;
    height: 700px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .8em;
    background-color:  #D4E4FA;
    }
    
    #downloadnav ul {
    list-style: none;
    margin: 9px;
    
    
    }
    
    #downloadnav li {
    margin: 0;
    padding: 5px;
    border-bottom: 1px solid #fff;
    
    
    }
    
    #downloadnav li a {
    display: block;
    padding-left: 10px;
    background-color: #6699FF;
    color: #fff;
    text-decoration: none;
    }
    
    #downloadnav li a:hover {
    background-color: #D4E4FA;
    color: #006699;
    font-weight: bold;
    
    }
    
    #register {
    position: absolute;
    width: 200px;
    font-family: Arial, sans-serif;
    font-size: .8em;
    color: #fff;
    top: 880px;
    left: 720px;
    }
    
    
    
    #form {
    position: absolute;
    top: 990px;
    left: 710px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .8em;
    color: #fff;
    font-weight: bold;
    
    }
    
    #corner_logo {
    position: absolute;
    top: 50px;
    left: 644px;
    }
    
    #address {
    position: absolute;
    top: 237px;
    left: 120px;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: .7em;
    font-weight: 700;
    
    }
    SKILEASES.COM - FREE rental listings!
    WILDFIREBLOG.COM - Wildland Fire microblog!

  3. #3
    SitePoint Addict buildakicker's Avatar
    Join Date
    Jun 2005
    Location
    NorCal
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, you can also use TEXT-INDENT: ; to get the text to move in some...
    SKILEASES.COM - FREE rental listings!
    WILDFIREBLOG.COM - Wildland Fire microblog!

  4. #4
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Iowa City, IA
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help with the code!

    I changed the code and it works perfectly in Firefox. But in IE, the left navigation column pushes over too far. My client uses IE so I need to figure out how to make it look right in both browsers.

    Here is the link:

    http://www.sitesbysarah.com/bailey/index2.htm

    Any advice??

    Thanks,
    sarb

  5. #5
    SitePoint Evangelist
    Join Date
    Jul 2006
    Posts
    493
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should use valid html (http://validator.w3.org/check?verbos...y%2Findex2.htm ) and valid css.
    You should control margins and paddings of lists.
    Try
    #leftnav ul , #leftnav ul li{margin:0;}
    #leftnav ul li a {display:block;padding:5px 0;}

  6. #6
    whagwan? silver trophybronze trophy akritic's Avatar
    Join Date
    Nov 2006
    Posts
    2,780
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Sarah, if you're interested here's a site I found which looks over many different list-type navigation menus. It's worth looking over, I found it especially useful when trying to get a decent nav bar sorted for my project.

    http://css.maxdesign.com.au/listamatic/

    Andy


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
  •