We help IT Professionals succeed at work.

Centre list in middle of page

ma701sss
ma701sss asked
on
533 Views
Last Modified: 2012-08-13
I have the code below but cannot find a way to centre it on the page. It stays to th eleft no matter what I try. Any idea on how to get it to centre?
<<<<<<<<<<<<HTML>>>>>>>>>>>>>>
 
<div id="nav">
   <ul>
      <li><a href="home.aspx">Home</a></li>
      <li><a href="weddings.aspx">Weddings</a></li>
      <li><a href="gallery.aspx">Gallery</a></li>
      <li><a href="contact.aspx">Contact</a></li>
   </ul>
</div>
 
<<<<<<<<<CSS>>>>>>>>>>>>
 
#nav{
   white-space : nowrap;
   background-image:url(navbar.gif);
   background-repeat:repeat-x;
   float: left;
   color : White;
   width : 100%;
   border-style : solid; 
   border-color : #CCCCCC;
   border-bottom-color : #333333;
   border-width : 1px 0 1px 0; 
   margin-bottom: 20px;
} 
 
#nav ul{
   padding : 5px;
   margin : 0;
   margin-left: 65px;
   float : left;
}
 
#nav ul li{
   display : inline;
}
 
#nav ul li a{
   padding: 0.5em;
   padding-left: 1em;
   padding-right: 1em;
   color : White;
   font-weight : bold;
   font-size: 14px;
   text-decoration : none;
   float : left;
}
 
#nav ul li a:hover{
   background-color : #FFFFFF;
   color : #333333;
}

Open in new window

Comment
Watch Question

Mark StegglesWeb Developer
CERTIFIED EXPERT
Top Expert 2006

Commented:
Hello,

You cannot centre a float itself. You could remove the float from #nav and clear your floated menu instead:

#nav{
   white-space : nowrap;
   background-image:url(navbar.gif);
   background-repeat:repeat-x;
   color : White;
   width : 100%;
   border-style : solid;
   border-color : #CCCCCC;
   border-bottom-color : #333333;
   border-width : 1px 0 1px 0;
   margin: 0px auto 20px;
}


<div id="nav">
   <ul>
      <li><a href="home.aspx">Home</a></li>
      <li><a href="weddings.aspx">Weddings</a></li>
      <li><a href="gallery.aspx">Gallery</a></li>
      <li><a href="contact.aspx">Contact</a></li>
   </ul>
   <div style="clear:both;font-size:0px;height:0px;overflow:hidden"></div>
</div>

Cheers
Steggs


Author

Commented:
Thanks, but it still doesn't work unfortunately. It stays firmly on the left.
Mark StegglesWeb Developer
CERTIFIED EXPERT
Top Expert 2006

Commented:
o u need to add a width to this aswell:

#nav{
   white-space : nowrap;
   background-image:url(navbar.gif);
   background-repeat:repeat-x;
   color : White;
   width : 100%;
   border-style : solid;
   border-color : #CCCCCC;
   border-bottom-color : #333333;
   border-width : 1px 0 1px 0;
   margin: 0px auto 20px;
width:500px
}

Author

Commented:
The width:500px works and it centers, however I already had width:100%. Now if I remove width:100% and put in width:500px, it puts a bar that is 500px wide, centred in the middle. This is almost what I need, but the bar has a background and it needs to go 100% across the screen. At the moment with your suggestion the background extends for 500px only.
Mark StegglesWeb Developer
CERTIFIED EXPERT
Top Expert 2006

Commented:
The easy way would be to just add another div around #nav and have the background on that.

Author

Commented:
OK, how would I do that to make it work? I'm tired :)
Mark StegglesWeb Developer
CERTIFIED EXPERT
Top Expert 2006

Commented:
remove the background and border css from #nav and do this

<div id="navHolder">
<div id="nav">
   <ul>
      <li><a href="home.aspx">Home</a></li>
      <li><a href="weddings.aspx">Weddings</a></li>
      <li><a href="gallery.aspx">Gallery</a></li>
      <li><a href="contact.aspx">Contact</a></li>
   </ul>
   <div style="clear:both;font-size:0px;height:0px;overflow:hidden"></div>
</div>
</div>

css

#navHolder {
 background-image:url(navbar.gif);
   background-repeat:repeat-x;
   border-style : solid;
   border-color : #CCCCCC;
   border-bottom-color : #333333;
   border-width : 1px 0 1px 0;
}

Author

Commented:
Nope, it doesn't work. Are you actually trying this yourself?
Mark StegglesWeb Developer
CERTIFIED EXPERT
Top Expert 2006

Commented:
Can you post me the code that you have now: html and css

Author

Commented:
exactly what you have above for nav, navholder and the HTML
Mark StegglesWeb Developer
CERTIFIED EXPERT
Top Expert 2006

Commented:
change this to float:left

#nav ul li{
   float:left
}

Author

Commented:
Why do I want anything to float left?
Mark StegglesWeb Developer
CERTIFIED EXPERT
Top Expert 2006

Commented:
If you want the menu items to be inline horizontally then use float:left

Does this work for you? If not, please explain the problem
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>	
 
<style type="text/css">
#navHolder {
 background-image:url(navbar.gif);
   background-repeat:repeat-x;
   border-style : solid;
   border-color : #CCCCCC;
   border-bottom-color : #333333;
   border-width : 1px 0 1px 0;
}
 
#nav{
   white-space : nowrap;
   background-image:url(navbar.gif);
   background-repeat:repeat-x;
   color : White;
   width : 100%;
   border-style : solid;
   border-color : #CCCCCC;
   border-bottom-color : #333333;
   border-width : 1px 0 1px 0;
   margin: 0px auto 20px;
width:500px
}
 #nav ul{
   padding : 5px;
   margin : 0;
   margin-left: 65px;
   float : left;
}
 
#nav ul li{
float:left
}
 
#nav ul li a{
   padding: 0.5em;
   padding-left: 1em;
   padding-right: 1em;
   color : White;
   font-weight : bold;
   font-size: 14px;
   text-decoration : none;
   float : left;
}
 
#nav ul li a:hover{
   background-color : #FFFFFF;
   color : #333333;
}
 
.clearFix {
clear:both;
overflow:hidden;
font-size:0px;
height:0px;
}
</style>
 </head>
<body>
 <div id="navHolder">
	<div id="nav">
		<ul>
			<li><a href="home.aspx">Home</a></li>
			<li><a href="weddings.aspx">Weddings</a></li>
			<li><a href="gallery.aspx">Gallery</a></li>
			<li><a href="contact.aspx">Contact</a></li>
		</ul>
		<div class="clearFix"></div>
	</div>
</div>
 </body>
 </html>

Open in new window

unordered lists are by default left justified, else how can you line up the list if the elements are centered and they are of different text length?  They simply do not line up.

If you want this menu centered, do two things -- (1) do not use the <UL> and <LI> for the menu, and --
(2) put the menu into a small table structure, and center the table elements.

Everyone is pushing these CSS only menus using <UL> and <LI> and they have some inherently flawed assumptions, one of which is -- you will always start from the left.  I avoid <UL><LI> CSS menus as they are fraught with problems.
Mark StegglesWeb Developer
CERTIFIED EXPERT
Top Expert 2006

Commented:
Hello scrathcyboy,

"unordered lists are by default left justified, else how can you line up the list if the elements are centered and they are of different text length?  They simply do not line up."

We are not talking about centering the text of the menu, we are talking about centering a whole menu block in the centre of the page.

"If you want this menu centered, do two things -- (1) do not use the <UL> and <LI> for the menu, and --
(2) put the menu into a small table structure, and center the table elements."

O no, I suppose we should use a table to layout the page aswell?

"Everyone is pushing these CSS only menus using <UL> and <LI> and they have some inherently flawed assumptions, one of which is -- you will always start from the left.  I avoid <UL><LI> CSS menus as they are fraught with problems."

Everyone uses lists because a menu is a list. There are no problems with using lists for menus.
I disagree with everything you said.  Using a table in one area doesn't mean it applies to all, and everyone does NOT use lists for menus, especially the UL and LI tags.  If it was so easy to fix in the DIV, the question would have closed before I even commented, no?  Don't be as inflexible and as fixed as UL-LI tags.

