Jump to content

Adding A Centered CSS Menu


Zad

Recommended Posts

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 by Zad
Link to comment
Share on other sites

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;

}

Link to comment
Share on other sites

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;

}

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by Zad
Link to comment
Share on other sites

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;

}

Link to comment
Share on other sites

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:-

 

 

 

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...