On Thu, 7 Oct 2004 21:49:25 -0400, Alec S. <a@a.com> wrote:
"Eric Jarvis" <we*@ericjarvis.co.uk> wrote in message news:MP************************@news.individual.ne t... "Steve Pugh" <st***@pugh.net> wrote in message
news:hi********************************@4ax.com...
Be sure if you attribute, you quote, and vice versa!
My page has a header, a contents bar to the left, a main area beside
it,
and a footer. I use PX right now (header height is 60px, footer height
is
15px, and contents width is 175px). I want to modify my page so that it
can
be scaled to any resolution properly. I assume using EMs is the way to
do
this. Is there some sort of tutorial available on converting an existing
static page to a scalable page?
Well, look at it this way. For scalability, you have two choices: % or em.
Em is based on the size of text. % is based on the size of the containing
block.
The containing block is usually the viewport. If I assign a width of 50%
to a div directly inside the body tags, it'll take up 50% of the width of
the viewport.
Now let's say you have what you describe, a left bar, a header bar, a
content area, and a blurb below. One way to do this...
<div id="header">...</div>
<div id="content">...
<div id="menu">...</div>
</div>
<div id="foot">...</div>
Note the menu is within the content div, after the content!
CSS might be a little like this - note that I'm just throwing ideas out,
it's not complete:
#header {padding: 0.5em; border: 2px solid yellow;}
#content {margin-left: 15em; padding: 0 0.5em; position: relative;}
#menu {position: absolute; top: 0; left: -15em; width: 14em;}
#foot {padding: 0.5em; border: 2px solid yellow;}
Now here comes the positioning logic. When we position with absolute, we
are setting where it will be with respect to the containing block.
However, sonce your header might be 1, 2, 3 lines high there's no way to
know where to put it, is there? Well, here's the thing - when we set an
element as positioned relative or absolute (or fixed) that element is now
the containing block for whatever's inside it.
That's why I did position: relative; on #content without offsetting it -
it's now acting as the containing block, and we can now position according
to that.
Experiment with this. Refer to
http://www.w3.org/TR/CSS21/propidx.html if
you need help with the CSS properties.