SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast Chunks's Avatar
    Join Date
    May 2002
    Location
    Australia
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy CSS Layout Troubles

    Hi all,

    I have been battling this Layout all morning, and this is the nearest i can get to the design i am aiming for. i know i know its got a long way to go , can anyone help me out or at least point me in the right direction?. i have read a lot of tutorials from alistapart.com, glish.com and they are great but they don't seem to cover exactly what i want, i have tried in vain to apply some of the princples from several layout combinations but to no avail , this is what iam trying to achieve.

    header
    ------------------
    left | mid | right
    col | col | col
    ------------------
    footer

    i would be so greatful for your help,
    thanks regards Chunks

  2. #2
    SitePoint Enthusiast Big Joe's Avatar
    Join Date
    Jun 2003
    Location
    Ohio, U.S.A.
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have a look at this, it might be what you're looking for.
    http://www.positioniseverything.net/...l.stretch.html

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you want the footer to be below the columns then you will need to at least have one static or (floated) column longer than the absolutely placed left and right columns, so that the footer has something to foot.

    Or alternatively float the left and right columns and let the middle column be static then the footer will stay at the bottom if you use clear both in the footer style.

    I've adjusted some of your code to get the affect I think you want (although this is not meant to be a full solution it should help you in the right direction.)

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Oz Home Design</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css" media="all">
    <!-- 
    body{
     margin:0;
     padding:0;
    }
    #top-section{
     position:relative;
     left:0;
     top:0; 
     margin:0 0 10px 0;
    }
    #mid-section{
     float:left;
     margin-top:20px;
     width:200px;
    }
    /*bottom-section{
     position:relative;
     left:0;
     top:0;
    }*/
    #topCol-1{
     position:relative;
     padding:0 10px 0 20%;
     border-bottom:1px solid black;
    }
    #midCol-3{
     float:right;
     padding-right:10px;
     margin-top:20px;
     width:185px;
     border:1px solid #000;
    }
    #midCol-2{
     margin-top:30px;
     margin-left: 205px;
     margin-right:200px;
     border:1px solid #000;
    }
    #midCol-1{
    margin-left:10px; 
    }
    #bottomCol-1{
     clear:both;
     margin-top: 1em;
     padding:0 10px 0 20%; 
     border:1px solid black;
    }
    /* Menu Starts here*/
     #navcontainer
    {
    padding: 0;
    margin-bottom: 1em;
    font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
    background-color: #90bade;
    color: #333;
    }
    #navcontainer ul
    {
    list-style: none;
    margin: 0;
    padding: 0;
    border: none;
    }
    #navcontainer li
    {
    border-bottom: 1px solid #90bade;
    margin: 0;
    }
    #navcontainer li a
    {
    position:relative;
    display: block;
    padding: 5px 5px 5px 0.5em;
    border-left: 10px solid #1958b7;
    border-right: 10px solid #508fc4;
    background-color: #2175bc;
    color: #fff;
    text-decoration: none;
    }
    #navcontainer li a:hover
    {
    border-left: 10px solid #1c64d1;
    border-right: 10px solid #5ba3e0;
    background-color: #2586d7;
    color: #fff;
    }
    /* Menu ends here*/
    -->
    </style>
    </head>
    <body>
    <div id="top-section"> 
      <div id="topCol-1">Header Area</div>
    </div>
    <div id="mid-section"> 
      <div id="midCol-1"> 
    	<div id="navcontainer"> 
    	  <ul id="navlist">
    		<li><a href="#" title="Home">Home</a></li>
    		<li><a href="#" title="Design">Design</a></li>
    		<li><a href="#" title="Portfolio">Portfolio</a></li>
    		<li><a href="#" title="Photo Gallery">Photo Gallery</a></li>
    		<li><a href="#" title="Contact Us">Contact</a></li>
    	  </ul>
    	</div>
      </div>
    </div>
    <div id="midCol-3">Column 3</div>
    <div id="midCol-2">Column 2</div>
    <!--<div id="bottom-section">-->
    <div id="bottomCol-1">Footer Area</div>
    <!--</div>-->
    </body>
    </html>
    Hope that helps.

    Paul

  4. #4
    SitePoint Enthusiast Chunks's Avatar
    Join Date
    May 2002
    Location
    Australia
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey thanks guys, that has been so much help, i have learn't quite a bit in the process too, thanks again

    Chunks


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
  •