0

How can I centre this horizontal list inside a Div? My page layout is fluid.

<ul id="navlist">
<li><a href="#">test1</a></li>
<li><a href="#">test2</a></li>
<li><a href="#">test3</a></li>
<li><a href="#">test4</a></li>
<li class="last"><a href="#">test5</a></li>
</ul>

<!--
#navlist {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
}

#navlist li {
float: left;
padding:0px 5px;
border-right:1px solid #009;
}

#navlist a {
color:#009;
text-decoration:none;
}

#navlist a:hover {
color:#39F;
text-decoration:underline;
}

#navlist li.last {
border:none;
}

-->

2
Contributors
5
Replies
6
Views
10 Years
Discussion Span
Last Post by lithium1976
0

If I remember correctly, you want Inline not float.

You want to divs... one full width, acting as parent, the other as child.
you can center the child.
I think you can flaot the child too... but the List should be inline...

I think.

Let me know if that works... if not, I'll go look at some of my sites.

0

Okay... so to clarify (so I know what site to look at)...

You want a Fluid Horizontal Navigation with links centering themselves.

If so... I will go fetch the relevant code.
Please note that all my sites are "expandable", meaning that when text size changes, so does the container ;)

EDIT.
This means that though things may originally be ona a single "level"... resizing the window or changing text size could lead to the links dropping to another "level" - (though I view this as better than sliding out of sight either side of the page etc.)

0

Yeah I want the list which I supplied the code with in this post to be positioned centrally.

0

I think I've worked it out -

#navcontainer ul
{
font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:11px;
    font-weight:bold;
text-align: center;
padding-bottom: 0px;
padding-top: 0px;
padding-left: 0;
margin-top: 0;
/* cancels gap caused by top padding in Opera 7.54 */
margin-left: 0;
color: #0000CC;
width: 100%;
font-family: Arial,Helvetica,sans-serif;
line-height: 18px;
/* fixes Firefox 0.9.3 */
}

#navcontainer ul li
{
display: inline;
padding-left: 0;
padding-right: 0;
padding-bottom: 1px;
/* matches link padding except for left and right */
padding-top: 1px;
border-right: 1px solid blue;
}

#navcontainer ul li a
{
padding-left: 5px;
padding-right: 5px;
padding-bottom: 0px;
padding-top: 0px;
color: #000099;
text-decoration: none;

}

  #navcontainer ul li.last {
    border:none;
}

</style>
</head>

<body>
<div id="navcontainer">
<ul id="navlist">
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li class="last"><a href="#">Item five</a></li>
</ul>
</div>

Edited by mike_2000_17: Fixed formatting

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.