SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 31
  1. #1
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Navigation Centralised

    Hi,

    I have this page:

    http://www.nicktoye.co.uk/test_suite...dia/index.html

    I need to get that navigation absolutely centralised, anyone have any ideas what's the best way?

    Much appreciated.

  2. #2
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't have time to troubleshoot your css, but this may help you:
    http://css.maxdesign.com.au/listamatic/horizontal16.htm

    Nadia

  3. #3
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah I did notice this, but if you see when you hover over an element in listamatic, there is a gap to the left side.

    So by floating the anchors it removed the gap but caused the whole list to shift to the left hand side as you can see here:

    http://www.nicktoye.co.uk/test_suite...dia/index.html
    Last edited by NickToye; Feb 20, 2007 at 02:07. Reason: New information...

  4. #4
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could try something like this:

    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Centred List </title>
    <style type="text/css">
    #nav ul{
        list-style:none;
        margin:10px auto;
        padding:0;
        display:table;
        border:1px solid #000;
        padding:2px;
        white-space:nowrap;
    }
    #nav ul li{
        display:table-cell;
    }
    #nav ul a{
        display:block;
        padding:4px 10px;
        text-decoration:none;
        background:#ffffcc;
        border:1px solid #ff0000;
    }
    #nav ul a:hover{background:red;color:#fff}
    </style>
    <!--[if IE ]>
    <style type="text/css">
    #nav ul {display:inline-block;}
    #nav ul {display:inline;    }
    #nav ul li {display:inline-block}
    #nav ul li {display:inline;}
    #nav ul a {display:inline-block;}
    #nav {text-align:center}
    </style>
    <![endif]-->
    </head>
    <body>
    <div id="nav">
        <ul>
            <li><a href="#">List 1</a></li>
            <li><a href="#">List 2</a></li>
            <li><a href="#">List 3</a></li>
            <li><a href="#">List 4</a></li>
        </ul>
    </div>
    </body>
    </html>

  5. #5
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,115
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    I'm not sure how to center a block level element with a flexible width. If you set each of the anchors to a given width then you can make the ul width equal top the some of these and margin: 0 auto; will center it..

    I think you knew that already.

    The reason the example above has the gaps is because of the line breaks after each list item in the markup.. Though it does seem like a bit of a hack.
    You can fix this by removing white space
    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    #navcontainer ul
    {
    padding: .2em 0;
    margin: 0;
    list-style-type: none;
    background-color: #036;
    color: #FFF;
    width: 100&#37;;
    font: normal 90% arial, helvetica, sans-serif;
    text-align: center;
    }
    
    li { display: inline; }
    
    li a
    {
    text-decoration: none;
    background-color: #036;
    color: #FFF;
    padding: .2em 1em;
    border-right: 1px solid #fff;
    }
    
    li a:hover
    {
    background-color: #369;
    color: #fff;
    }
    -->
    </style>
    </head>
    <body>
    <ul id="navlist">
    	<li id="current"><a href="#">Item one</a></li><li><a href="#">Item two</a></li><li><a href="#">Item three</a></li><li><a href="#">Item four</a></li><li><a href="#">Item five</a></li>
    </ul>
    </body>
    </html>

  6. #6
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,115
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi John(Tyssen),

    That's an interesting example, I don't use display:inline-block; or display:table-cell; only because I don't understand them..

    Would you mind explaining these properties?

  7. #7
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Isn't there a way to remove the whitespace in the css?

  8. #8
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,115
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by NickToye View Post
    Isn't there a way to remove the whitespace in the css?
    by floating or making it display: block; both which I don't know how to center without using fixed widths.

  9. #9
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got it working using Tyssen's first method, although it did work in Safari without having to apply table-cell to the ul li.

    Just got to check it into other browsers.

  10. #10
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    That's an interesting example, I don't use display:inline-block; or display:table-cell; only because I don't understand them..

    Would you mind explaining these properties?
    display: table/table-row/table-cell are what they sound like - they give an element table-like properties which in the example above makes the 'cells' shrinkwrap their content (display: table) and lets them appear on the same horizontal line (display: table-cell). They can also be used for creating equal height columns in layouts.

    The reason they're not used more is because IE (including 7) don't support them.

    The display: inline-block is used as a hasLayout trigger in the example I posted. From that link, this sums up best what is happening:

    Elements having both hasLayout and display:inline work similarly to the standard inline-blocks: they flow horizontally like words in a paragraph, are sensitive to vertical-align, and apply a sort of shrink-wrapping to their contents (which can include block elements.)

  11. #11
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    An idea why its not working in IE? Any solution?

    http://www.nicktoye.co.uk/test_suite...dia/index.html

  12. #12
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,115
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Thanks,

    What is with display: inline-block; ? Why is it always left out of listings like:
    http://www.w3schools.com/css/pr_class_display.asp

    I can guess what it does, have block like properties without the line-break before and after the element.

  13. #13
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by NickToye View Post
    An idea why its not working in IE? Any solution?

    http://www.nicktoye.co.uk/test_suite...dia/index.html
    You've got the wrong path to your IE stylesheet. You'll need to alter your conditional comment too cos IE7 needs to see those rules.

  14. #14
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well I haven't actually created any rules yet, but thanks for the heads up.

    I only say because I know IE don't support display:table or display:table-cell

  15. #15
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,807
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    No advice just a 'Morning Nick!'
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  16. #16
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Spike,

    Do you know why IE is so poor?

  17. #17
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,807
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    How long have you got?!
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  18. #18
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1 minute

  19. #19
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,807
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    not going there......!

    speak to you later
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  20. #20
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone have any IE fixes for this?

  21. #21
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  22. #22
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I already have a working model in all compliant browsers, its just IE that isn't working. If I can alter the css slightly then that would be preferable.

  23. #23
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    *sigh* I know. Changing the CSS is easy though.

    IE needs the list-items to be display:inline and the <a>s to be display:inline-block. You'll need to remove the white-space between the elements though.

    Code:
          <div id="nav_container">
          <ul><li
            ><a href="index.html" class="home">Home</a></li><li
            ><a href="about.html" class="about">About Us</a></li><li
            ><a href="advertise.html" class="advertise">Advertise</a></li><li
            ><a href="contact.html" class="contact">Contact Us</a></li></ul>
          </div>
    Last edited by Kravvitz; Feb 20, 2007 at 05:28. Reason: typo correction
    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.

  24. #24
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by NickToye View Post
    I already have a working model in all compliant browsers, its just IE that isn't working.
    The example I gave you earlier had the code in it needed to get it to work in IE. That's why I mentioned about the path to your IE.css being wrong - I'd assumed you'd copied the relevant bit into that stylesheet.

  25. #25
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So if I don't remove the whitespace it will show the gap in between the elements? Hmm, do I want cleaner markup? Or do I let IE users suffer?

    I know what I should do, but my heart says sod them.

    Ok, I'll add an inline to the IE list items.


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
  •