I have 3 problems with a centered layout.
All 3 are described in the page in more detail but I'm having 2 problems getting an unordered list into a horizontal menu that is centered. I'm also having a problem with a centered layout dissapearing to the left of the screen (in NS) when the window is narrower than the container div.
Any help would be greatly appreciated.
Here's the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Centered, three column layout</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="screen">
body {
font-size:90%;
font-family:arial, helvetica, sans-serif;}
#header {
width:770px;
padding:0px;
margin:0px auto;
text-align:center;
background-color:#CFF;}
#navigation {
margin:0px;
padding:0 0 0 150px;
text-align:center;
background-color:#9CF;}
#navigation ul {
text-align:center;
margin:0px auto;
padding:0px;
list-style-type:none;
background-color:#3FF;}
#navigation li {
float:left;
display:inline;
text-align:center;
margin:0px auto;
padding:0px;
display:block;
border-left:2px solid #CC9;
border-right:0px solid #CC9;
background-color:#FFC;}
#navigation a {
display:block;
text-align:center;
font-weight:bold;
text-decoration:none;
margin:0px;
padding:0px 15px;
font-family:arial, helvetica, sans-serif;
font-size:10pt;
color:#cc9;
background-color:#369;}
#navigation a:hover {
background-color:#69C;
color:#ee9;}
#last {border-right:2px solid #CC9;}
#main {
padding:0px;
width:770px;
margin:auto;}
#col1 {
clear:both;
float:left;
display:inline;
width:240px;
padding:5px;
margin-bottom:10px;
background-color:#CCC;}
#col2 {
float:left;
display:inline;
width:250px;
padding:5px;
margin-left:5px;
margin-bottom:10px;
background-color:#CCC;}
#col3 {
float:left;
display:inline;
width:240px;
padding:5px;
margin-left:5px;
margin-bottom:10px;
background-color:#CCC;}
#footer {
clear:both;
width:770px;
margin:10px auto 0px auto;
text-align:center;
background-color:#CCC;}
</style>
</head>
<body>
<div id="header">
<h1>Header</h1>
<div id="navigation">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link One</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link Two</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link Three</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link Four</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" id="last">Link Five</a></li>
</ul>
</div>
</div>
<div id="main">
<div id="col1">
<h2>Problem 1</h2>
<p>I can get a three column layout to center itself using left and right margins as auto. This works ok in IE but, in Netscape, when you make your browser window narrower than the width of your container div then the left part of it dissapears to the left of the browser window. You'd think that when the left side of the centered div reaches the left side the browser window, the div would stop and the scroll bar would appear. Well, it doesn't. Any ideas on how to keep this from happening so that people with screen sizes small than 800 x 600 will not have a problem viewing the page?</p>
</div>
<div id="col2">
<h2>Problem 2</h2>
<p>I can't seem to get an unordered list into a horizontal menu that is centered. I have to add padding to the left of the container div to make it appear that way. I would like it to actually center itself so I can use it on a fluid layout as well. Any ideas?</p>
</div>
<div id="col3">
<h2>Problem 3</h2>
<p>Ok, so this really isn't a problem as much as it is a question. In the menu, why do I have to put a non breaking space after the unordered list in order to make the container div expand to the width of its container? Also, without it, IE places an extra blank line below the navigation div. This seems more like a cheesy fix than a standard coding technique to me.</p>
</div>
</div>
<div id="footer">
<p>Footer</p>
</div>
</body>
</html>The answer to the Netscape question is easy. Have your entire layout contained in one master DIV. I usually assign this DIV an id of "wrapper." Then add this style declaration to your CSS file:
html>body #wrapper {
border: 1px solid transparent;
}
The transparent background color is valid CSS - 8.5.2 Border color (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/box.html#border-color-properties">http://www.w3.org/TR/CSS21/box.html#bor ... properties</a><!-- m -->) - but won't validate in the W3C CSS validator in this case. Using border-color: transparent will (go figure).Thanks for trying but that didn't do the trick.
The content still dissapears to the left when you narrow the screen.If I try to give the UL a specific width then it works fine (does not dissapear to the left), but it doesn't center either and when the screen is narrowed, the LI's start stacking on each other rather than dissapering to the right of the screen.
Any ideas here as well would be appreciated.
Has anyone else used horizontal CSS menu's?
How did you get around these problems?
All 3 are described in the page in more detail but I'm having 2 problems getting an unordered list into a horizontal menu that is centered. I'm also having a problem with a centered layout dissapearing to the left of the screen (in NS) when the window is narrower than the container div.
Any help would be greatly appreciated.
Here's the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Centered, three column layout</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="screen">
body {
font-size:90%;
font-family:arial, helvetica, sans-serif;}
#header {
width:770px;
padding:0px;
margin:0px auto;
text-align:center;
background-color:#CFF;}
#navigation {
margin:0px;
padding:0 0 0 150px;
text-align:center;
background-color:#9CF;}
#navigation ul {
text-align:center;
margin:0px auto;
padding:0px;
list-style-type:none;
background-color:#3FF;}
#navigation li {
float:left;
display:inline;
text-align:center;
margin:0px auto;
padding:0px;
display:block;
border-left:2px solid #CC9;
border-right:0px solid #CC9;
background-color:#FFC;}
#navigation a {
display:block;
text-align:center;
font-weight:bold;
text-decoration:none;
margin:0px;
padding:0px 15px;
font-family:arial, helvetica, sans-serif;
font-size:10pt;
color:#cc9;
background-color:#369;}
#navigation a:hover {
background-color:#69C;
color:#ee9;}
#last {border-right:2px solid #CC9;}
#main {
padding:0px;
width:770px;
margin:auto;}
#col1 {
clear:both;
float:left;
display:inline;
width:240px;
padding:5px;
margin-bottom:10px;
background-color:#CCC;}
#col2 {
float:left;
display:inline;
width:250px;
padding:5px;
margin-left:5px;
margin-bottom:10px;
background-color:#CCC;}
#col3 {
float:left;
display:inline;
width:240px;
padding:5px;
margin-left:5px;
margin-bottom:10px;
background-color:#CCC;}
#footer {
clear:both;
width:770px;
margin:10px auto 0px auto;
text-align:center;
background-color:#CCC;}
</style>
</head>
<body>
<div id="header">
<h1>Header</h1>
<div id="navigation">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link One</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link Two</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link Three</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link Four</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" id="last">Link Five</a></li>
</ul>
</div>
</div>
<div id="main">
<div id="col1">
<h2>Problem 1</h2>
<p>I can get a three column layout to center itself using left and right margins as auto. This works ok in IE but, in Netscape, when you make your browser window narrower than the width of your container div then the left part of it dissapears to the left of the browser window. You'd think that when the left side of the centered div reaches the left side the browser window, the div would stop and the scroll bar would appear. Well, it doesn't. Any ideas on how to keep this from happening so that people with screen sizes small than 800 x 600 will not have a problem viewing the page?</p>
</div>
<div id="col2">
<h2>Problem 2</h2>
<p>I can't seem to get an unordered list into a horizontal menu that is centered. I have to add padding to the left of the container div to make it appear that way. I would like it to actually center itself so I can use it on a fluid layout as well. Any ideas?</p>
</div>
<div id="col3">
<h2>Problem 3</h2>
<p>Ok, so this really isn't a problem as much as it is a question. In the menu, why do I have to put a non breaking space after the unordered list in order to make the container div expand to the width of its container? Also, without it, IE places an extra blank line below the navigation div. This seems more like a cheesy fix than a standard coding technique to me.</p>
</div>
</div>
<div id="footer">
<p>Footer</p>
</div>
</body>
</html>The answer to the Netscape question is easy. Have your entire layout contained in one master DIV. I usually assign this DIV an id of "wrapper." Then add this style declaration to your CSS file:
html>body #wrapper {
border: 1px solid transparent;
}
The transparent background color is valid CSS - 8.5.2 Border color (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/box.html#border-color-properties">http://www.w3.org/TR/CSS21/box.html#bor ... properties</a><!-- m -->) - but won't validate in the W3C CSS validator in this case. Using border-color: transparent will (go figure).Thanks for trying but that didn't do the trick.
The content still dissapears to the left when you narrow the screen.If I try to give the UL a specific width then it works fine (does not dissapear to the left), but it doesn't center either and when the screen is narrowed, the LI's start stacking on each other rather than dissapering to the right of the screen.
Any ideas here as well would be appreciated.
Has anyone else used horizontal CSS menu's?
How did you get around these problems?