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

    This layout needs some serious help!

    Hi
    If you take a look at http://www.bullsigns.com/layout.gif, this is the layout I am trying to acieve.
    2 colums 1 floated left 1 floated right, with the navigation placed over them. I presume this would have to be absolute positioned.?
    Could someone give me a start on the css code and html on how to achieve what I want.
    I have this so far
    Code:
    <div id="wrapper">
     <div id="navigation">navigation
     <div id="left">left
     <div id="right">right
    </div>
    Code:
    #wrapper{
     width:760px;
     margin-left:auto;
     margin-right:auto;
     text-align:left;
    }
    #left{
     float:left;
     width:290px;
     height:500px;
     margin:0;
     margin-right:0;
     padding:0;
    }
    #right{
     float:left;
     width:290px;
     height:500px;
     margin:0;
     margin-right:0;
     padding:0;
    }
    #navigation{
     position:absolute;
    }
    Thanks alot!!!
    Last edited by mumford; 07-15-2005 at 03:50 PM.

  • #2
    New Coder
    Join Date
    Nov 2004
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay

    I have managed to come up with this http://bullsigns.com/test/

    In FF looks how it should but IE you only see some of the bground image in the left div.

    Why is this?

  • #3
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,791
    Thanks
    8
    Thanked 131 Times in 129 Posts
    remove the red line from your CSS
    Code:
    /* Hide from IE5-mac. Only IE-win sees this. \*/
    * html #left{height:1%;margin-left:-3px;}
    /* End hide from IE5/mac */
    I couldn't get the navigation to show on IE6. I think it's the floated elements. I tried z-indexing to no avail.

    I'm not sure if this what your going for but it might be a little easier way of doing it.
    Attached Thumbnails Attached Thumbnails This layout needs some serious help!-mumfordbg%5B1%5D.jpg  

  • #4
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    easiest way to achieve that layout

    to avoid needing absoluteositioning and the hell it can produce, try this:

    Code:
    <div id="header"><div id="banner"></div>
       <div id="navigation"></div>
    </div>
    <div id="content"><div id="left"></div>
       <div id="right"></div>
    </div>
    notice there is code immediately after any <div> tag. this is stopping the IE white space bug...

    corresponding CSS for body:
    Code:
    div#left {
       float:left;
       margin: 0;
       width: 222px; // or whatever the width of left column
    }
    div#right {
       margin-left: 111px; // this is IE width, make it half what left div width is
       width: 222px;
    }
    html>body div#right { margin-left: 222px; } // for non-IE browsers
    now as for the navigation, u may want to use an unordered list to create that menu effect, otherwise just use the code in your sample...

    as for the banner - set a defined height, have the logo that height... any text must go to the right of it... otherwise, make it a span and position it to the right using margin-left (and the corresponding IE correction as shown)...

    if u want full code + clarification, i will post it...

  • #5
    New Coder
    Join Date
    Nov 2004
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Could you post me the full code and clarification, please.

    This is what I have come up with before I read your post

    http://bullsigns.com/test/


  •  

    Posting Permissions

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