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