My thanks to Devon, Brandtley and MiB for all your suggestions. Your ideas have allowed me to re-think my approach to the project and to see the "error of my ways" :) I've experimented with several of your suggestions with a basic bar and have resolved the issue thanks to you folks. Best regards to all.
On Sep 23, 10:03 am, MiB <[email protected]> wrote: > 23 sep 2011 kl. 08.45 skrev Omicron: > > > > > 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. > > > ul#cssnav { > > margin:0 0 2em 17px; > > padding:0; > > list-style-type:none; > > float: left; > > } > > You're asking the whole nav bar to float "left" to the inner left side > of the containing element which is exactly what it does. This rule > does not affect the li-elements, so it can be exchanged for another > placement technique. If you don't have a wrapper element the > containing element is body. While you could set a width and use > percentage padding values for body, the more sensible approach is > usually to use a wrapper element for your page, like a div-element > with id "#page" or something like that. This element does not have to > use pixel width, it could use a percentage for instance. If the latter > you center with a percentage value for the wrapper element on the left > and right margins. If you do set a pixel width, you use 'auto' instead. > > so for instance with not a fixed width: > > #page { > width:99%; > margin:0 22% 2em; /*top left/right bottom*/ > > } > > or with a fixed width > > #page { > width:760px; > margin:0 auto 2em; /*top left/right bottom*/ > > } > > with this element centered, your nav bar could keep all the code you > have and be floated to the left if that's what you want. Personally I > prefer to stick it to the bottom with absolute positioning, using my > header element as positioning context with the rule "position:relative". > > Anyway, it's the li-elements that would need the rule "float:left" in > order for them to display horizontally. "display:inline" may also work > fine depending on context, as other have suggested. > > Check out this article for some background, at least the links: > > http://coding.smashingmagazine.com/2009/12/11/styling-html-lists-with... > > and use the Listamatic site for inpiration and sample code: > > http://css.maxdesign.com.au/listamatic/ > > Your rules for your nav bar seem quite strange otherwise, but I'm not > getting into that now as centering was what you asked about. > > > > > 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] > > /MiB -- -- 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]
