? Using EMs for positioning

[Alec S.]

Hi,

Can EMs be used for positioning? For example:

#navbar {
left: 2em;
top : 1.3em;
}


Does this allow for accurate positioning? Can I align elements properly
like this?


Thanks

--
Alec S.
alec <@> synetech <.> cjb <.> net

[Steve Pugh]

Re: ? Using EMs for positioning

On Wed, 6 Oct 2004 23:01:00 -0400, "Alec S." <a@a.com> wrote:
[color=blue]
> Can EMs be used for positioning? For example:[/color]

Yes.
[color=blue]
>#navbar {
> left: 2em;
> top : 1.3em;
>}[/color]

With no position property those will likely be ignored.
[color=blue]
> Does this allow for accurate positioning? Can I align elements properly
>like this?[/color]

Depends on the situation.

Steve

[Eric Jarvis]

Re: ? Using EMs for positioning

Alec S. a@a.com wrote:[color=blue]
> Hi,
>
> Can EMs be used for positioning? For example:
>
> #navbar {
> left: 2em;
> top : 1.3em;
> }
>[/color]

It can. Use em units when you want to relate the size or position of a
design element to the default text size. That's what the units are for and
that's what they do.
[color=blue]
>
> Does this allow for accurate positioning? Can I align elements properly
> like this?
>[/color]

No and yes. If the element needs to be aligned in any way that is
dependent on default font size it's the only way you can align it
properly. It will be accurately positioned if you are thinking in terms of
how it relates to font size, which is often ideal. It will not be
accurately positioned in terms of overall page size, if that's what you
need then % is the unit to use. Only you can tell which is the priority.
Both work well, neither does both accurately and properly unless you are
very clear about your design intentions.

For a "navigation bar" I will usually use em units to size it and position
it.

--
eric

https://www.ericjarvis.co.uk

"live fast, die only if strictly necessary"

[Alec S.]

Re: ? Using EMs for positioning

> "Eric Jarvis" <web@ericjarvis .co.uk> wrote in message
news:MPG.1bcf3e c68a4956c298d59 5@news.individu al.net...[color=blue]
> "Steve Pugh" <steve@pugh.net > wrote in message[/color]
news:hip9m0lr77 ofrkldoiuuh02qe h82dv77u0@4ax.c om...



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?



--
Alec S.
alec <@> synetech <.> cjb <.> net

[Neal]

Re: ? Using EMs for positioning

On Thu, 7 Oct 2004 21:49:25 -0400, Alec S. <a@a.com> wrote:
[color=blue][color=green]
>> "Eric Jarvis" <web@ericjarvis .co.uk> wrote in message[/color]
> news:MPG.1bcf3e c68a4956c298d59 5@news.individu al.net...[color=green]
>> "Steve Pugh" <steve@pugh.net > wrote in message[/color]
> news:hip9m0lr77 ofrkldoiuuh02qe h82dv77u0@4ax.c om...[/color]

Be sure if you attribute, you quote, and vice versa!
[color=blue]
> 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?[/color]

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.

[Alec S.]

Re: ? Using EMs for positioning

> Be sure if you attribute, you quote, and vice versa!

I didn't want to post the same message as a reply to both messages, but
wanted to reply to both and acknowledge them both. Plus, [too many] people
still use 56K so every byte they have to download counts.

[color=blue]
> <div id="header">... </div>
> <div id="content">.. .
> <div id="menu">...</div>
> </div>
> <div id="foot">...</div>
>
> #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;}[/color]


This is good but I'm trying to simulate frames with CSS. I've already got
it working nicely with PX but I want it to be scalable. Your method is
scalable but the footer stays at the bottom of the content rather than at
the bottom of the screen.


--
Alec S.
alec <@> synetech <.> cjb <.> net