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-css-techniques-and-resources/
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]
