SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru htown's Avatar
    Join Date
    Mar 2005
    Posts
    661
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Set width of Horz nav li element

    How do I set the width of <li> in a horizontal nav? I have tried putting width:200px; in every place I can think of and it has no effect. I am way to tired I think and missing something pretty simple I would imagine. Here is the code:
    Code:
    #nav {
        list-style:none;
        margin:0;
        padding:0;
        }
    
    #nav li {
        display:inline;
    }
    #nav a:link, #nav a:visited {
        text-decoration:none;
        background:url(images/nav/nav_over_02.jpg) no-repeat;
        color:#FFF;
        padding:4px 10px;
        border: solid 1px green;
        font-weight:bold;
    }
    #nav a:hover {
        background:url(images/nav/nav_02.jpg) no-repeat;
        color:#000;
    }
    Thanks,
    Houston
    Houston Brown
    Split Light Designs
    Bringing your ideas to light.

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Inline elements can't have set widths. Float the <li>s instead.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Guru htown's Avatar
    Join Date
    Mar 2005
    Posts
    661
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But of course.

    So now I am trying to change the background on rollover without using javascript. If I change the background using:
    Code:
    #nav a:hover {
        background:url(images/nav/nav_02.jpg) no-repeat;
        color:#000;
    }
    The entire width of the image does not show up because of the size of the <a>

    I know this can be done I am just really lost and I really want to learn this. I tried looking on A List Apart but I am not able to find this exact article. I thought it was sliding doors but that is for tabs.

    So I pose my question here as I often do.

    Here is a test page

    The orange in the background when you rollover is suppose to replace the black background button. But as you can see, it is only partial.

    Houston
    Houston Brown
    Split Light Designs
    Bringing your ideas to light.

  4. #4
    SitePoint Guru htown's Avatar
    Join Date
    Mar 2005
    Posts
    661
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, I figured it out. I had to make the <a> tag which is an inline element a display:block level element so I could control the dimensions.

    I'm getting there.
    Houston Brown
    Split Light Designs
    Bringing your ideas to light.


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
  •