Forum Moderators: not2easy
First post on the board and quite new to this CSS but enjoying it.
I've recently built my first flash site (still not quite complete) and am now trying to complete a CSS/HTML version to get round indexing & accessibility issues.
I've got a nav menu that mimics the action of the flash buttons (minus the smooth animation), however I can't seem to position it in the middle of the browser window.
I've tried changing "float: left;" to "float: middle;" and the menu displays fine in FF but in IE the buttons appear smaller and the bottom border is missing.
Can anyone help please (code is below)
Cheers
Bob
Here's my markup:
<div id="navcontainer" align="center">
<ul id="navlist">
<li id="active"><a href="#" id="current">home</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">about me</a></li>
<li><a href="#">availability</a></li>
<li><a href="#">pricing</a></li>
<li><a href="#">contact</a></li>
<li><a href="#">login</a></li>
</ul>
</div>
...and here's my stylesheet:
#navlist
{
margin: 0;
padding: 0 0 0px 0px;
border-bottom: 1px solid #000;
}#navlist ul, #navlist li
{
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#navlist a:link, #navlist a:visited
{
float: left;
line-height: 14px;
font-weight: bold;
margin: 2px 2px 2px 2px;
text-decoration: none;
color: #999;
border-bottom: 4px solid #006699;
background: #ffffff;
padding-left: 20px;
padding-right: 0px;
padding-top: 4px;
padding-bottom: 4px;
}
#navlist a:link#current, #navlist a:visited#current, #navlist a:hover
{
border-bottom: 4px solid #006699;
padding-left: 10px;
padding-right: 10px;
padding-top: 4px;
padding-bottom: 4px;
background: #006699;
color: #fff;
}
#navlist a:hover { color: #fff; }
[edited by: encyclo at 6:51 pm (utc) on Oct. 2, 2007]
[edit reason] no URLs thanks [/edit]
I am assuming that "navcontainer" wraps your entire content. Based on that assumption, try:
#navcontainer {
margin: 0 auto;
padding: 0;
text-align: left; /* solves and IE problem */
width: ; /* pick a width either fixed or % is necessary to align the navcontainer in the center of the window */
}
And depending on the doctype you are using, the align="center" in the navcontainer is a depreciated tag and does not conform to a strict doctype. If you need it there, it is better to use an in-line style: style="text-align: center;", but this will make your text center, not the <div> center. I suggest dropping it.
Marshall
Thanks for this - your fix for the display problem in IE worked and now I have the menu in the very top left of the screen looking identical in IE and FF.
However, no matter what values I try putting in 'width' for 'navcontainer' I can't seem to position the menu anywhere else
Any suggestions?
Cheers
Bob
You will have to set the navigation in relationship to the navcontainer, as it is its parent, via margins, padding, float or absolute positioning. As an example, if you want the navlist on the left regardless of the width of the navcontainer, the simplest thing would be:
#navlist {
margin: 0 0 0 0; /* This represents top right bottom left. Can simply be margin: 0; So if you want it 10px from the top and 20 from the left, do margin: 10px 0 0 20px; Padding works the same way */
padding: 0;
border-bottom: 1px solid #000;
float: left; /* or right or do margin: 0 auto if you want it to center in the navcontainer, but you will need a width */
}
Marshall
Bob
Marshall
One more thing, you may want to add position: relative to the navlist as its position is relative to the navcontainer. It is not always necessary, but it does not hurt.
[edited by: Marshall at 6:44 pm (utc) on Oct. 2, 2007]
