SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Member falp1004's Avatar
    Join Date
    Oct 2003
    Location
    London
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy CSS Navigation Problem

    Hi everybody,

    I spent the whole weekend trying to figure out why my menu isn't centering properly. I followed a tutorial to create a menu with list items found in this forum (sorry but I can't remember where). The menu works perfectly but is not align correctly. Could anybody please help me?

    The link is

    http://www.falp.net/website/pages/start.htm

    Thanks a lot

    Frank
    Frank Lores-Penalver

  2. #2
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,294
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Try changing the margin on your #navcontainer to margin: 0 auto; and see if that helps.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The problem is that you haven't targeted the element correctly.

    You have used #navlist ul but there isn't an ul in an id of navlist. However there is a ul that has an id of navlist.

    Therefore changing your code as follows should (?) sort the problem.

    Code:
     ul#navlist  {
     margin:0 0 10px 0;
     padding: 0;
    }
    However I must point out that you are using quirks mode in IE and using text-align:center to center all your elements. This is fine for IE (and IE6 in quirks mode) but other browsers obey the rules and only use text-align:center to centre text not nested elements.

    For other browsers you will need to use margin-left:auto and margin-right:auto on a fixed width element to allow it to centre.

    Hope this helps.

    Paul

  4. #4
    SitePoint Member falp1004's Avatar
    Join Date
    Oct 2003
    Location
    London
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    The problem is that you haven't targeted the element correctly.

    You have used #navlist ul but there isn't an ul in an id of navlist. However there is a ul that has an id of navlist.

    Therefore changing your code as follows should (?) sort the problem.
    Code:
    ul#navlist {
    margin:0 0 10px 0;
    padding: 0;
    }
    However I must point out that you are using quirks mode in IE and using text-align:center to center all your elements. This is fine for IE (and IE6 in quirks mode) but other browsers obey the rules and only use text-align:center to centre text not nested elements.

    For other browsers you will need to use margin-left:auto and margin-right:auto on a fixed width element to allow it to centre.

    Hope this helps.

    Paul
    Thanks for your prompt replies. It didn't quite work but I think I fixed it now. I changed from id to class targeting and it seems to work.

    I will work on the centering to make it more compliant.

    Thanks again.
    Frank Lores-Penalver

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    It didn't quite work
    It did in my version ! You must have copied something incorrectly.

    Changing the id to a class would make no difference (except for the inherrent differences of course). It would have no effect on the targetting - both class and Id would work. The only difference with an Id is that you can only use it once uniquely on a page. (However at this point in time all browsers ignore this and display it just like a class, although you would have prooblems if javascript routines targetted it etc.)

    You had #navlist ul in your code which will look for a an unordered list that is within an id of navlist.
    e.g.
    This is what that would need to look like to work:
    Code:
    <div id="navlist">
    <ul><li></li></ul>
    </div>
    But what you had was:
    Code:
    <ul id="navlist">
    <li></li>
    </ul>
    There is no unordered list within the id of navlist. There is however, an unordered list thas has an id of navlist which would need to be targetted differently as follows.
    Code:
     
    ul#navlist
    Which means look for ul that has an id of navlist - thats the difference from the first example. Changing the id to a class or vice-versa would make no difference.

    Just thought I'd clear that up

    Paul

  6. #6
    SitePoint Member falp's Avatar
    Join Date
    Sep 2003
    Location
    London
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I apologize. You were absolutely right. I did make a mistake. I put ul #navlist instead of ul#navlist the space being the crucial difference. I tried it out and is was absolutely fine.

    Thanks for everything.


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
  •