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 9 of 9
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Location
    GERMANY
    Posts
    139
    Thanks
    29
    Thanked 1 Time in 1 Post

    how expand sides automatically

    Hey guys and gals,

    I've created a new layout and I'd like the sides of the layout to expand automatically. The with of the content should cover 80% of the browser area and the sides then expand automatically (20%). How can I do that? Do I create three separate divs, 2 for the sides, 1 for the content?

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello OGGordon,
    A centered 80% wide container with an appropriate background image applied to the body should work fine. You could even nest divs for different background images if you want the left/right sides to be different.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    OGGordon (11-04-2009)

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    You could modify http://bonrouge.com/3c-hf-fluid.php to set a % based width on the sidebars
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    OGGordon (11-04-2009)

  • #4
    Regular Coder
    Join Date
    Oct 2009
    Location
    GERMANY
    Posts
    139
    Thanks
    29
    Thanked 1 Time in 1 Post
    Quote Originally Posted by abduraooft View Post
    You could modify http://bonrouge.com/3c-hf-fluid.php to set a % based width on the sidebars
    As far as I understand, this part is part of the CSS file or?

    Code:
    html {height:100%;}
    body {
    margin:0; 
    padding:0; 
    height:100%;
    background:#ffffff url(bg.gif) top right repeat-y;
    font-family:arial, serif; 
    }
    #wrap {
    position:relative;
    background:url(bg.gif) top left repeat-y;
    min-height:100%;
    }
    * html #wrap {height:100%}
    So I could create another file, name it style.css and in the other file, i.e. index.php I add "<link rel="stylesheet" type="text/css" href="style.css">" ?

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    So I could create another file, name it style.css and in the other file, i.e. index.php I add "<link rel="stylesheet" type="text/css" href="style.css">" ?
    Yes, of course.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    OGGordon (11-04-2009)

  • #6
    Regular Coder
    Join Date
    Oct 2009
    Location
    GERMANY
    Posts
    139
    Thanks
    29
    Thanked 1 Time in 1 Post
    Okay so I have done all steps that were shown on the posted website and I still don't get it right. I know it must be something easy but I just can't figure it out:

    THis is how it looks:

    http://derderder.cwsurf.de/

    here is the index.php file:

    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <
    html>
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <
    title>Unbenanntes Dokument</title>
    <
    link rel="stylesheet" type="text/css" href="style.css">
    <
    body>
    <
    div id="wrap">
      <
    div id="header">Header</div>
      <
    div id="inner-wrap">
        <
    div id="left">Left</div>
        <
    div id="main">
          <
    div id="right">Right</div>
          <
    div id="content">Main Content</div>
        </
    div>
      </
    div>
      <
    div id="footer">Footer</div>
    </
    div>
    </
    body>
    </
    head>
    </
    html
    And here is the style.css file:

    Code:
    html {height:100%;}
    body {
    margin:0; 
    padding:0; 
    height:100%;
    background:#ffffff url(bg.gif) top right repeat-y;
    font-family:arial, serif; 
    }
    #wrap {
    position:relative;
    background:url(bg.gif) top left repeat-y;
    min-height:100%;
    }
    #inner-wrap {
    padding-bottom:80px;
    }
    #inner-wrap:after {
    content:" ";
    display:block;
    clear:both;
    }
    #footer {
    position:absolute;
    bottom:0;
    height:80px;
    background-color: #333333;
    width:100%;
    color:#FF00FF;
    text-align:center;
    }
    #left {
    float:left;
    width:200px;
    text-align:center;
    }
    #main {
    position:relative;
    margin-left:200px;
    }
    #right {
    float:right;
    width:200px;
    text-align:center;
    }
    #content {
    padding:5px;
    margin-right:200px;
    text-align:left;
    }
    * html #wrap {height:100%}
    I'm such a noob. I have no idea what I did wrong...

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Save http://bonrouge.com/bg.gif into your root folder.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    OGGordon (11-04-2009)

  • #8
    Regular Coder
    Join Date
    Oct 2009
    Location
    GERMANY
    Posts
    139
    Thanks
    29
    Thanked 1 Time in 1 Post
    Quote Originally Posted by abduraooft View Post
    Save http://bonrouge.com/bg.gif into your root folder.
    OKay, so I uploaded that, however the header is missing?

  • #9
    Regular Coder
    Join Date
    Oct 2009
    Location
    GERMANY
    Posts
    139
    Thanks
    29
    Thanked 1 Time in 1 Post
    after experimenting i realized the header part in the css file was missing. I added it

    #header {
    height:80px;
    background-color: #333333;
    width:100%;color:#FF00FF;
    text-align:center;
    }

    works

    thank you for your help!


  •  

    Posting Permissions

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