SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot imagize's Avatar
    Join Date
    Oct 2004
    Location
    Australia
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Assistance Please

    I have attached a mockup design of my layout with all graphics removed. I am having real trouble creating this layout just with css. The main area causing me trouble is the bottom of the banner on the left side as it curls around the page. I had to use a table as a temporary fix and I am trying to find the solution to this. I cut the banner into 3 images, the recurring bg, the horizontal part and the little vertical part on the left hand side.

    If anyone could help me with the solution that would be appreciated.


  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think I would probably approach this layout by using floats to create the leftnav and content areas (floated left and right respectively), and then use a negative margin-top on the content to drag it up over the header banner area.
    Code:
    #wrapper {
      width: 800px;
    }
     
    #topbar, #midbar {
      height: 25px;
    }
    
    #banner {
      height: 150px;
    }
    
    #leftnav {
      width: 125px;
      float: left;
    }
    
    #main {
      width: 675px;
      float: right;
      margin-top: -50px;
    }
    
    #content {
      width 500px;
      float: left;
    }
    
    #rightnav {
      float: right;
      width: 175px;
    }
    HTML:
    Code:
    <div id="wrapper">
      <div id="topbar">
        topbar
      </div>
      <div id="banner">
        banner
      </div>
      <div id="leftnav">
        leftnav
      </div>
      <div id="main">
        <div id="midbar">
          midbar
        </div>
        <div id="content">
          content
        </div>
        <div id="rightnav">
          rightnav
        </div>
      </div> <!-- /main -->
    </div> <!-- /wrapper -->
    Untested, but something like that.


Bookmarks

Posting Permissions

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