Centering ul within a div

[NIA2]

Hi,

I wondered if I could ask a further question: I have a navigation list marked up as follows:

<div id="navtop"> <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About us</a></li>
      <li><a href="#">Partners</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Feedback</a></li>
      <li id="home"><a href="#">Online store</a></li>
      </ul>
    </div>

The css used to style the nav is below:

#navtop ul {
	list-style: none;
	margin: 0 auto 0;
	width: 650px;
	padding: 12px 0 12px;
}

#navtop li {
	display: inline;
	float: left;
	border-right: 1px dotted #fff;
}

#navtop li#home {
	border: none;
}

#navtop a:link, #navtop a:visited {
	display: block;
	padding: 0.4em 1.8em 0.4em 1.8em;
	color: #fff;
	text-decoration: none;
}

#navtop a:hover {
color: #634A95;
}

In order to get the ul to center horizontally within the div #navtop, I've had to set an explicit width on the ul and then use auto left and right margins as follows:

#navtop ul {
	list-style: none;
	margin: 0 auto 0;
	width: 650px;
	padding: 12px 0 12px;

}

To get it centered correctly I have to get the width of the ul as close to the combined width of the li elements so that it centers perfectly. The problem is that I don't know what the combined width of the li elements is because I haven't set this explicitly, therefore I have to guess at the width, then test, then tweak some more etc. Then I finally get it right so that it looks good in safari on my mac and then I test on internet explorer on a pc and it's not wide enough there.

So I guess I'm asking is there an easier way to center the ul within a div?

Thanks again for any further help offered.

 

[BillyRayPreachersSon]

If the LIs are inline, then you may as well make the UL inline, and give its container a "text-align" of "center".

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[NIA2]

Thanks again for the help.

Unfortunately that didn't work. I changed the code as follows:

#navtop {
	height: 45px;
	background-color: #000;
	text-align: center;
}

#navtop ul {
	list-style: none;
	margin: 0;
	padding: 12px 0 12px;
	display: inline;
}

The ul wasn't centered in the div. Do you know why?

 

[BillyRayPreachersSon]

Try not floating your LIs, given they're inline as well.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[NIA2]

That didn't work either. When I removed the float from the Lis they all become block again and jumped to their own lines.

Maybe it's not possible?

 

[BillyRayPreachersSon]

Did you stop them being inline as well as removing the floats from them?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[NIA2]

I did yeah. The following is what I have:

#navtop ul {
	list-style: none;
	margin: 0 auto 0;
	width: 650px;
	padding: 12px 0 12px;
}

#navtop a {
	border-right: 1px dotted #fff;
}

#navtop li#home {
	border: none;
}

#navtop a:link, #navtop a:visited {
	display: block;
	padding: 0.4em 1.8em 0.4em 1.8em;
	color: #fff;
	text-decoration: none;
}

#navtop a:hover {
color: #634A95;
}

Since removing those two rules from the Li I don't have any styles for this element anymore. I've also applied text-align: center; on the #navtop div which is the container.

I can't work it out.

 

[BillyRayPreachersSon]

Why did you remove the "display:inline" from the LIs? My advice was based upon the code you had initially which had this style present.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[NIA2]

The first time 'round I didn't remove it. When I posted back saying it didn't work I thought your response was to remove it.

So my code since following your advice is:

#navtop li {
display: inline;
}

This breaks the navigation.

 

[Vragabond]

The delicate line between floats, block-level and inline elements is what is the problem here. Let's look at your initial code:

In a block-level UL, there were floated LIs and inside the floated LIs there were block-level As (anchors).

You have realized that if you use block-level elements you can make them centred by using margins and fixed width. However, you could not use fixed width, because you could not predict the width of the element in advance.

So, you need to make it inline. If you make UL inline, it doesn't change anything, because LIs are still floated inside and will eventually float to the hard left. So, LIs need to be unfloated. If you unfloat the LIs, they will appear one below another, so you need to transform them to inline, so that they appear in a line. Now you have block anchors inside inline LIs, so you're still going down in lines -- you need to reverse anchors to make them inline again. Only when your UL, LI and A are inline, will the inline option work as you expect it.

Make a note that UL and LI are by default block level elements (LI is actually displayed as list-item, but some browsers do not make a distinction between that and block) and A is inline. So, if you want to make them all inline, you will definitely need to change the display property of UL and LI and leave the anchor display property alone (right now you're changing it to block).

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[NIA2]

Thanks for the detailed explanation. I did what you suggested and it's now centered horizontally within the div which is great, but because I removed "display: block" on the anchor elements, everything is sitting right at the top of the div. Would you know how I could get it centered vertically within the div? The current code is as follows:

#navtop {
	height: 45px;
	background-color: #000;
	text-align: center;
}

#navtop ul {
	list-style: none;
	margin: 0;
	padding: 12px 0 12px;
	display: inline;

}

#navtop li {
	display: inline;
}

#navtop a {
	border-right: 1px dotted #fff;
	display: inline;
}


#navtop li#home {
	border: none;
}


#navtop a:link, #navtop a:visited {
	padding: 8px 15px 8px 15px;
	color: #fff;
	text-decoration: none;
}


#navtop a:hover {
color: #634A95;
}

 

[Vragabond]

Replace height with line-height in the #navtop declaration. As long as all your text is only one line, this will make it vertically centered.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]