PDA

View Full Version : CSS layout body question

kimberlyvo2000
11-13-2006, 04:51 AM
How can I make the body smaller in widths?

This is my code so far(I'm using Lissa's 3 header one with top, left, and right):




<html>
<head>
<title>nothing yet</title>
<style type="text/css">

body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}

#header {
margin: 0px;
padding: 0px;
height: 183px;
}
#left {
position: absolute;
left: 228px;
top: 180px;
width: 200px;
}
#center {
top: 0;
margin-left: 230px;
margin-right: 230px;
}
#right {
position: absolute;
right: 15px;
top: 160px;
width: 200px;
}
</style>
</head>

<body>

<div id="header">

<p align=center><img src="http://img101.imageshack.us/img101/4921/bannercopylo7.png"></p>

</div>

<div id="left">

Your left menu will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #left selector in the style sheet that is located on this page between the head tags.

</div>


<div id="center">
All of your content goes in this div. This section is fluid so that if the window is collapsed, your div will collapse also and fit the screen perfectly. To change the properties of this div you can change the #center selector in the style sheet that is located on this page between the head tags.
</div>

<div id="right">

Your right menu will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #right selector in the style sheet that is located on this page between the head tags.

</div>

</body>
</html>
pb&j
11-13-2006, 02:31 PM
i dont understand. the body is the entire background of the window you are viewing. if that is truely the part you want to affect, you can probably put a WIDTH value in the BODY css portion.

perhaps explain more on the effect you are trying to achieve?
kimberlyvo2000
11-14-2006, 02:38 AM
I want to change the width of the body. I want it so everything goes under my centered header and nothing overlaps like it is now.

Here is a better code


<html>
<head>
<title>KVI Stuff</title>
<style type="text/css">

body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}

#header {
margin: 0px;
padding: 0px;
height: 183px;
}
#left {
position: absolute;
left: 228px;
top: 180px;
width: 200px;
}
#center {
top: 0;
margin-left: 230px;
margin-right: 230px;
}
#right {
position: absolute;
right: 228px;
top: 180px;
width: 200px;
}
</style>
</head>

<body>

<div id="header">

<p align=center><img src="http://img101.imageshack.us/img101/4921/bannercopylo7.png"></p>

</div>

<div id="left">

Your left menu will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #left selector in the style sheet that is located on this page between the head tags.

</div>


<div id="center">
All of your content goes in this div. This section is fluid so that if the window is collapsed, your div will collapse also and fit the screen perfectly. To change the properties of this div you can change the #center selector in the style sheet that is located on this page between the head tags.
</div>

<div id="right">

Your right menu will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #right selector in the style sheet that is located on this page between the head tags.

</div>

</body>
</html>
pb&j
11-14-2006, 11:40 AM
you can try adding a WIDTH value to the BODY css or you can probably play with the values of LEFT and RIGHT in the #left and #right css parts so they are more towards the center of the screen.
kimberlyvo2000
11-16-2006, 04:45 AM
nope, it won't work