SV: SV: [thelist] HTML Layout [solved]

Marcus Andersson marcan at home.se
Tue Dec 16 06:00:46 CST 2003


> 
> (1) Simple, but needing JavaScript
> 
> body { margin-top: 20px; padding-top: 0; }
> #header { position: fixed; top: 0; left: 0; }
> 
> + http://www.mark.ac/help/sticky.html
> 
> (2) More complicated
> 
http://devnull.tagsoup.com/fixed/

Thanks for the links. I don't like the javascript solution but the "more
complicated" css solution from tagsoup gave me inspiration (solution
below).

>(Of course you could point out that having the header on screen all the

>time is probably a bad idea anyway - users can see it when they first 
>get to the site, they can scroll back to it really quickly, and it eats

>the a segment of their screen space meaning they have to scroll more)

Just helping a friend who is a programmer on a company where they
produce an ERP system. He doesn't have the choice I'm afraid

Thanks to the others who provided proposals to solutions as well.

/Marcus


Solution (for IE only but that didn't matter...):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>Tests</title>    
    <style>
      body {
        margin: 0;                
        background-color : #ddd;
        font: 100% Arial,Helvetica;
        padding: 20px 0 0 0;        
        overflow-y: hidden;
      }

      div.head {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 20px;
        color: #000;
        background: #ffe;
        border-bottom: 1px solid #00f;
      }

      body div.content {
        border-left: 0 none;
        padding: 0 210px 0 30px;
        height: 100%;
        overflow: auto;
      }       
    </style>    
  </head>
  <body>
    <div class="content">
     lots of content here
    </div>
    <div class="head">
      Content in the header
    </div>
  </body>
</html>



More information about the thelist mailing list