SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    2-layer CSS layout - footer jumps up on low res

    I'm working on a pretty complex layout, which involves 2 divs one on top of the other (see picture). The reason for that - the "greeting" div has (of course) logo and a different color background to the lower part of the page. It's height is fixed.
    The other div, "id_1", contains the main content of the page, with separate divs for menu, main window ("main_win") and optional boxes div underneath. I'm not sure if "main_win" will be the same height on all pages of the site or not. The same goes for "boxes" div.



    I have two problems arised with the footer div:
    Problem 1. On low screen heights (i.e. 800x600 resolution) it jumps up and covers the "boxes" div. On high resolution (1024x768 and larger) it works fine both in IE 6 and FF. I've tried adding a wrapper to the whole lot except "greeting" div, but it didn't help. Putting the footer outside the main "id_1" div didn't help neither.

    Problem 2: The footer is built up from 3 spans, which align to left, right and center. The center one will probably be an include file (a menu). No matter what I do, I can't line them up on the same height.

    Here is the code. In the meantime, I keep both style and html in a single file for easy coding, but I've splitted it for easy reading.

    Any ideas what to do? I've spent more than 5 hours already trying to find the solution...

    CSS:
    Code:
    <style type="text/css">
    <!-- 
    
    html, body, #div_1 {
    min-height: 100%;
    width: 100%;
    height: 100%;
    }
    
    html>body, html>body #div_1 {height: auto;}
    
    body {
    margin: 0;
    padding: 0;
    background-color: #C2C2C2;
    font-family: Tahoma, Sans-Serif, Helvetica, Arial;
    }
    
    #div_1 {
    position: absolute;
    top: 110px;
    left: 0;
    }
    
    #greeting {
    position: absolute;
    width: 100%;
    height: 263px;
    background-color: #E8E8E8;
    color: #5A6A79;
    font-size: 12px;
    }
    
    .greet_txt {
    display: block;
    padding-left: 280px;
    margin-top: -85px;
    }
    
    #main_win {
    position: absolute;
    left: 0px;
    height: 278px;
    width: 826px;
    border-right: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    }
    
    #boxes {
    position: absolute;
    margin-top: 300px;
    width: 830px;
    height: 140px;
    display: inline;
    }
    
    #box_news {
    position: absolute;
    left: 563px;
    top: 0px;
    height: 140px;
    width: 263px;
    border-style: solid;
    border-width: 1px;
    border-color: #FFFFFF;
    background-color: #ADADAD;
    }
    
    .news_cap {
    font-size: 20px;
    color: white;
    padding-left: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
    background-color: #21699B;
    display: block;
    }
    
    #footer {
    float: bottom;
    background-color: #FF0000;
    position: absolute;
    text-align: center;
    bottom: 0;
    font-size: 9px;
    }
    
    
    .ftr_copy {
    float: left;
    margin-left: 10px;
    color: #FDFCFC;
    }
    
    .ftr_menu {
    float: center;
    font-size: 10px;
    color: #A2A2A3;
    }
    
    .ftr_creat {
    float: right;
    margin-right: 10px;
    color: #E8E8E8;
    }
    
    -->
    </style>
    HTML:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>home</title>
    </head>
    <body>
     <div id="greeting"><img alt="logo" src="images/logo.gif" height="114" width="256" /><span class="greet_txt">big promo text here</span>
     </div> <!-- greeting -->
    <div id="div_1">
     <div id="main_menu">
      <img alt="menu-off copy (6K)" src="images/menu-off%20copy.png" height="25" width="826" />
     </div> <!-- main_menu -->
     <div id="main_win"> 
      <img alt="home (371K)" src="images/main_win.png" height="278" title="made4net home" width="826" />
     </div> <!-- main_win -->
     <div id="boxes">
      <div id="box_news"><span class="news_cap">News:</span>
       <p>box news</p>
      </div>
      </div> <!-- boxes -->
      <div id="footer">
       <span class="ftr_copy">&copy;&nbsp;2006,&nbsp;All Rights Reserved.</span>
       <span class="ftr_menu">footer menu</span>
       <span class="ftr_creat">Created by </span>
     </div> <!-- footer -->
     </div> <!-- div_1 -->
    </body>
    </html>
    Lev

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    Unfortunately I'm not seeing the picture that you referred to in your post. Can you please upload or link to it so I can see how you want the page to look before I check the code? It would help out a lot.

  3. #3
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Damn,

    My hosting erased all my files... Will look for another one and then upload the file once more.

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why don't you just upload the images as attachments here?

  5. #5
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, sorry, haven't thought about that
    Attached Images Attached Images


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
  •