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 Coder
    Join Date
    Nov 2004
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Look at this layout please!

    Hi

    I want to achieve this layout using CSS http://www.premier-resin-systems.co.uk/layout.jpg

    I want it to be 3 columns, but as you can see the navigation part overlaps the red background image that I was going to put in my header div.

    I would like some help if poss on how to put this design into divs before I plough staright in!!

    Thanks for any help or advice!

  • #2
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You could use absolute positioning on the menu DIV to float it over the header.

  • #3
    New Coder
    Join Date
    Nov 2004
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is what I have so far could you tell me what items I would position please

    <div id="wrapper">
    <div id="header">Header</div>
    <div id="left">Left</div>
    <div id="right">Right</div>
    <div id="maincontent">Main Content</div>
    <div id="footer">Footer</div>
    </div>


    body{
    margin:0;
    padding:0;
    font:76%/1.5em Verdana,Arial,Geneva,Helvetica,sans-serif;
    text-align:center;
    }
    #wrapper{
    width:760px;
    margin-left:auto;
    margin-right:auto;
    }
    #header{
    padding:0;
    margin-bottom:0;
    background:black;
    }
    #maincontent{
    padding:0;
    margin-left:200px;
    margin-right:200px;
    background:gray;
    }
    #left{
    float:left;
    width:200px;
    margin:0;
    margin-right:0;
    padding:0;
    background:green;
    }
    #right{
    float:right;
    width:200px;
    margin:0;
    margin-left:0;
    padding:0;
    background:red;
    }
    #footer{
    clear:both;
    padding:0;
    margin-top:0;
    background:blue;
    }

  • #4
    New Coder
    Join Date
    Nov 2004
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay I have been able to come up with this, could someone take a look and see if what I have done looks right in terms of code and for seeing any probs!

    http://www.premier-resin-systems.co.uk/layout

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Right?

    I don't know what you've got planned for the "left" div, but since it seems to be going to sit beneath the menu it would be more logical if both the menu and the "left" div to be at the same level, structurally.
    I don't feel this menu should be part of the header, anyway.

    Otherwise, it's coming along nicely; it wasn't going to be an easy task from the start, considering the rather complicated header image, but you're well on your way.
    Perhaps you could add a little more placeholder content to give a clearer indication of the intended use of in particular the side boxes -since of course "footer" is kind of a no-brainer...
    Regards,
    Ronald.
    ronaldvanderwijden.com


  •  

    Posting Permissions

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