PDA

Click to See Complete Forum and Search --> : Background Color Size and Positioning

cujo_77
08-31-2009, 03:48 PM
First of all, I am just starting to learn about CSS, so my question may sound very basic. I have my text in the center and I am want to have the background of that section colored white. Now when I add the background-color code that I have below it only colors a small section in the middle of the page but it does not cover all the way down the page. I have started to look at background values like position, repeat etc. but I can;t find an example on how to stretch the color vertically down the entire length of the page.

I have included a link to a page that I have been using as reference for learning CSS. If anyone has a better page, mainly for a beginner, please post it. The problem I have found about learning CSS is the old "Where do I begin."

http://www.codertools.com/css_help_guide/css_background-color.aspx

#box {
position:absolute;
top:20%;
right:20%;
bottom:20%;
left:20%;
padding:25px;
margin:25px;
text-align: center;
background-color:#b0c4de

}
webdeveloper074
09-01-2009, 04:45 AM
If you could paste some code...
cujo_77
09-01-2009, 09:57 AM
Below is almost the entire code from one of my pages. I do not have that much code in between the <p> tags because I had to take out some of the stuff that related to one of my clients business. In reality I will have much more information in that area.

<html>

<head>
<title>This is Where the Title Goes</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<meta name="generator" content="CoffeeCup HTML Editor 2008 - www.coffeecup.com">
<meta name="description" content="">
<meta name="keywords" content="">

<!-- This is the code for the CSS -->
<style type="text/css">

#box {
position:absolute;
top:20%;
right:20%;
bottom:20%;
left:20%;
padding:25px;
margin:25px;
text-align: center;
background-color:#b0c4de

}

</style>



</head>
<body bgcolor="#FFFFFF" text="#000000" link="#000000" vlink="#000000" alink="#000000" background="sand.jpg">


<div id="box">

<!-- Below is the code for the menu -->
<script language="javascript" src="scripts/menu.js"></script>

<!-- Below is the code for the text -->

<font size="5"><b>LEASES</b></font>

<p>
<font size="4">
There is the main area where my text will go and this is the area that I want to have white in the background.

</font>

</div>

</body>
</html>
webdeveloper074
09-04-2009, 01:59 AM
#box {
position:absolute;
top:20%;
right:20%;
bottom:20%;
left:20%;
padding:25px;
margin:25px;
text-align: center;
background-color:#FFFFFF

}

try this