SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot 810311's Avatar
    Join Date
    Mar 2010
    Location
    Canada
    Posts
    133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    CSS Anthology book by Rachel Andrew - horizontal menu page 102-105

    Hello,

    I am using the following code from Rachel Andrew book to style my horizontal menu. I want to make all the boxes of the menu same width so they don't depend on the length of the word itself e.g now box containing word "blog" is shorter than box containing "contact" etc.




    #navigation {
    font-size: 90%;
    }

    #navigation li{
    display: inline;
    }

    #navigation ul{
    list-style: none;
    margin: 0;
    padding: 0;
    padding-top: 1em;
    }


    #navigation a:link, #navigation a:visited {
    padding: 0.4em 1.3em 0.4em 1.3em;
    color: #FFFFFF;
    background-color: #B51032;
    text-decoration: none;
    border: 1px solid #711515;
    margin-left: 4px;
    margin-right: 4px;

    }

    #navigation a:hover {
    color: #FFFFFF;
    background-color: #711515;


    Thank you

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    On your LI element all you simply need to do is add a width but you will need to change the display property to inline-block as you can't use height and width on inline elements:

    Code CSS:
    #navigation li{
        display: inline-block;
        *display: inline; /* IE6+7 Fix */
        width: 100px;
    }

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Or you could just float the list items too:

    Code:
    #navigation li{
        float: left;
        width: 100px;
    }

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Or you could just float the list items too:

    Code:
    #navigation li{
        float: left;
        width: 100px;
    }
    You will need to be careful when using a floated element as unless you clear the parent all child elements that occur after may collapse into the element above.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by SgtLegend View Post
    On your LI element all you simply need to do is add a width but you will need to change the display property to inline-block as you can't use height and width on inline elements:

    Code CSS:
    #navigation li{
        display: inline-block;
        *display: inline; /* IE6+7 Fix */
        width: 100px;
    }
    Hi Chris,

    Forgive the small correction but the IE6/7 fix cannot be in the same rule as it won't work.

    It needs to be exactly like this:

    Code:
    #navigation li{
        display: inline-block;
        width: 100px;
    }
    
    #navigation li{*display: inline; /* IE6+7 Fix */}
    If you place the display:inline in the same rules as the display:inline-block then the element never gets haslayout because the display:inline-block is ignored and only display:inline is seen.

    If you separate the rule as above then what happens is that IE6/7 see the display:inline-block and apply haslayout to the element (this is probably the only real use of display:inline-block). In the next rule you set the element to display:inline and in IE6/7 an inline element that is in haslayout mode behaves just like inline-block (this is probably a throwback to ie5 which allowed dimensions on inline elements by default).

    The display:inline-block is a haslayout trigger for both inline and block elements which is why you can't use some of the other haslayout triggers. zoom:1.0 is also a haslayout trigger for both inline and block elements and you can can actually create an inline-block element in IE6/7 without using inline-block. All you do is make the element inline and apply haslayout suitable for an inline element.

    Code:
    p{display: inline;zoom:1.0 /* IE6+7 Fix */}

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Forgive the small correction but the IE6/7 fix cannot be in the same rule as it won't work.
    Thierry Koblentz does it. He adds zoom to keep the haslayout.

    #navigation {
    font-size: 90%;
    }

    #navigation li{
    display: inline;
    }

    #navigation ul{
    list-style: none;
    margin: 0;
    padding: 0;
    padding-top: 1em;
    }
    Bleh, nasty old code. So there's a wrapping-something called #navigation, and then it sets font size, and then it sets li to display inline but doesn't make the anchors some kind of block?

    #navigation a:link, #navigation a:visited {
    padding: 0.4em 1.3em 0.4em 1.3em;
    color: #FFFFFF;
    background-color: #B51032;
    text-decoration: none;
    border: 1px solid #711515;
    margin-left: 4px;
    margin-right: 4px;

    }

    #navigation a:hover {
    color: #FFFFFF;
    background-color: #711515;
    and then setting :link and :visited styles... instead of the easier and more powerful "a" styles... and then only :hover? Where's :focus??

    Bleh.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Thierry Koblentz does it. He adds zoom to keep the haslayout.
    Which is basically what I said in my second example.

    You'd have to do this though:

    Code:
    #navigation li{
    display:inline-block;
    *display: inline;
    zoom:1.0;
    }
    I'm not a fan of the *property hack as its invalid (unlike * html) but it is neater in this case where it targets ie6 and 7.

  8. #8
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    I'm not a fan of the *property hack as its invalid (unlike * html) but it is neater in this case where it targets ie6 and 7.
    Thierry likes it because he feels the * html/*+html rules are too specific (in that they are more specific than the original rule offered to other browsers).

    I've never run into needing to override * html rules with anything more than another * html rule myself though. But I don't work on ginormous sites.


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
  •