Page layout in CSS (multiple questions)

#1 07-26-2008, 05:51 AM

Im in the process of making a page "template" that are going to have some rather complex issues later on. and must bee work in as many browsers and versions as posible .
PC: IE6-7 (and 5.5 if posible) Firefox and opera
Mac: Safari Firefox and Opera

So to be on the "safe" side im going to ask a lot of question about page layout in CSS, some rather simple (i think) and other more complex.
Im on a mac only so testing on pc browser is dificult for me.
I make this a one tread question so the layout steps can be follow step by step, and hope all you great pepol will help with your great knowledg

The page/site im making can bee seen here <http://home19.inet.tele.dk/jgom/test/index.html>

#2 07-26-2008, 05:53 AM

The first question is simple (i think).

I want the page to center.
All the tut's i read says i shall position the page wrapper to relative !

Why?

all the browsers i see the page in display the wrapper in center without doing this, what browsers need this ??

#3 07-26-2008, 08:22 AM

> All the tut's i read says i shall position the page wrapper to relative !

This would only be the case if the page contains absolutely positioned
elements. If it does not (or will not) then there is no need to position
the wrapper.

> Why?

It's due to the way that absolute positioning works. An absolutely
positioned elements is a) always removed from the normal flow (so that it
can *be* positioned), and b) always offset (i.e., located on the page) from
the location of its nearest positioned ancestor (e.g., the relatively
positioned div#wrapper). When there is no nearest positioned ancestor, the
<body> tag is used (i.e., the upper, left-hand corner of the browser
viewport).

That's why, if you put an absolutely positioned element on a bare page, and
give it a left offset of 200px and a top offset of 200px, the element will
be stuck like glue 200px from the left margin and 200px from the top margin
of the browser viewport.

HOWEVER, relative positioning works differently. A relatively positioned
element is NOT removed from the normal flow of the page. This means that
the rendering of the rest of the markup on the page can push a relatively
positioned element around (as opposed to an absolutely positioned element
which is immune to anything else happening on the page, layout-wise). If
the normal flow of the page dictates that a relatively positioned element be
centered, it will be centered, e.g.,

#wrapper { width:760px; margin:0 auto; }

This element will center on the page.

NOW - if the relatively positioned element CONTAINS an absolutely positioned
element, then the relatively positioned element will be a "positioned
ancestor" for the absolutely positioned element. SO, when the relatively
positioned element centers, it will drag the absolutely positioned element
along for the ride. AND the absolutely positioned element will be located
at the SAME location (relative to the relatively positioned element's
location).

Get it?

--
Murray

#4 07-26-2008, 08:42 AM

Thanks Murray :-)
(You always god for a god explanation)

So relative element are positioned relative to themselves and a absolutely element is relative to its containing element ? (Or something like that, not easy to explain LOL)

I have to make my template ready for absolute positioned elements, so i geus that i better position the wrapper (and some elements in that)

#5 07-26-2008, 08:49 AM

Next step.
Making a head, body and foot for the page (beside a top and bottom border). Those have (for several ressons) got to be tables placed on top of eatch other.

In those 3 tablesi like to be able to absolute possition other elemenst.

So those have to be relative like the wrapper ?

is it posible to make elements in td absolute to the td and not to the table ?

#6 07-26-2008, 09:08 AM

In article <59b5f1d6.2@webcrossing.la2eafNXanI>,
Jesper_Møller@adobeforums.com wrote:

> So relative element are positioned relative to themselves and a absolutely
> element is relative to its containing element ? (Or something like that, not
> easy to explain LOL)

<http://www.autisticcuckoo.net/archiv...latively-absol
ute>

"Ironically, absolute positioning is relative. Yes, you read that right.
An absolutely positioned element is positioned relative to another
element, called the containing block."

--
Cheers Martin

#7 07-26-2008, 09:14 AM

Thanks Martin :-)

Gues that meens ill have to wrap the head, body and fotter tables to be able to position elements in them.

this templat is going to be complex

#8 07-26-2008, 09:31 AM

> So relative element are positioned relative to themselves and a absolutely
> element is relative to its containing element ? (Or something like that,
> not easy to explain LOL)

Relative elements are positioned relative to where they are placed by the
normal flow. A relatively positioned element with top:50px will be placed
50px BELOW where it would otherwise have been located by the normal flow.
BUT - and this is important - it will still OCCUPY SPACE in the flow of the
code. This means if you have a relatively positioned element with
top:300px;height:100px, it will appear where you expect, but it will leave a
100px tall hole in the rendered code at its original location.

--
Murray

#9 07-26-2008, 09:31 AM

So true. So ironic.

--
Murray

#10 07-26-2008, 09:32 AM

Never place absolutely positioned elements directly into table cells.

Why do you need to do things this way?

--
Murray

<Jesper_Møller@adobeforums.com> wrote in message
news:59b5f1d6.3@webcrossing.la2eafNXanI...
> Next step.
> Making a head, body and foot for the page (beside a top and bottom
> border). Those have (for several ressons) got to be tables placed on top
> of eatch other.
>
> In those 3 tablesi like to be able to absolute possition other elemenst.
>
> So those have to be relative like the wrapper ?
>
> is it posible to make elements in td absolute to the td and not to the
> table ?

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode