Take the float out of the ul element and the li element. Then add a "display:inline;" to the li element.
This will stack the li elements side by side. Then you'll need to experiment with the margins and paddings to get what you want. There is also "display:inline-block;" which stacks the elements side by side AND keeps the elements as blocks instead of inline which will allow you to use width on them. Remember, inline elements, you cannot set a width. Experiment and see which option works for you the best. M Sent from my iPad On Sep 23, 2011, at 2:45 AM, Omicron <[email protected]> wrote: > Hello to all, > I am completely stumped here and would appreciate any assistance you > folks could offer. > I have created a navigation bar which utilized an background image for > the buttons. > One image when there is no mouse rollover, and anther when there is a > mouse rollover. > The bar works as designed. > It is part of a web page that also houses a logo image above it and a > javascript-based slideshow below it. > All work as designed. > > My problem is that I need to center the entire site, and every method > I have employed to do so, centers everything but the navigation bar. > The bar just sits flush to the left-hand side of the page. > Yes..I am using float:left in the CSS sections of the navigation > styling. > I'm assuming that this is what is causing me to have this issue. But I > do not know how else to code the navigation bar in order to get the 6 > buttons to line up horizontally with each other. > > Here is the code I used to generate the navigation bar. As I said, all > works as designed so I'd hate to have to do > a complete re-design of the bar but I am completely out of ideas as to > how to solve this problem. > Any help would be welcomed. > Thank you. > > ul#cssnav { > margin:0 0 2em 17px; > padding:0; > list-style-type:none; > float: left; > } > ul#cssnav li { > position:relative; > font-family: arial, verdana, helvetica, sans-serif; > background: url(../images/rollover2.gif) no-repeat; > float:left; > width: 11em; > height: 4em; > line-height:4em; > text-align:center; > margin-left:-17px; > } > #cssnav li a { > display:block; > width: 11em; > height: 4em; > /* display: block; */ > color: #FFF; > text-decoration: none; > background: url(../images/rolloff2.jpg) no-repeat; > font-weight:bold; > } > #cssnav li a:hover,#cssnav li.current a > {background:transparent;color:#000} > > /* #navlist li > { > display: inline; > list-style-type: none; > padding-right: 20px; > text-decoration: none; > } */ > > -- > -- > You received this because you are subscribed to the "Design the Web with CSS" > at Google groups. > To post: [email protected] > To unsubscribe: [email protected] -- -- You received this because you are subscribed to the "Design the Web with CSS" at Google groups. To post: [email protected] To unsubscribe: [email protected]
