Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Senior Coder BarrMan's Avatar
    Join Date
    Feb 2005
    Location
    Israel.
    Posts
    1,644
    Thanks
    69
    Thanked 83 Times in 82 Posts

    Main div isn't being centered.

    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:
    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
    Code:
    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;
    }

  • #2
    New Coder
    Join Date
    Oct 2007
    Posts
    22
    Thanks
    0
    Thanked 4 Times in 4 Posts
    specify width in pixels, auto currently means 100%

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Some of your CSS is a bit excessive. I've cleaned it up.
    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;">
    <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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    BarrMan (10-11-2007)

  • #4
    Senior Coder BarrMan's Avatar
    Join Date
    Feb 2005
    Location
    Israel.
    Posts
    1,644
    Thanks
    69
    Thanked 83 Times in 82 Posts
    Thanks alot _Auro!

  • #5
    Senior Coder BarrMan's Avatar
    Join Date
    Feb 2005
    Location
    Israel.
    Posts
    1,644
    Thanks
    69
    Thanked 83 Times in 82 Posts
    I got one more problem:
    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>
    <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.
    Last edited by BarrMan; 10-11-2007 at 09:24 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •