sayian_z
04-27-2009, 11:12 PM
I just made this and I don't know how to use wrapper div to center my page
this is the style.css( ignore the images):
@charset "utf-8";
.banner {
font-family: "Times New Roman", Times, serif;
background-image: url(images/today%27s-beauty_02.gif);
width: 640px;
position: relative;
height: 106px;
}
.upperbar {
position: relative;
width: 640px;
height: 30px;
background-image: url(images/today%27s-beauty_09.gif);
}
.leftbar {
position: relative;
width: 136px;
height: 500px;
background-image: url(images/today%27s-beauty_30.gif);
}
.content {
position: relative;
height: 500px;
width: 504px;
top: -500px;
left: 136px;
background-color: #F284EB;
}
and this is index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test divs</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body tracingsrc="photoshop file/today's beauty.gif" tracingopacity="54">
<div class="banner">
<div align="left">Content for class "banner" Goes Here</div>
</div>
<div class="upperbar">Content for class ".upperbar" Goes Here</div>
<div class="leftbar">Content for class "leftbar" Goes Her</div>
<div class="content">content for class "content" Goes Here</div>
</body>
</html>
this is the style.css( ignore the images):
@charset "utf-8";
.banner {
font-family: "Times New Roman", Times, serif;
background-image: url(images/today%27s-beauty_02.gif);
width: 640px;
position: relative;
height: 106px;
}
.upperbar {
position: relative;
width: 640px;
height: 30px;
background-image: url(images/today%27s-beauty_09.gif);
}
.leftbar {
position: relative;
width: 136px;
height: 500px;
background-image: url(images/today%27s-beauty_30.gif);
}
.content {
position: relative;
height: 500px;
width: 504px;
top: -500px;
left: 136px;
background-color: #F284EB;
}
and this is index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test divs</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body tracingsrc="photoshop file/today's beauty.gif" tracingopacity="54">
<div class="banner">
<div align="left">Content for class "banner" Goes Here</div>
</div>
<div class="upperbar">Content for class ".upperbar" Goes Here</div>
<div class="leftbar">Content for class "leftbar" Goes Her</div>
<div class="content">content for class "content" Goes Here</div>
</body>
</html>