ma701sss
asked on
Centre list in middle of page
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;
}
ASKER
Thanks, but it still doesn't work unfortunately. It stays firmly on the left.
o u need to add a width to this aswell:
#nav{
white-space : nowrap;
background-image:url(navba
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{
white-space : nowrap;
background-image:url(navba
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
}
ASKER
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.
The easy way would be to just add another div around #nav and have the background on that.
ASKER
OK, how would I do that to make it work? I'm tired :)
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><a href="weddings.aspx">Weddi
<li><a href="gallery.aspx">Galler
<li><a href="contact.aspx">Contac
</ul>
<div style="clear:both;font-siz
</div>
</div>
css
#navHolder {
background-image:url(navba
background-repeat:repeat-x
border-style : solid;
border-color : #CCCCCC;
border-bottom-color : #333333;
border-width : 1px 0 1px 0;
}
<div id="navHolder">
<div id="nav">
<ul>
<li><a href="home.aspx">Home</a><
<li><a href="weddings.aspx">Weddi
<li><a href="gallery.aspx">Galler
<li><a href="contact.aspx">Contac
</ul>
<div style="clear:both;font-siz
</div>
</div>
css
#navHolder {
background-image:url(navba
background-repeat:repeat-x
border-style : solid;
border-color : #CCCCCC;
border-bottom-color : #333333;
border-width : 1px 0 1px 0;
}
ASKER
Nope, it doesn't work. Are you actually trying this yourself?
Can you post me the code that you have now: html and css
ASKER
exactly what you have above for nav, navholder and the HTML
change this to float:left
#nav ul li{
float:left
}
#nav ul li{
float:left
}
ASKER
Why do I want anything to float left?
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
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>
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.
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.
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.
"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?"
"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?"
"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?
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?
ASKER
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;
}
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>
---
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
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>
---
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>
ASKER
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!
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!
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
OK, I tried yours and it seems to work now. Thanks!
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(navba
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><a href="weddings.aspx">Weddi
<li><a href="gallery.aspx">Galler
<li><a href="contact.aspx">Contac
</ul>
<div style="clear:both;font-siz
</div>
Cheers
Steggs