1 reply [Last post]
sisko
sisko's picture
User offline. Last seen 1 year 23 weeks ago. Offline
newbie
Timezone: GMT+1
Joined: 2010-08-26
Posts: 1
Points: 2

I have 3 separate menus in different parts of my website. They all have different number of links in them.

My page area is 960px in width and I an trying to find a css setting that will allow all my menus to fill out across the width of the page.

Below is the simple HTML code:

<ul>
<li id="menu-931" class="menuparent menu-path-node-34"><a href="/node/34" title="" class="active">Branding Services</a><ul><li id="menu-1861" class="menu-path-node-101"><a href="/node/101" title="Events and Festivals">Events and Festivals</a></li>
<li id="menu-1860" class="menu-path-node-100"><a href="/node/100" title="Stadia and Arena">Stadia and Arena</a></li>
<li id="menu-1862" class="menu-path-node-102"><a href="/node/102" title="Street and City">Street and City</a></li>
</ul>
</li>
<li id="menu-1809" class="menu-path-node-91"><a href="/node/91" title="Flags">Products</a></li>
<li id="menu-1810" class="menu-path-node-90"><a href="/node/90" title="Flagpole Hire">Flagpole Hire</a></li>
<li id="menu-1811" class="menu-path-node-89"><a href="/node/89" title="Technical Information Branding">Technical Info</a></li>
<li id="menu-1813" class="menu-path-node-94"><a href="/node/94" title="Store">Store</a></li>
<li id="menu-1814" class="menu-path-node-77"><a href="/node/77" title="About Us">About Us</a></li>
<li id="menu-1815" class="menu-path-node-76"><a href="/node/76" title="Contact Us - Branding">Contact Us</a></li>
<li id="menu-1816" class="menu-path-node-40"><a href="/node/40" title="Enquiry Branding">Enquiry</a></li>
<li id="menu-1863" class="menu-path-node-103"><a href="/node/103" title="Retail and Leisure">Retail and Leisure</a></li>
</ul>

The CSS is as follows:

ul li {
background-color:#EEEEEE;
background-image:none;
border-color:-moz-use-text-color #CCCCCC #CCCCCC;
border-right:1px solid #CCCCCC;
border-style:none solid solid;
border-width:0 1px 1px;
float:left;
margin:0;
padding-left:0;
}

As you can see, it is simple HTML but I want to avoid inflexibilities by setting absolute widths so that will I can't remove or add new menu items etc

Please help

CupidsToejam
CupidsToejam's picture
User offline. Last seen 2 weeks 1 day ago. Offline
rank Guru
Guru
Timezone: GMT-6
Joined: 2008-08-15
Posts: 2634
Points: 1552

you want your menus to expand

you want your menus to expand outside the 960 width to fill the full width of the screen?


First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS

http://www.pixelbehavior.com