Member Avatar for lithium1976

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
  • 104 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by lithium1976

Recommended Answers

All 5 Replies

Member Avatar for autocrat

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.

Member Avatar for lithium1976

Hey thanks i'd really apprecitate it!

Member Avatar for autocrat

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.)

Member Avatar for lithium1976

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

Member Avatar for lithium1976

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 because: Fixed formatting
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.