Aligning div Layout

Hantu

02-04-2007, 10:37 AM

Hello there...new here so just let me know if I do something worng...I'll correct it.

I got this layout I'm trying to set-up:

<title>.::Home::.</title>
<style>
#fundal{
height: 780px;
width: 780px;
background-image: url(slices/800x600site.gif);
}
#header{
background-image: url(slices/images/header.gif);
height: 188px;
width: 698px;
}
#meniu{
background-image: url(slices/images/layout_phtshopsliced_06.gif);
width: 699px;
height: 53px;
}
#ctop {
background-image: url(slices/images/layout_sliced2_15.gif);
width: 501px;
height: 29px;
}

body {
margin-top: 0px;
margin-bottom: 0px;
background-color: #D2D2D2;
}
</style>
</head>

<body>
<div id="fundal">
<div id="header">
</div>
<div id="meniu">
</div>
<div id="ctop">
</div>
</div>
</body>

the problem is that if I use "<center>" before the "fundal" div...

<body>
<center><div id="fundal">
<div id="header">
</div>
<div id="meniu">
</div>
<div id="ctop">
</div>
</div></center>
</body>
it just centers everything... I'd like just the "fundal","header" and "meniu" divs centered. The "ctop" must be aligned left. Got any ideea on how to this.?

P.S. I like using divs for the layout. :thumbsup:

VIPStephan

02-04-2007, 01:20 PM

P.S. I like using divs for the layout. :thumbsup:

So why are you using a deprecated center tag then? If you already go the modern way then do it correctly:

#header, #meniu {margin: 0 auto;}

Excavator

02-04-2007, 06:01 PM

Hello Hanto,
In this example body has text-align: center;(for older browsers) and fundal has margin: 0 auto;. That centers your site.
header and meniu also have margin: 0 auto; that centers them within fundal.
Setting text-align: left; in fundal aligns ctop left. (I didn't check that in IE6)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>.::Home::.</title>
<style type="text/css">
html, body {
text-align: center;
background-color: #D2D2D2;
}
* {
margin: 0;
padding: 0;
}
#fundal, #header, #meniu {
margin: 0 auto;
}
#fundal{
height: 780px;
width: 780px;
text-align: left;
background-image: url(slices/800x600site.gif);
}
#header{
height: 188px;
width: 698px;
background-image: url(slices/images/header.gif);
}
#meniu{
width: 699px;
height: 53px;
background-image: url(slices/images/layout_phtshopsliced_06.gif);
}
#ctop {
width: 501px;
height: 29px;
background-image: url(slices/images/layout_sliced2_15.gif);
}
</style>
</head>

<body>
<div id="fundal">
<div id="header">
<h1>header</h1>
</div>
<div id="meniu">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
<div id="ctop">
<p>some stuff</p>
</div>
</div>
</body>
</html>