How do I Create A CSS based Horizontal Menu that stretches to fit? [Archive]

View Full Version : How do I Create A CSS based Horizontal Menu that stretches to fit?

andrewmta

02-20-2007, 01:29 AM

I am trying (very hard) to renounce my table ways and learn how to use CSS to achieve the same design effects.

I'm running into a problem though. Currently, I am trying to transform a horizontal table that has a fixed with. The <TD>'s in the table have no set width, so depending on how many <TD>'s happen to be in the table they stretch or shrink to ensure that all of the <TD>'s fit within the set width.

In this way I can have a dynamic menu and add/subtract menu items on the fly while always maintaining a menu that fits in my design template. The table cells which house each menu item shrink or grow to fill the entire space.

I have searched and searched and don't seem to be able to find an example of a CSS based menu that has a fixed div width and contains divs/li etc. that automatically resize to fit within the parent div width as menu items are added/removed.

Is this possible in CSS? Would anyone be willing to point me in a direction where I could find an example of this sort of menu, or perhaps help me to understand how I might achieve it?

I'm willing to utilize a solution that is more complicated than a table if it helps me to learn to be less reliant upon them. Thank you sincerely for your time and help.

Tristan S.S.

02-21-2007, 12:27 AM

Is there any particular problem with using tables, since there are probably the best for what you're looking for?

ddadmin

02-21-2007, 05:57 AM

I'm a little confused too- are you talking about a CSS menu that uses tables for its layout (if so, please provide a link), or just how to emulate a table using CSS?

Tables emulation in CSS is currently very limited as far as what can be done easily. I believe CSS 3 when it's supported addresses those limitations. In the meantime, here's a quick example I came up with of a CSS grid that behaves/ looks like a table. It's just a demo though, and still contains some bugs, but you get the idea:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<style type="text/css">

.cssgridCols{
border-left: 1px solid black;
}

.cssgridCols ul{
float: left;
width: 23%;
list-style-type: none;
margin: 0;
padding: 0;
}

.cssgridCols ul li{
padding: 2px;
text-align: left;
background-color: #FFFFC1;
border: 1px solid black;
border-width: 0 1px 1px 0;
}

.cssgridCols ul li.header{
border-top: 1px solid black;
background-color: #FDD700;
font-weight: bold;
}

</style>

<body>

<br />

<div class="cssgridCols" style="width: 600px;">

<ul class="firstcol">
<li class="header">ddd</li>
<li>ddfd</li>
<li>dfdf</li>
<li>sfsdfsdd</li>
</ul>

<ul>
<li class="header">ddd</li>
<li>ddfd</li>
<li>dfdf</li>
<li>sfsdfsdd</li>
</ul>

<ul>
<li class="header">ddd</li>
<li>ddfd</li>
<li>dfdf</li>
<li>sfsdfsdd</li>
</ul>

<ul>
<li class="header">ddd</li>
<li>ddfd</li>
<li>dfdf</li>
<li>sfsdfsdd</li>
</ul>

<br style="clear: left" />
</div>

<br/>
<br />

<div id="test" class="cssgridCols" style="width: 90%;">

<ul class="firstcol">
<li class="header">ddd</li>
<li>ddfddfsd fs</li>
<li>dfdf</li>
<li>sfsdfsdd</li>
</ul>

<ul>
<li class="header">ddd</li>
<li>ddfd</li>
<li>dfdf</li>
<li>sfsdfsdd</li>
</ul>

<ul>
<li class="header">ddd</li>
<li>ddfd</li>
<li>dfdf</li>
<li>sfsdfsdd</li>
</ul>

<ul>
<li class="header">ddd</li>
<li>ddfd</li>
<li>dfdf</li>
<li>sfsdfsdd</li>
</ul>

<br style="clear: left" />
</div>

hazardis

02-25-2007, 11:05 PM

I dont know an exact solution to your problem but here are some good resources on css and lists(menus).

http://www.dezwozhere.com/links.html

also have a look at "list a matic" and "list o matic".

A centred horizontal menu would probably help you the best. Would allow you to add items and remove them while keeping the menu centred on the page.

Cheers