PDA

View Full Version : Need to center this list inside a div. How?



moss2076
Aug 27th, 2007, 05:31 PM
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;
}

-->

_Aerospace_Eng_
Aug 27th, 2007, 05:34 PM
http://www.cssplay.co.uk/menus/centered.html

moss2076
Aug 27th, 2007, 05:44 PM
Seems a bit hit, n miss that one, im not sure.

httpdev
Aug 27th, 2007, 07:35 PM
Have you tried setting the margins on your list to auto?


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

VIPStephan
Aug 27th, 2007, 07:42 PM
Have you tried setting the margins on your list to auto?

Thatís the second time I see you giving insufficient advice. Setting margins to auto without assigning a width doesnít do anything. Think (and test) before you are posting, otherwise youíre not gonna make many friends here.

moss2076
Aug 27th, 2007, 09:02 PM
Does anyone know how to do it with the code I supplied? Do I need to add a div or anything?

_Aerospace_Eng_
Aug 27th, 2007, 09:06 PM
View the source of the link I posted. It shows how to do it.

httpdev
Aug 27th, 2007, 09:19 PM
VIPStephan, I'm just trying to help. These are things I would try if I was having that problem---and it's not way off based; I just assumed some things when I shouldn't have. I'm new to this, please give me a break. It's forum trolls like you that keep the average forum browser from stepping up and trying to help other people---a fear that their answer might not be good enough and that it should be left up to people with "high post counts" to moderate other's answers. Secondly, you were too worried about proving me wrong to even supply an answer to this problem yourself. Are you here trying to help people, or just ostracizing people who try?

moss2076
Aug 27th, 2007, 09:29 PM
That link appears to use tables? Am I wrong there? Sorry if I am. The second example doesnt display correctly.

harbingerOTV
Aug 27th, 2007, 10:15 PM
i wrapped them in a div so you could see that it was really centered.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>centered list of unknown width</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

html, body {
padding: 0;
margin: 0;
}

body {
text-align: center;
}

div {
background: #df3;
padding: 10px 0;
width: 600px;
margin: 0 auto;
text-align: left;
overflow: hidden;;
}

#navlist {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
float: left;
position: relative;
text-align: center;
list-style: none;
left: 50%;
background: #ddd;
padding: 0;
margin: 0;
}

#navlist li {
float: left;
padding:0px 5px;
border-right:1px solid #009;
position: relative;
left: -50%;
text-align: center;
}

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

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

#navlist li.last {
border:none;
}
</style>
</head>
<body>

<div>
<ul id="navlist">
<li><a href="#">test link</a></li>
<li><a href="#">a longer test link</a></li>
<li><a href="#">short</a></li>
<li><a href="#">really long link to show the difference</a></li>
<li class="last"><a href="#">test5</a></li>
</ul>
</div>

</body>
</html>



basically relative position the UL and LI. float them both left then 50% left the UL and -50% left the LIs.

oldcrazylegs
Aug 27th, 2007, 10:55 PM
text-align:center will center it for internet explorer margin:0 auto; will center it in all other browsers. use both of them.

PappaJohn
Aug 27th, 2007, 10:59 PM
That link appears to use tables? Am I wrong there?
The link in _Aero_'s post does not use tables, in fact, there is not a table on that page.

harbingerOTV
Aug 27th, 2007, 11:51 PM
text-align:center will center it for internet explorer margin:0 auto; will center it in all other browsers. use both of them.

margin: 0 auto only works if the element you are centering has a fixed width.


The link in _Aero_'s post does not use tables, in fact, there is not a table on that page.

I think the display: table-cell is confusing him ;)

VIPStephan
Aug 28th, 2007, 02:36 AM
VIPStephan, I'm just trying to help. These are things I would try if I was having that problem
While I appreciate your efforts in trying to help youíre not really helping by giving insufficient advice due to laziness in verifying your suggestions.

It's forum trolls like you that keep the average forum browser from stepping up and trying to help other people---a fear that their answer might not be good enough and that it should be left up to people with "high post counts" to moderate other's answers.
Iím likely to interpret that troll comment as personal insult. Keep t professional, will ya? Itís not like Iím not giving you or any new person here a chance. Feel free to read my thousandsomething previous posts to get an idea of how helpful I can be.



Secondly, you were too worried about proving me wrong to even supply an answer to this problem yourself. Are you here trying to help people, or just ostracizing people who try?

I read this post out of pure curiosity and wasnít actually feeling like trying to find a solution for this problem. Iím still doing this at the side and can help when I want. And Aero, for example, has made a short and yet helpful reply with a link that was right on the spot so thereís no reason I should waste time replying as well.
However, I just happened to come across two of your comments at the same day that were no help at all because you didnít give the correct answers and you didnít try to explain what actually happens when you do this and that so the OP would not just copy and paste but also understand.

You donít have to take offense in my previous post, just see it as prompt note to think before you come with overhasty comments to improve the quality of your posts. As I said I appreciate your efforts, just do it more thoroughly if you do it already. ;)

httpdev
Aug 28th, 2007, 04:06 AM
Well I certainly agree, I made a mistake in reading the initial question too fast and again I admit I assumed to much, however, I would like you also to respect the advice you gave me. Keep it "profressional". Replying to a suggestion I made with..."gives me a headache everytime I read this..blah blah blah" isn't very helpful or professional. On another note, I could careless about reading through your "1000" posts---having 5 posts or 10 thousand still doesn't give you the right to be rude and hypocritical. :/

rmedek
Aug 28th, 2007, 05:02 AM
http://www.codingforums.com/showthread.php?t=91276
http://www.codingforums.com/rules.htm

The question is answered, more or less, so I'm closing this thread.