SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Addict Feliciaf's Avatar
    Join Date
    Mar 2004
    Location
    New Zealand
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    horizontal menu positioning

    Hi there

    Does anyone know how I can get the horizontal nav to position exactly in
    FF as it does in IE? I know , usually it's the other way round but at the moment it sits right in IE but not FF. Not sure what is wrong. It may be something to do with the nav-container sitting higher in FF. The reason I have a container, by the way, is so I can position the nav headings directly under the Logo - and centered. Ho humm.

    Here's the page:
    http://www.tagdesign.co.nz/deccan/index.html

    and css:
    http://www.tagdesign.co.nz/deccan/css/main2.css

  2. #2
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You've set your header-div to a height of 100px but the image is 110px high. I guess IE expands the div.

    Also, you haven't closed two of your list elements.
    Dan G
    Marketing Strategist & Consultant

  3. #3
    SitePoint Addict Feliciaf's Avatar
    Join Date
    Mar 2004
    Location
    New Zealand
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Feliciaf View Post
    Hi there

    Does anyone know how I can get the horizontal nav to position exactly in
    FF as it does in IE? I know , usually it's the other way round but at the moment it sits right in IE but not FF. Not sure what is wrong. It may be something to do with the nav-container sitting higher in FF. The reason I have a container, by the way, is so I can position the nav headings directly under the Logo - and centered. Ho humm.

    Here's the page:
    http://www.tagdesign.co.nz/deccan/index.html

    and css:
    http://www.tagdesign.co.nz/deccan/css/main2.css
    No, not to worry cause I just added overflow:hidden to the nav-container and that did it.
    sorry....

  4. #4
    SitePoint Addict Feliciaf's Avatar
    Join Date
    Mar 2004
    Location
    New Zealand
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by c2uk View Post
    You've set your header-div to a height of 100px but the image is 110px high. I guess IE expands the div.

    Also, you haven't closed two of your list elements.
    OK - you were right. I took off the overflow hidden because this broke my drop downs anyway.
    Thanks for that. sometimes we just need another pair of eyes.
    Thanks for your help. :-)

  5. #5
    SitePoint Addict Feliciaf's Avatar
    Join Date
    Mar 2004
    Location
    New Zealand
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmmm, but now am having problems placing the nav items centered directly under the logo. I only want them to be about 150px in width - about as long as the logo and its background. How should I do this?

  6. #6
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure I'm following you now.
    Dan G
    Marketing Strategist & Consultant

  7. #7
    SitePoint Addict Feliciaf's Avatar
    Join Date
    Mar 2004
    Location
    New Zealand
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by c2uk View Post
    I'm not sure I'm following you now.
    Sorry, here is a mockup of what I mean:
    http://www.tagdesign.co.nz/deccan/mockup4.jpg

  8. #8
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, one of the things is that you've defined a width and padding-left (40px) for all your list elements.

    You probably only need the padding-left:40px for ul#nav, and no width for your li elements. to get it centred vertically, you might want to apply display:block to your list elements and apply a top and bottom padding.

    I hope that helps, I'm off now.
    Dan G
    Marketing Strategist & Consultant

  9. #9
    SitePoint Addict Feliciaf's Avatar
    Join Date
    Mar 2004
    Location
    New Zealand
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi again
    well, I did try your advice but the 40px padding-left adjusted the second level way over to the right side;
    The display: block didn't seem to do anything;
    Taking off the width on the li elements placed the second level text on the same link in IE. But the top and bottom padding worked which is good. :-)

    Do I need to add another class somewhere in the #nav element?

  10. #10
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not sure, but I don't see how ul#nav {padding-left:40px} would effect the second level?

    sorry, got that mixed up, display:block would be needed if you add the padding to your links, not to the list elements, these are block elements by default.

    Taking off the width on the li elements placed the second level text on the same link in IE.
    Can't picture this. Have you tried to only give the second level elements a width?

    Also, I would always use ul#nav in front of your css definitions, otherwise, when you'll use a list in your text, that gets displayed exactly like your menu.
    Dan G
    Marketing Strategist & Consultant

  11. #11
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To get it look like your mockup, try something like this:
    Code CSS:
    #nav-container  {
    	width: 100%;
    	height: 30px;
    	margin: 0;
    	padding: 0 0 0 26px;
    	background-color: #182D62;
    	border-bottom: 1px solid #BF6327;
    }
    ul { /* all lists */
    	padding: 0;
    	float: left;
    	margin: 0;
    	list-style: none;
    	background-color: #182D62;
    }
    li { /* all list items */
    	float: left;
    	position: relative;
    }
     
    * html li {width: 1%} /* for IE6 */
     
    li a{ /* all list items anchors */
    	white-space: nowrap;
    	text-decoration: none;
    	display: block;
    	color: #fff;
    	height: 25px;
    	padding: 5px 18px 0; /* no bottom padding leaves room for font-size to increase */
    }
    li ul { /* second-level lists */
    	display: none;
    	float: none;
    	position: absolute;
    	top: 30px;
    	left: 0;
    	border-top: 1px solid #BF6327; /* border instead of 1px glap to top-list */
    }
    li ul li { /* all sub-list items */
    	display: block;
    	width: 10em;
    }
    Happy ADD/ADHD with Asperger's

  12. #12
    SitePoint Addict Feliciaf's Avatar
    Join Date
    Mar 2004
    Location
    New Zealand
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Aha - OK. I sort of understand what you have done here. How does the width: 1% thing work for IE? What does this prevent?

    Also, in FF and IE the blue background container is now being pushed out to the right side of the template. Is this the padding-left in the container doing this. I'm not sure how to prevent that. Any ideas?

  13. #13
    SitePoint Addict Feliciaf's Avatar
    Join Date
    Mar 2004
    Location
    New Zealand
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also, I would always use ul#nav in front of your css definitions, otherwise, when you'll use a list in your text, that gets displayed exactly like your menu.
    Yes, good point. I did actually put #navul etc etc in front of all the relevant definitions but it completely put the nav bar down the left side of the page. So I did something way off incorrect. Not sure what. Usually, I would name the element something like horizontal-nav, but this navigation css is more advanced than what I am used to. hmmmm.

  14. #14
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I hope erik doesn't mind, I've now used his css and put the ul#nav in there the way I'd do it:

    Code CSS:
    #nav-container  {
    	width: 100%;
    	height: 30px;
    	margin: 0;
    	padding: 0 0 0 26px;
    	background-color: #182D62;
    	border-bottom: 1px solid #BF6327;
    }
    ul#nav { /* this will now only effect the list with the id nav */
    	padding: 0;
    	float: left;
    	margin: 0;
    	list-style: none;
    	background-color: #182D62;
    }
    ul#nav li {
    	float: left;
    	position: relative;
    }
     
    * html ul#nav li {width: 1%} /* for IE6 */
     
    ul#nav li a { 
    	white-space: nowrap;
    	text-decoration: none;
    	display: block;
    	color: #fff;
    	height: 25px;
    	padding: 5px 18px 0; /* no bottom padding leaves room for font-size to increase */
    }
    ul#nav li ul { /* second-level list */
    	display: none;
    	float: none;
    	position: absolute;
    	top: 30px;
    	left: 0;
    	border-top: 1px solid #BF6327; /* border instead of 1px glap to top-list */
    }
    ul#nav li ul li {
    	display: block;
    	width: 10em;
    }
    Dan G
    Marketing Strategist & Consultant

  15. #15
    SitePoint Addict Feliciaf's Avatar
    Join Date
    Mar 2004
    Location
    New Zealand
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    [QUOTE=c2uk;3771266]I hope erik doesn't mind, I've now used his css and put the ul#nav in there the way I'd do it:

    Hi thanks for this. However, putting the #nav in after the every ul occurence, this creates a double up of horizontal menu and it stops the drop-down second level from working. Also, the menu blue bar that is 100% still pushes out to the right side of the template. Here is the css I am using:

    #nav-container {
    width: 100%;
    height: 30px;
    margin: 0;
    padding: 0 0 0 26px; /* this 26px tends to push out the bg menu blue bar */
    background-color: #182D62;
    border-bottom: 1px solid #BF6327;
    }

    ul { /* all lists */ /* I can't put padding here because it pushes out all the second level text way over to the right */
    padding: 0;
    float: left;
    margin: 0;
    list-style: none;
    background-color: #182D62;
    }

    li { /* all list items */
    float: left;
    position: relative;
    }

    * html li { /* for IE6 */
    width: 1%;
    }

    li a{ /* all list items anchors */
    white-space: nowrap;
    text-decoration: none;
    display: block;
    color: #fff;
    height: 25px;
    padding: 5px 18px 0; /* no bottom padding leaves room for font-size to increase */
    }

    li ul { /* second-level lists */
    display: none;
    float: none;
    position: absolute;
    top: 30px;
    left: 0;
    border-top: 1px solid #BF6327; /* border instead of 1px gap to top-list */
    }
    li ul li { /* all sub-list items */
    display: block;
    width: 10em;
    }

    li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
    top: auto;
    left: auto;
    }

    li:hover ul, li.over ul { /* lists nested under hovered list items */
    display: block;
    }

    I do understand what you are saying by naming the uls so they are specific to the menu but it doesn't seem to work with the above css definitions or the way I have used the elements. Hmmmmm.


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
  •