"There are no problems with using lists for menus."  There are many of them, mostly a single minded design.
As the questioner said --  "Nope, it doesn't work. Are you actually trying this yourself?"  
Mark StegglesWeb Developer
CERTIFIED EXPERT
Top Expert 2006

Commented:
"Using a table in one area doesn't mean it applies to all, and everyone does NOT use lists for menus, especially the UL and LI tags."

Scratchyboy, you were the one who first used the word everyone, that is why I used it.

"If it was so easy to fix in the DIV, the question would have closed before I even commented, no?"

no, it may not be easy for a beginner to implement. Are you telling me that you have never had to help someone on EE to implement a solution?

Author

Commented:
The following code works as I wanted, however I notice that in IE7 there's a slightly larger gap on the right side of each word, that you can see when you hover over it. I want to get rid of this! Also, in Firefox the border has no padding, it fits perfectly around the text.
<div id="navcontainer">
   <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="test.aspx">Weddings</a></li>
      <li><a href="gallery.aspx">Gallery</a></li>
      <li><a href="contact.aspx">Contact</a></li>
   </ul>
</div>
 
#navcontainer ul
{
    margin: 0;
    list-style-type: none;
    text-align: center;
    background-image: url(navbar.gif);
    background-repeat: repeat-x;
    height: 50px;
    line-height: 50px;
}
 
#navcontainer ul li
{
    display: inline;
    border: solid 1px #333333;
    margin: 5px;
}
 
#navcontainer ul li a
{
    padding: 0.5em;
    padding-left: 1em;
    padding-right: 1em;
    color: White;
    font-weight: bold;
    font-size: 14px;
    text-decoration: none;
}
 
#navcontainer ul li a:hover
{
    background-color: #FFFFFF;
    color: #333333;
}

Open in new window

Mark StegglesWeb Developer
CERTIFIED EXPERT
Top Expert 2006

Commented:
Hello ma701sss,

First of all, I apologize if I seemed irritable and unhelpful yesterday, it was late and I was tired.

The IE& issue is caused by whitespace between the list items... change the html to this and it will fix

<ul><li><a href="index.html">Home</a></li><li><a href="test.aspx">Weddings</a></li><li><a href="gallery.aspx">Gallery</a></li><li><a href="contact.aspx">Contact</a></li></ul>

---

The firefox padding issue is to do with inline elements, you cannot have vertical padding on inline elements. IE7 is incorrectly letting you use vertical padding on those anchors. This is why I said that floats are the best way to achieve a horizontal menu. I have again attached a floated menu... please tell me what is wrong with it if u have any qualms with it

navHolder is there simply for your background that you mentioned if still needed

Thanks
Steggs





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css"> 
 
#navcontainer {
margin:0px auto;
width:350px;
}
#navcontainer ul
{
    margin: 0px;
    padding:0px;
    list-style-type: none;
    text-align: center;
    background-image: url(navbar.gif);
    background-repeat: repeat-x;
    float:left;
}
 
#navcontainer ul li
{
    float:left;
    border: solid 1px #333333;
    margin: 5px;
}
 
#navcontainer ul li a
{
    padding: 0.5em 1em;
    color: White;
    font-weight: bold;
    float:left;
    font-size: 14px;
    text-decoration: none;
}
#navcontainer ul li a:hover
{
    color: #333333;
}
.clearFix {
clear:both;
font-size:0px;
height:0px;
overflow:hidden;
}
</style>
</head>
<body>
<div id="navHolder">
	<div id="navcontainer">  
		<ul><li><a href="index.html">Home</a></li><li><a href="test.aspx">Weddings</a></li><li><a href="gallery.aspx">Gallery</a></li><li><a href="contact.aspx">Contact</a></li></ul>
		<div class="clearFix"></div>
	</div>
</div>
</body>
</html>

Open in new window

Author

Commented:
I haven't tried your floating menu as listed above yet, however what you suggested before didn't centre it.

In my example, I'd also like the white background to fill the whole of the bordered area around the text, but it only seems to half fill it. Any idea why? If you can solve that I'll award you the points for all your help!
Web Developer
CERTIFIED EXPERT
Top Expert 2006
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
OK, I tried yours and it seems to work now. Thanks!
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.