CODEWITHSUNDEEP
htmlcss
user1225529
user1225529

Reputation: 11

How to spread my website menu to fill the div it sits in?

I've been stuck on something for a while I hope is simple to fix.

I have a menu from css play which I have edited. I would like to make it full width in my main body div (980px wide) and have the menu headings spread out to fill the space.

At the moment it is just centered and there is a gap either side of the menu.

I put it here so you can see what I mean! http://nugrafik.com/menu_test_delete.html

I've tried cheating by fiddling with the margins/padding etc but it never looks quite right.

Can anybody help?

CSS:

.menu {display:inline-block;}
.menu {display:inline;}
.holder {display:table;}

.menu {
display:table-row;
padding:0;
margin:0;
list-style-type:none;
white-space:nowrap;
font-family: Helvetica, Verdana, Tahoma;
color: #333333;
 }
.menu li {display:inline;}
.menu a, .menu a:visited {
display:block;
float:right;
padding:3px 11px;
color:#666666;
background:#e0e0e0;
border:1px solid #fff;
text-decoration:none;
 }
.menu a:hover {
color:#fff; 
background:#c1d045;
}

#wrapper2 {
text-align:center;
font-family: Helvetica, Verdana, Tahoma;
color: #333333;
}
#wrapper2 .holder {
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
text-align: center;
}       
#mainbody {
background-color: #66CCFF;
height: 400px;
width: 980px;
margin-right: auto;
margin-left: auto;
}

HTML:

<body>
<div id="mainbody">
<div id="wrapper2">
<div class="holder">
<ul class="menu">
<li><a href="#nogo">Contact</a></li>
<li><a href="#nogo">Links</a></li>
<li><a href="#nogo">Scholarships</a></li>
<li><a href="#nogo">Organizers</a></li>
<li><a href="#nogo">Abstracts</a></li>
<li><a href="#nogo">Accommodation</a></li>
<li><a href="#nogo">Venue</a></li>
<li><a href="#nogo">Scientific Program</a></li>
<li><a href="#nogo">Home</a></li>
</ul>
</div>
</div>
</div>
</body>

Upvotes: 1

Views: 1291

Answers (5)

Shawn Taylor
Shawn Taylor

Reputation: 3969

You need to set widths correctly.

http://jsfiddle.net/urNjW/

Upvotes: 1

ergonihil
ergonihil

Reputation: 11

Unfortunately this is not fluidly possible with CSS. Even if you do get it right, it is likely to collapse due to small changes. So it is not considered good practice unless you know it will be absolute (which is hardly ever the case, and should never be).

Alternatively though - just have the menu items float to the left and remove the borders. They will look much nicer than if you accomplished the alignment anyway. The menu will also be much more flexible. Maybe try a less dramatic hover state too. Good luck.

Upvotes: 0

SnakeBombs
SnakeBombs

Reputation: 21

After applying sandeep's recommendation, increase the left/right padding a little more for each (16px seems about right to me...it's closer than the 11px you have now) and then add special classes to the leftmost and rightmost menu items to remove the left and right borders, respectively, so the leftmost menu item has no border-left and the rightmost menu item has no border-right.

This still probably isn't exactly what you want, with calculated fluid widths of menu items, but as you've seen, they can't be evenly spaced and fill the width completely evenly with no less and no more, so the left and right menu items will be slightly larger than the others. It's probably not enough to notice anyway.

Edit: I hadn't thought of 11.1% width. That would get you to fill the full width.

Upvotes: 1

Waiting for Dev...
Waiting for Dev...

Reputation: 13029

1) Take off display: table; in .holder.

2) Take off display: table-row; in .menu (better take of all display you have set to .menu

3) Take off display: inline; to .menu li and add to it float: left; width: 11.11%;. 11.11% is 100/9, to have all your items to have same width. Otherwise set manually a width for each item, because otherwise floating them (or displaying inline as you did) they will use just as width as they need and your menu won't be 100% width.

Upvotes: 2

sandeep
sandeep

Reputation: 92803

Write this in your css:

#wrapper2 {
    background:#E0E0E0;
    overflow: hidden;
    text-align: center;
}

Upvotes: 1

Related Questions