...

View Full Version : Main div isn't being centered.



BarrMan
10-11-2007, 04:42 PM
Hi.
I have this small piece of code containing a main div which I want it to be centered but for some reason it doesn't.
I also want the li's to be centered too.
Here's my code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>
Gallery Manager - By Imri Barr
</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1255;" />
<link type="text/css" rel="stylesheet" href="index.css" />
<script type="text/javascript" language="JavaScript" src="error.js"></script>
</head>
<body>

<a href="#top" onClick="error(this,'error_Database_Edit','installation.asp?edit=true'); return false;">[Edit database]</a>

<div id="MainContent">
<ul id="header">

<li onClick="sortBy('id');">
id
</li>

<li onClick="sortBy('username');">
username
</li>

<li onClick="sortBy('password');">
password
</li>

<li onClick="sortBy('email');">
email
</li>

</ul>
</div>

<div id="error_Database_Edit" class="error_div">

<p>Editing the database will cause a loss of all information added to the rows before.</p>
<p>To save the database before deleting, click <a href="export.asp" onClick="return false;">Here</a></p>
<p><u>Notice:</u> The export feature is still in construction. We're sorry for the inconvenience.</p>
<p><u>Futured feature:</u> The database will just edit the columns without any data loss.</p>
</div>
</body>
</html>

index.css

body,div,span,fieldset,legend,input{
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
body{
width: 70%;
min-width: 700px;
}
CSS {
padding:0px;
margin:0px;
}
* {
padding: 0px;
margin: 0px;
}
p
{
padding: 0px;
margin: 0px;
}
#MainContent{
margin: 0px auto;
border: 1px solid black;
width: auto;
}
ul#header{
cursor: pointer;
background-color: yellow;
}
ul#header li
{
width: auto;
}
li{
display: inline;
}

_peter_
10-11-2007, 04:46 PM
specify width in pixels, auto currently means 100%

_Aerospace_Eng_
10-11-2007, 04:49 PM
Some of your CSS is a bit excessive. I've cleaned it up.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Gallery Manager - By Imri Barr</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1255;">
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body, div, span, fieldset, legend, input {
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.error_div {
display: none;
position: absolute;
left:0px;
top:0px;
width: 400px;
height: auto;
text-align: left;
background-color: #FFF7C0;
padding-left: 3px;
padding-top: 3px;
border-top: 2px solid #ffd324;
border-bottom: 2px solid #ffd324;
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.error_div a {
text-decoration: underline;
color: red;
}
.error_div a:hover {
text-decoration: none;
}
#MainContent {
margin: 0 auto;
border: 1px solid black;
width:70%;
min-width:700px;
}
ul#header {
cursor: pointer;
background-color: yellow;
text-align:center;
}
ul#header li {
display: inline;
padding:0 20px;
}
</style>
<!--[if gte IE 5]>
<style type="text/css">
body {width:expression( documentElement.clientWidth < 700 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 700 ? "700px" : "auto") : "700px") : "auto" );}
</style>
<![endif]-->
<script type="text/javascript" language="JavaScript" src="error.js"></script>
</head>
<body>
<a href="#top" onClick="error(this,'error_Database_Edit','installation.asp?edit=true'); return false;">[Edit database]</a>
<div id="MainContent">
<ul id="header">
<li onClick="sortBy('id');"> id </li>
<li onClick="sortBy('username');"> username </li>
<li onClick="sortBy('password');"> password </li>
<li onClick="sortBy('email');"> email </li>
</ul>
</div>
<div id="error_Database_Edit" class="error_div">
<p>Editing the database will cause a loss of all information added to the rows before.</p>
<p>To save the database before deleting, click <a href="export.asp" onClick="return false;">Here</a></p>
<p><u>Notice:</u> The export feature is still in construction. We're sorry for the inconvenience.</p>
<p><u>Futured feature:</u> The database will just edit the columns without any data loss.</p>
</div>
</body>
</html>
The reason it wasn't centering is because you set a width to the body and not the div. You would have needed to use margin:auto; on the body rather than your main div. I prefer setting the width directly to the div rather than the body.

IE6 doesn't understand min-width. There are ways to fake it but I prefer using a js solution which I've implemented.

BarrMan
10-11-2007, 07:45 PM
Thanks alot _Auro!

BarrMan
10-11-2007, 08:01 PM
I got one more problem:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>
Gallery Manager - By Imri Barr
</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1255;" />
<link type="text/css" rel="stylesheet" href="index.css" />
<script type="text/javascript" language="JavaScript" src="error.js"></script>
<style type="text/css">
#MainContent {
margin: 0 auto;
border: 1px solid black;
width:85%;
}
ul#header {
cursor: pointer;
background-color: yellow;
text-align:center;
}
ul#header li, .UL_MainContent li
{
border-left: 1px solid black;
width: 150px;
}
#ul_addrow li
{
padding: 0 0;
}
.UL_MainContent,#ul_addrow
{
text-align: center;
}
</style>
</head>
<body>

<div id="Links">
<a style="float: left;" href="#" onClick="error(this,'error_Database_Edit','installation.asp?edit=true'); return false;">[Edit database fields]</a>
<a style="float: right;" href="#" onClick="addRow(); return false;">[Add new row]</a>
</div>
<br />
<br />
<div id="MainContent">
<ul id="header">

<li onClick="sortBy('username');">
username
</li>

<li onClick="sortBy('password');">
password
</li>

<li onClick="sortBy('email');">
email
</li>

</ul>

<ul id="ul_addrow">

<li>
<input type="text" name="username" />
</li>

<li>
<input type="text" name="password" />
</li>

<li>

<input type="text" name="email" />
</li>

</ul>
</div>

<div id="error_Database_Edit" class="error_div">
<p>Editing the database will cause a loss of all information added to the rows before.</p>
<p>To save the database before deleting, click <a href="export.asp" onClick="return false;">Here</a></p>
<p><u>Notice:</u> The export feature is still in construction. We're sorry for the inconvenience.</p>

<p><u>Futured feature:</u> The database will just edit the columns without any data loss.</p>
</div>
</body>
</html>

I can't change the width of the fields[username,password,email].
I've set it to 150px and it still doesn't do anything.

Nevermind... I just use table.. It should be in tables anyways.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum