This menu that i have which i have discussed before and everyone keeps telling me just to use text-align:center on the parent element but it doesnt work ive tryed absolutly everything margin:auto the lot. I hope someone can help me work it out.
The link menu (<!-- m --><a class="postlink" href="http://www.thedevilseyes.co.uk">http://www.thedevilseyes.co.uk</a><!-- m -->)
Any help is appreciated.I actually have no clue what isn't being centered. And just a side note that may or may not solve the problem, but you've essentially started the HTML document twice.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Glam Entertainment</title>
<style type="text/css" media="screen">@import "style.css";</style>
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"style.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="cache-control" content="no-cache, must-revalidate"/>
</head>
<body>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css" media="screen">@import "style.css";</style>
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"style.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="cache-control" content="no-cache, must-revalidate"/>
<title>Glam Entertainment Ltd - Home</title>
</head>
<body>
Could you post a screen shot of what it looks like on your computer? And make sure we know what browser and version you are using.Hey thanks for the reply i never saw that i started the document twice thanks ive fixed that now. Sorry for being so vague about what was meant to be centered was the main menu which is located under the flash banner. I have taken the menu off just now but i will upload a screen shot of what it looks like. The reason is that it looks really good in IE version 6 but in mozilla firefox it just destroys everything.
Ill upload one later and the code as im no longer on the pc will the stylesheet.
Thanks againI have got the stylesheet code and the xhtml code below for the menu whatever i try it still does not center.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="cache-control" content="no-cache, must-revalidate"/>
<title>Glam Entertainment Ltd - Home</title>
<style>
#nav{ /* top level */
padding: 0;
list-style: none;
}
#nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
}
#nav li { /* all list items */
float: left;
border:1px solid #979797;
background-color:#FFF;
text-align:center;
color:#979797;
margin-right:-1px;
font:bold 0.8em verdana,sans-serif;
position: relative;
width: 10em;
border-collapse:collapse;
}
#nav li li {
border-top:none;
padding-bottom:1px;
}
#nav li ul { /* second-level lists */
display: none;
position: absolute;
top: 1em;
left: 0;
font:bold 1.25em verdana,sans-serif;
margin-left:-1px;
}
#nav li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
}
#nav li:hover ul, #nav li.over ul { /* lists nested under hovered list items */
display: block;
background-color:#ff;
color:red;
}
li, a {
text-decoration:none;
color:#979797;
}
li:hover, a:hover {background:#c5163f; color:#fff;width:10em}
</style>
</head>
<body>
<script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes;
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
</script>
<ul id="nav">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.php" title="Home">Home</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"news.php" title="News">News</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"phones.php" title="Phones">Phones</a>
<ul>
<li style="border-top:1px solid #979797"><a href=http://www.webdeveloper.com/forum/archive/index.php/"nokia.php" title="Nokia">Nokia</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"siemens.php" title="Siemens">Siemens</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"sony.php" title="Sony">Sony</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"motorola.php" title="Motorola">Motorola</a></li>
<li style="border-bottom:1px solid #979797;"><a href=http://www.webdeveloper.com/forum/archive/index.php/"samsung.php" title="Samsung">Samsung</a></li>
</ul>
</li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"topup.php" title="Top-Ups">Top-Ups</a>
<ul>
<li style="border-top:1px solid #979797"><a href=http://www.webdeveloper.com/forum/archive/index.php/"orange.php" title="Orange">Orange</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"o2.php" title="O2">O2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"virgin.php" title="Virgin">Virgin</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"tmobile.php" title="T-mobile">T-Mobile</a></li>
<li style="border-bottom:1px solid #979797;"><a href=http://www.webdeveloper.com/forum/archive/index.php/"vodafone.php" title="Vodafone">Vodafone</a></li>
</ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"form.php" title="Feedback Form">Feedback Form</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"contact.php" title="Contact Us">Contact</a></li>
</ul>
</body>
</html>
Cheers againA couple of problems here:
add margin: 0; to #nav
wrap #nav
<div id="centered"><div id="container">
<ul id="nav">
.
.
</ul>
</div></div>
add rules:
#centered {text-align:center;}
#container {margin:0 auto; width:49.2em !important; width:48.5em;text-align:left;}
Your ul should now be centered (Moz. IE Opera tested)
To have margin:0 auto; work you must specify a width. Moz and Opera are almost the same (49.2em) and using the !important IE will take the second width of 48.5em.Thanks fang for taking the time to help me do this, this has been getting me crazy for ages cheers. I havent tryed it yet on a different comp.
But thanks again mate.Brute force....
<div id="centered"><div id="container">
<div style="margin-top:150px;text-align:center;" id="fader"></div>
</div></div>
and css:
#centered {text-align:center;}
#container {margin:0 auto; width:55%;text-align:left;}
The spaces at the beginning of some of the texts may need to be removed.
BTW add this line:
// actually write message to document
if (document.getElementById) document.getElementById('fader').innerHTML = text_out; // DOM
to get it to work in Mozilla, but it looks crap.Hey fang i thought we got the menu working what was all of the above the only thing i noticed that wasnt working was the background image on my nav div isnt showning up anymore.
Thanks againSorry, wrong forum
It's late, too many threads on centering.
I'm going to bed...Thats ok mate no probs
The link menu (<!-- m --><a class="postlink" href="http://www.thedevilseyes.co.uk">http://www.thedevilseyes.co.uk</a><!-- m -->)
Any help is appreciated.I actually have no clue what isn't being centered. And just a side note that may or may not solve the problem, but you've essentially started the HTML document twice.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Glam Entertainment</title>
<style type="text/css" media="screen">@import "style.css";</style>
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"style.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="cache-control" content="no-cache, must-revalidate"/>
</head>
<body>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css" media="screen">@import "style.css";</style>
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"style.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="cache-control" content="no-cache, must-revalidate"/>
<title>Glam Entertainment Ltd - Home</title>
</head>
<body>
Could you post a screen shot of what it looks like on your computer? And make sure we know what browser and version you are using.Hey thanks for the reply i never saw that i started the document twice thanks ive fixed that now. Sorry for being so vague about what was meant to be centered was the main menu which is located under the flash banner. I have taken the menu off just now but i will upload a screen shot of what it looks like. The reason is that it looks really good in IE version 6 but in mozilla firefox it just destroys everything.
Ill upload one later and the code as im no longer on the pc will the stylesheet.
Thanks againI have got the stylesheet code and the xhtml code below for the menu whatever i try it still does not center.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="cache-control" content="no-cache, must-revalidate"/>
<title>Glam Entertainment Ltd - Home</title>
<style>
#nav{ /* top level */
padding: 0;
list-style: none;
}
#nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
}
#nav li { /* all list items */
float: left;
border:1px solid #979797;
background-color:#FFF;
text-align:center;
color:#979797;
margin-right:-1px;
font:bold 0.8em verdana,sans-serif;
position: relative;
width: 10em;
border-collapse:collapse;
}
#nav li li {
border-top:none;
padding-bottom:1px;
}
#nav li ul { /* second-level lists */
display: none;
position: absolute;
top: 1em;
left: 0;
font:bold 1.25em verdana,sans-serif;
margin-left:-1px;
}
#nav li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
}
#nav li:hover ul, #nav li.over ul { /* lists nested under hovered list items */
display: block;
background-color:#ff;
color:red;
}
li, a {
text-decoration:none;
color:#979797;
}
li:hover, a:hover {background:#c5163f; color:#fff;width:10em}
</style>
</head>
<body>
<script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes;
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
</script>
<ul id="nav">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.php" title="Home">Home</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"news.php" title="News">News</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"phones.php" title="Phones">Phones</a>
<ul>
<li style="border-top:1px solid #979797"><a href=http://www.webdeveloper.com/forum/archive/index.php/"nokia.php" title="Nokia">Nokia</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"siemens.php" title="Siemens">Siemens</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"sony.php" title="Sony">Sony</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"motorola.php" title="Motorola">Motorola</a></li>
<li style="border-bottom:1px solid #979797;"><a href=http://www.webdeveloper.com/forum/archive/index.php/"samsung.php" title="Samsung">Samsung</a></li>
</ul>
</li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"topup.php" title="Top-Ups">Top-Ups</a>
<ul>
<li style="border-top:1px solid #979797"><a href=http://www.webdeveloper.com/forum/archive/index.php/"orange.php" title="Orange">Orange</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"o2.php" title="O2">O2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"virgin.php" title="Virgin">Virgin</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"tmobile.php" title="T-mobile">T-Mobile</a></li>
<li style="border-bottom:1px solid #979797;"><a href=http://www.webdeveloper.com/forum/archive/index.php/"vodafone.php" title="Vodafone">Vodafone</a></li>
</ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"form.php" title="Feedback Form">Feedback Form</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"contact.php" title="Contact Us">Contact</a></li>
</ul>
</body>
</html>
Cheers againA couple of problems here:
add margin: 0; to #nav
wrap #nav
<div id="centered"><div id="container">
<ul id="nav">
.
.
</ul>
</div></div>
add rules:
#centered {text-align:center;}
#container {margin:0 auto; width:49.2em !important; width:48.5em;text-align:left;}
Your ul should now be centered (Moz. IE Opera tested)
To have margin:0 auto; work you must specify a width. Moz and Opera are almost the same (49.2em) and using the !important IE will take the second width of 48.5em.Thanks fang for taking the time to help me do this, this has been getting me crazy for ages cheers. I havent tryed it yet on a different comp.
But thanks again mate.Brute force....
<div id="centered"><div id="container">
<div style="margin-top:150px;text-align:center;" id="fader"></div>
</div></div>
and css:
#centered {text-align:center;}
#container {margin:0 auto; width:55%;text-align:left;}
The spaces at the beginning of some of the texts may need to be removed.
BTW add this line:
// actually write message to document
if (document.getElementById) document.getElementById('fader').innerHTML = text_out; // DOM
to get it to work in Mozilla, but it looks crap.Hey fang i thought we got the menu working what was all of the above the only thing i noticed that wasnt working was the background image on my nav div isnt showning up anymore.
Thanks againSorry, wrong forum
It's late, too many threads on centering.
I'm going to bed...Thats ok mate no probs