...

View Full Version : Site not extending correctly



pookie
09-14-2007, 03:10 PM
Okay, I am new to CSS but very familier with HTML. I have decided to move away from HTML because of its limited use. I have two questions:

1) How do i make my site extend properly?
2) I want to and a text area on the right of the tan box on the left. How can i do this?

Here is my HTML code:

<!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>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
background-color: #809198;
}
.style1 {
font-size: 12px
}

-->
</style></head>
<body>
<div id="container">
<div id="header">
<div id="banner"><img src="images/headerleft.jpg" width="442" height="118" /></div>
<div id="nav"></div>
</div>
<div id="body">
<div class="style1" id="whiteblank"></div>
<div id="bodyleft">
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>


Here is my CSS code:

@charset "utf-8";
#container {
height: 500px;
width: 80%;
background-color: #FFFFFF;
}
#header {
height: 150px;
width: 100%;
}
#banner {
background-color: #445565;
height: 120px;
width: 100%;
}
#nav {
background-color: #aba35b;
height: 30px;
width: 100%;
}
#body {
height: 260px;
width: 100%;
}
#whiteblank {
height: 20px;
width: 100%;
}
#bodyleft {
height: 235px;
width: 329px;
background-color: #d9d8ba;
overflow: visible;
}
#bodyright {
width: 100%;
float: right;
height: 0px;
}
#footer {
background-color: #5b5b5b;
height: 90px;
width: 100%;
}


Here is a link of a jpg of what it should look like. With the exception of images.

http://www.pureleadcss.com/qk.jpg

All i need are the colored boxes. I can add everything else. I have been trying tons of stuff. Iv been stuck here for a while now. Any help would be appreciated.

Thank,
Steven Z

rams1703
09-14-2007, 06:34 PM
this may help ! i have not realized, wut u need exactly!

i came 2 an assumption after seeing ur code & image ! i hope this wut u r expecting.

And do remove "height:400px;" from "#bodyleft" in the following code. Because, height for this tag will grow automatically according to ur content size.

if this is not fulfill ur expectation, then do post ur proper query possibly.

====================================================


<!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>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
background-color: #809198;
}
.style1 {
font-size: 12px
}
#container {
width: 80%;
background-color: #FFFFFF;
margin:0 auto;
}
#header {
height: 150px;
width: 100%;
}
#banner {
background-color: #445565;
height: 120px;
width: 100%;
}
#nav {
background-color: #aba35b;
height: 30px;
width: 100%;
}
#bodyTag {
width: 100%;
}
#whiteblank {
width: 100%;
/* padding-top:10px;*/
}
#bodyleft {
width: 250px;
height:400px;
background-color: #d9d8ba;
overflow: visible;
}
#bodyright {
width: 100%;
float: right;
height: 0px;
}
#footer {
background-color: #5b5b5b;
height: 90px;
width: 100%;
margin-top:5px;
}
-->
</style></head>
<body>
<div id="container">
<div id="header">
<div id="banner"><img src="images/headerleft.jpg" width="442" height="118" /></div>
<div id="nav"></div>
</div>
<div id="bodyTag">
<div class="style1" id="whiteblank"></div>
<div id="welcomeUser">Welcom User Here !</div>
<div id="bodyleft"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>

gud day, :)
rams

pookie
09-14-2007, 07:16 PM
ahh i see what you did, and btw it extends just how i needed it. Thanks so much

pookie
09-14-2007, 07:18 PM
ohh, just one thing. To the right of the tan box...How would a make an adjacent one for the main body of text?

rams1703
09-15-2007, 06:33 AM
cant get picture !!

wut do u mean by tan box ?
do u want to know how it aligned to the center of the screen ?

anyway, u r welcome

regards,
rams

pookie
09-15-2007, 12:00 PM
yes, i would like it centered. And you cant get picture?? Next to the tan box in the body, i need just a plain white big box to fill the rest of the space for the main text/infomration

rams1703
09-15-2007, 04:32 PM
<!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>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
background-color: #809198;
}

#container {
width: 80%;
background-color: #FFFFFF;
margin:0 auto;
}
#header {
height: 150px;
width: 100%;
}
#banner {
background-color: #445565;
height: 120px;
width: 100%;
}
#nav {
background-color: #aba35b;
height: 30px;
width: 100%;
}
#bodyTag {
width: 100%;
}
#whiteblank {
width: 70%;
float:right;
/* padding-top:10px;*/
}
#bodyleft {
width: 250px;
height:400px;
background-color: #d9d8ba;
overflow: visible;
}
#bodyright {
width: 100%;
float: right;
height: 0px;
}
#footer {
background-color: #5b5b5b;
height: 90px;
width: 100%;
margin-top:5px;
}
#insideContent {
float:right;
width:70%;
}
-->
</style></head>
<body>
<div id="container">
<div id="header">
<div id="banner"><img src="images/headerleft.jpg" width="442" height="118" /></div>
<div id="nav"></div>
</div>
<div id="bodyTag">
<div class="style1" id="whiteblank">Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! Content of the body will come here ! </div>
<div id="welcomeUser">Welcom User Here !</div>
<div id="bodyleft"></div>
</div>
<div style="clear:both;"></div>
<div id="footer"></div>
</div>
</body>
</html>

gud day,
rams

pookie
09-15-2007, 11:25 PM
What exactly did you add to make it center.

rams1703
09-16-2007, 04:57 PM
remove "margin:0 auto;" from "#container" and see :)

regards,
rams

ScottInTexas
09-16-2007, 05:21 PM
Using px as size units is going to cause you problems. I have just been going through this very thing. Changing to percentages will keep the page organized correctly even when the text size is changed by the user. When you are viewing your page in the browser open and pin favorites. The resulting change in screen size will show you what I mean. If you are using FF then you can open Sage for example and see what happens to your page. Reading the forum you will see a common thread. CSS doesn't work right in IE. Or, I should say, IE doesn't read CSS properly. If I am wrong then someone can set me straight.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum