trevor bayliss wrote: > Hi all I´ve been doing all I can to try and perfect this navigation but I > just don´t understand it I am sure it is very simple. I have tried to make > this as simple as possible with as little code as possible. > I have a navigation called #topnav which has width auto. > Then I have a #topnav LI which has a width of 87px. The html has 10 LIs > which makes a total width of 870px. > Then I have #topnav A which also has a width of 87px. > These are all contained in an ID called #width which has a width of 880px. > > At present this works fine and fit for the information that I have in the > links, however, the rest of the page is wider. I need to increase the > navigation which I can do by increasing the #width pixel size(in this case by > 40px). How can I add an LI to cover this space? I have tried to do it but > without luck > I am not really sure what you mean by this or what you want the navigation to look like. You can add as many <li>'s as you like, however as soon as their combined width exceeds the containers specified width the links will wrap to a new line. Also because you have defined the container's width any UA or screen resolution that is less then 880px wide will cause a horizontal scroll bar.
> > Thank you for your help > > http://www.geocities.com/bayliss_trevor/tester.htm > > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" > "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd";> > <HTML><HEAD> > <title>nav</title> > <STYLE type=text/css> > #width { > MARGIN-LEFT: 50px; WIDTH: 880px; MARGIN-RIGHT: auto; TEXT-ALIGN: left > } > #topnav { > BORDER-TOP: blue 4px solid; MARGIN: 9px 0px 0px; width: auto > } > #topnav LI { > DISPLAY: inline; BACKGROUND: black no-repeat left top; FLOAT: left; WIDTH: > 87px; HEIGHT: auto > } > #topnav A { > BORDER-RIGHT: blue 1px solid; DISPLAY: block; BACKGROUND: no-repeat left > top; FONT: 11px/20px > tahoma, arial, sans-serif; WIDTH: 87px; COLOR: #fff; TEXT-ALIGN: center > } > </STYLE> > </HEAD> > <BODY> > <DIV id=width> > <DIV id=logo><IMG height=57 alt="" src="images/logo.jpg" width=217> > <UL id=topnav> > <LI><A title="" href="">Home </A></LI> > <LI><A title="" href="">About Malls</A> </LI> > <LI><A title="" href="">Malls</A> </LI> > <LI><A title="" href="">Malls UK</A> </LI> > <LI><A title="" href="">Malls USA</A> </LI> > <LI><A title="" href="">Malls France</A> </LI> > <LI><A title="" href="">National</A> </LI> > <LI><A title="" href="">International</A></LI> > <LI><A title="" href="">Contact Us</A></LI> > <LI><A title="" href="">FAQs</A></LI> > </UL> > </DIV></DIV> > </BODY></HTML> I took some liberties with your code, and a stab at what I thought you were after. The result can be found here http://www.thetangos.com/testing/trevor.html Tango ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
