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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question CSS layout conversion question

    i've created a layout with the basic plan shown below...I've been trying to do a tableless css layout using div's but I just can't get it to work properly. First I tried doing margins to align all the pieces, which worked with no content in in, but once I put content in each section and it stretched vertically the content areas would not connect up with the footer and the nav panel. Then I tried floating everything. The floating worked fine for the header area(header/member login) but below that it would not line up side by side but rather on a line lower. I'm very new to css and am not quite sure how to best go about coding a layout with the properties of the one below to work. Also...
    the only stretching parts would be the content sections the rest would be non repeating. Nothing is stretching horizontally only vertically. One more thing, when one of the contents stretches more than the other(more content) I want the other to stretch with it, rather than just stretching for its own content. (I hope this makes sense, I'm sure a lot of this is redundant but I'm just trying to explain it the best way I know how)

    Any help would be greatly appreciated. thank you


  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Could you post your current code?
    (Please use [code][code] tags to wrap your code while posting here)
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    body
    {
    background: #242621; 
    min-width:990px;
    margin:auto;
    }
    #container
    {
    background: transparent;
    margin:0 auto;
    width: 990px;
    }
    #headerleft
    {
    background: url(images/header1.png);
    height:123px;
    width:576px;
    float:left;
    }
    #headerright
    {
    height:123px;
    width:414px;
    float:right;
    background: url(images/header2.png);
    
    }
    #navleft
    {
    height:28px;
    width:720px;
    float:left;
    background: url(images/nav.png) no-repeat;
    }
    #searchright
    {
    float:right;
    width:270px;
    height:28px;
    background: url(images/search.png) no-repeat;
    }
    #mainleft
    {
    width:720px
    height:100%
    float:left;
    background: url(images/left.png) repeat-y;
    }
    #mainright
    {
    width:270px;
    height:100%;
    float:right;
    background: url(images/right.png) repeat-y;
    }
    #footer
    {
    width:990px;
    height:28px;
    background:url(images/footer.png) no-repeat;
    }
    Code:
    <div id="container">
    	<div id="headerleft"></div>
        <div id="headerright"></div>
        <div id="navleft"></div>
        <div id="searchright"></div>
        <div id="mainleft">
        </div>
        <div id="mainright"></div>
        <div id="footer"></div>
    </div>
    This is just from the latter attempt using float, I didn't save the one using margins because it didn't work. =/
    Last edited by Sryinex; 11-08-2008 at 10:02 AM.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Code:
    #headerleft
    {
    background: url(images/header1.png);
    height:123px;
    width:576px;
    float:left;
    }
    #navleft
    {
    height:28px;
    width:720px;
    float:left;
    background: url(images/nav.png) no-repeat;
    }
    Do you need different widths for your columns in each row(unlike what shown in the picture)?

    I think you could modify http://bonrouge.com/2c-hf-fluid(r).php so that include your first two columns inside the header of this layout.
    Last edited by abduraooft; 11-08-2008 at 10:21 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah it's not a fluid layout. Where I indicated with my picture are the slices I have made on the layout. They are fixed sizes and I only need vertical stretching. The only slices out of that that will be not fixed are the main and right content which will stretch vertically.


  •  

    Posting Permissions

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