Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    7
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Site not extending correctly

    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:
    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:
    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

  • #2
    New Coder
    Join Date
    Sep 2007
    Posts
    34
    Thanks
    0
    Thanked 7 Times in 7 Posts
    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
    Last edited by rams1703; 09-14-2007 at 05:47 PM.

  • Users who have thanked rams1703 for this post:

    pookie (09-14-2007)

  • #3
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    7
    Thanks
    5
    Thanked 0 Times in 0 Posts
    ahh i see what you did, and btw it extends just how i needed it. Thanks so much

  • #4
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    7
    Thanks
    5
    Thanked 0 Times in 0 Posts
    ohh, just one thing. To the right of the tan box...How would a make an adjacent one for the main body of text?

  • #5
    New Coder
    Join Date
    Sep 2007
    Posts
    34
    Thanks
    0
    Thanked 7 Times in 7 Posts
    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

  • Users who have thanked rams1703 for this post:

    pookie (09-15-2007)

  • #6
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    7
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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

  • #7
    New Coder
    Join Date
    Sep 2007
    Posts
    34
    Thanks
    0
    Thanked 7 Times in 7 Posts
    <!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

  • Users who have thanked rams1703 for this post:

    pookie (09-16-2007)

  • #8
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    7
    Thanks
    5
    Thanked 0 Times in 0 Posts
    What exactly did you add to make it center.

  • #9
    New Coder
    Join Date
    Sep 2007
    Posts
    34
    Thanks
    0
    Thanked 7 Times in 7 Posts
    remove "margin:0 auto;" from "#container" and see

    regards,
    rams

  • Users who have thanked rams1703 for this post:

    pookie (09-16-2007)

  • #10
    Regular Coder
    Join Date
    Nov 2002
    Posts
    567
    Thanks
    2
    Thanked 4 Times in 4 Posts
    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.
    Scott Stewart
    Always happy to learn from pros.

  • Users who have thanked ScottInTexas for this post:

    pookie (09-16-2007)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •