Adding A Centered CSS Menu

[Zad]

First of all I want to thank those who have helped me earlier This is a great forum!

 

I'm trying to add a centered menu to a page. I can't determine how to position the menu vertically so that it's spaced evenly between the header and the content divs. I placed a break in the HTML just below the menu (to push it up a bit), in order to help illustrate what I'm attempting to do. Here is a link: http://xrl.us/ben37m ...the CSS is here: http://xrl.us/ben38t

 

BTW, the code for the menu was adapted from this site: http://xrl.us/ok5y9 (Mathew James Taylor's Design blog).

Edited April 7, 2009 by Zad

[falkencreative]

Will adding "clear:both;" to your #content's CSS do what you are looking for?

[Zad]

Thanks - that helps. Now I can control the spacing at the top of the menu by changing the height value of the header. I still can't seem to adjust the clearance at the bottom of the menu, though...

[jlhaslip]

Set some margin-top to the Content div.

[Zad]

Changing the content top margin works in Explorer, but has no effect in Firefox.

[PicnicTutorials]

Try padding instead...

[Zad]

Thanks, but content top padding only works in IE6. This is frustrating...

[Wickham]

At the moment you have a 10px top and bottom margin to #header and #content but none to #centeredmenu.

 

The vertical spacing of #centeredmenu between them works better if you cancel the bottom margin of #header and the top margin of #content and add a top and bottom margin to #centeredmenu

 

#header {

width: 806px;

height: 154px;

margin: 10px auto 0 auto;/*10px auto;*/

background-image : url(images/header_test.jpg);

background-repeat : no-repeat;

}

 

#centeredmenu { margin: 10px 0;

float:left;

width:100%;

overflow:hidden;

position:relative;

}

#content {

clear:both;

width: 800px;

color: #000000;

border: 1px solid #4e7fb6;

background: #FFFFFF;

margin: 0 auto 10px auto;/*10px auto;*/

padding: 0px;

height: 350px;

}

[Zad]

Thanks, Wickham - that worked great!

I have updated the code in my original links using your suggestions.

Edited April 7, 2009 by Zad

[Zad]

One more question...

 

Using CSS, how would I add a full width (gray) background to the menu bar, like this?: http://xrl.us/ben8g7

 

Thanks.

Edited April 8, 2009 by Zad

[Wickham]

You start by adding a background-color to

#centeredmenu { background-color: #ddd; margin: 10px 0;

float:left;

width:100%;

overflow:hidden;

position:relative;

}

 

but the div is 100% wide and the gray sticks out a bit at both sides. Adding margins to tye sides cures the left side, but the right side sticks out further, so I adjusted the width and made the margin 10px all round:-

 

#centeredmenu { background-color: #ddd; margin: 10px;

float:left;

width:802px;/*100%; */

overflow:hidden;

position:relative;

}

[Zad]

Thanks, but the corrected menu bar is shifted to the right in IE6. I don't think that browser likes the new margin settings (I use http://netrenderer.com to check compatibility).

 

Also, is it possible to retain the vertical white lines between the menu "buttons" as seen in the example link in my last post?

[newseed]

IE6 will require you to add your margins/paddings to the overall width of the div you are applying it too.

 

If you have a 700px wide content div and you want to add 20px padding for both left and right of the div, then you will need to reset the width of the content div to 660px.

 

660px + 20px padding left + 20px padding right = 700px;

 

IE7 and Firefox will understand this and so it shouldn't break.

 

If you have margins/padding outside of that div you will have to do some math to make sure it doesn't break any child divs if the parent div doesn't break.

[Wickham]

Newseed said If you have a 700px wide content div and you want to add 20px padding for both left and right of the div, then you will need to reset the width of the content div to 660px.

 

Your #wrapper is 822px and that is why I edited the width of #centeredmenu to 802px with its new 10px side margins and that was OK in IE7 and Firefox, but I admit I didn't check IE6.

[Zad]

newseed, I must be misunderstanding...

 

#centered_menu {

background-color: #ddd;

float:left;

width:802px; <----- Should I change this to 782px? That looks wrong in IE6 & Firefox...

margin: 10px;

overflow:hidden;

position:relative;

}

Edited April 8, 2009 by Zad

[Wickham]

802px with two side margins of 10px should be correct within #wrapper 822px wide, but remove the float: left; as it isn't needed if the div fits exactly and IE6 does have a habit of doubling up margins where there is a float, so this should work in IE6 but I can't test IE6 at the moment:-

#centeredmenu { background-color: #ddd; margin: 10px;

/*float:left;*/

width:802px;/*100%; */

overflow:hidden;

position:relative;

}

[Zad]

Wickham, that renders perfectly in all the browsers I tested it in. Thank you for coming through again!

 

As mentioned earlier, is it possible to alter the CSS so the vertical white lines appear between the menu "buttons" as seen in my example?: http://xrl.us/ben8g7

[Wickham]

As mentioned earlier, is it possible to alter the CSS so the vertical white lines appear between the menu "buttons" as seen in my example?: http://xrl.us/ben8g7

 

The usual way is to add borders to the li tag style. If you add right borders to all of them, the first li tag then needs a class to add a left border just to that one:-

 

#centeredmenu ul li { border-right: 1px solid #fff;

display:block;

float:left;

list-style:none;

margin:0;

padding:0;

position:relative;

right:50%;

}

#centeredmenu ul li.left-border { border-left: 1px solid #fff; }

 

and the html markup gets edited to:-

 

• Item one

• Item two
• Item three
• Item four

 

 

Make sure that the extra widths added by the borders doesn't cause a problem, but it didn't in my test in IE7 and Firefox.

[Zad]

No problems in other browsers. I have saved your code changes to my original page link for the benefit of others. Again, your help is much appreciated .

[daddyalfie]

Another way of adding that left border to the first item in the list is with pure HTML Like so:

 

 

First item

Second item

.............etc...............

 

If you have styled all items with a right border the   adds an "empty" cell with just the right border, which then becomes your first left border.

 

Just a thought, but it works. I have used it a number of times.

 

Alfie