PDA

View Full Version : CSS and Divs

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 &quot;content&quot; Goes Here</div>
</body>
</html>
DWcourse
04-27-2009, 11:45 PM
wrap a wrapper div (looks like width 640px) around the page and set the left and right margin properties to auto. For IE6, I believe you also have to set the body text-align to center.
sayian_z
04-28-2009, 12:22 AM
wrap a wrapper div (looks like width 640px) around the page and set the left and right margin properties to auto. For IE6, I believe you also have to set the body text-align to center.
thanks to you and FireFox :mrgreen: I wasted my time cuz I was testing on the stupid IE7 which is not showing the right layout :lol:
DWcourse
04-28-2009, 01:55 AM
sayian_z, don't you just love Microsoft? :???:
sayian_z
04-28-2009, 02:33 AM
sayian_z, don't you just love Microsoft? :???:
lol, sure since I have no choice
now I'm begining to hate Divs too :x
I just started putting text in one of the div tags and it shifted down (not showing in dreamweaver ) in firefox but the position pixles are still the same
of course it's a total mess in IE7
funny thing I have no choice but to put up with it :(
BTW, I don't see any difference between AP Div and Div tags :confused:
they are all written <div>
edbr
04-28-2009, 04:37 AM
some call then divs for relative and layers for absolute but basically they are all divs just with different attributes re positioning
Corrosive
04-28-2009, 06:27 AM
of course it's a total mess in IE7


It doesn't have to be. Browser inconsistencies are not that great and they are predictable. It's just practice :wink: