Click to See Complete Forum and Search --> : [RESOLVED] Centering Div


drumbum360
12-03-2008, 04:38 PM
I have been working on this for hours and cannot figure out why it won't work.
At www.detallic.com I want everything centered with the top image and centered on the background between the shadows. The css is at www.detallic.com/cloudstyle.css and validates fine. I'm not sure why I can't get these couple divs to center properly. Do you have any suggestions or solutions?

Thanks,
Cooper

aj_nsc
12-03-2008, 04:58 PM
Haha, it took me quite a while to figure this out too.....how did you decide that the image was centered? It's not, the other elements are, but the main part of the image that you are trying to line everything up with, isn't actually in the center.

Hope this provides some insight on your problem.

coothead
12-03-2008, 06:28 PM
Hi there drumbum360,

try it like this...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!-- this is for coothead testing and may be removed-->
<base href="http://www.detallic.com/">

<title>Home - DetalliC Web Design</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">

<style type="text/css">
* {
margin:0;
padding:0;
}
html,body {
height:100%;
font-family:arial,helvetica,sans-serif;
color:#fff;
}
#container {
width:1044px;
min-height:100%;
margin:auto;
background-image:url(images/bgshadow.jpg);
}
#top {
height:432px;
background-image:url(images/newhead.jpg);
}
#nav {
width:694px;
height:108px;
margin-left:165px;
background-image:url(images/navbar.jpg);
list-style-type:none;
}
#nav li {
width:;
float:left;
}
#nav li a {
line-height:108px;
padding:2px;
margin:0 40px;
font-size:24px;
color:#fff;
}
#nav li a:hover {
background-color:#30f430;
color:#000;
}
#content {
width:694px;
margin-left:165px;
}
#content h1 {
margin:17px 10px;;
border-bottom:1px dotted #fff;
font-size:1.6em;
letter-spacing: -0.03em;
}
#content p {
margin:14px 10px;
}
#foot {
width:674px;
padding-top:14px;
margin-left:175px;
border-top:1px dotted #fff;
color:#ccc;
}
</style>

<!--[if IE 6]>
<style type="text/css">
#container {
height:100%;
}
</style>
<![endif]-->

</head>
<body>

<div id="container">

<div id="top"></div>

<ul id="nav">
<li><a href="index.php">Home</a></li>
<li><a href="portfolio.php">Portfolio</a></li>
<li><a href="services.php">Services</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>

<div id="content">

<h1>Detallic</h1>

<p>
A good looking website is a vital aspect for every business or personal site.
I am dedicated to providing you with a quality website that you can be proud
of both visually and functionally.
</p><p>
I can build websites with HTML, CSS, javascript, and PHP with database integration (
to an extent). I work hard to provide you with a quality final product for a
relatively cheap price. Take a look around my site and see what I can do for you!
</p>

</div><!-- end #content -->

<div id="foot">© DetalliC Web Design 2008</div>

</div><!-- end #container -->

</body>
</html>

coothead

drumbum360
12-03-2008, 09:36 PM
Fantastic! Thank you for the help.

coothead
12-04-2008, 02:34 AM
No problem, you're very welcome. ;)