Stylesheets - Links at end of page repositioned to top (Re: difference between h1 and title)

Author

Links at end of page repositioned to top (Re: difference between h1 and title)

Stan Brown

2003-12-14, 11:12 am

In article <Xns945170CBEA079jkorpelacstutfi@193.229.0.31> in
comp.infosystems.www.authoring.html, Jukka K. Korpela wrote:

quote:

>Stan Brown <the_stan_brown@fastmail.fm> wrote:
>
>I don't _use_ such style much but I have a demo of the concept:
>http://www.cs.tut.fi/~jkorpela/styles/layout.html

Interesting -- you wrap all the page content in a big <div>,
position that absolutely, and let the (unpositioned) links take up
the space that is unused.

What was wrong with my efforts, I think, is that I tried to position
<body> and a <div> that was contained in that body. You and Tilman
both have separate <div>s that are children of the same <body>. This
gives me something to work with.

quote:

>The details would best be discussed in c.i.w.a.stylesheets,

Agreed; f'ups redirected.

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/

Tilman Hesse

2003-12-15, 4:35 pm

(Stan Brown in comp.infosystems.www.authoring.html)

quote:

>
>I appreciate the link, showing a different approach from Jukka's.
>You also wrap the content in a big <div>, but position that
>_relatively_. Is there a reason you have two separate navigation
><div>s, the first unpositioned and the second positioned absolutely?
>I don't understand why you position the second one absolutely rather
>than just let it flow.

The divs with class="content" are position-relative, so there can be
more than one. (The footer is just one more "content"-div.) They will
nicely stack on top of each other.
This would be impossible with position-absolute.

There are two absolute positioned divs: The first contains the links,
the second is for the logo image.

Tilman
--
Der statistische Tote ist dir eal. Der stochastische Tote bist du selber.

Nick Theodorakis

2003-12-15, 4:35 pm

On Sun, 14 Dec 2003 09:23:48 -0500, Stan Brown
<the_stan_brown@fastmail.fm> wrote:

quote:

>In article <Xns945170CBEA079jkorpelacstutfi@193.229.0.31> in
>comp.infosystems.www.authoring.html, Jukka K. Korpela wrote:
>
>Interesting -- you wrap all the page content in a big <div>,
>position that absolutely, and let the (unpositioned) links take up
>the space that is unused.
>
>What was wrong with my efforts, I think, is that I tried to position
><body> and a <div> that was contained in that body. You and Tilman
>both have separate <div>s that are children of the same <body>. This
>gives me something to work with.
>

For my "play" site, I use a similar approach. I put the navigation at
the logical end, and position it as a sidebar at the right using css.
I just wrap the content and navbar each in its own div, and use
absolute positioning. It stuffs NS4, of course, but I hid the CSS from
that. Works ok with MSIE5 and up, opera, and moz. There is a minor
harmless bug in MacIE5 that generates an unnecessary horizontal scroll
bar, and iCab also sems to get confused. See:

<http://theodorakis.net/>

for a demo.

Nick
--
Nick Theodorakis
nick_theodorakis@hotmail.com
nicholas_theodorakis [at] urmc [dot] rochester [dot] edu

Stan Brown

2003-12-17, 9:41 am

In article <MPG.1a463c7c4577f28098b969@news.odyssey.net> in
comp.infosystems.www.authoring.stylesheets, Stan Brown wrote:

quote:

>In article <Xns945170CBEA079jkorpelacstutfi@193.229.0.31> in
>comp.infosystems.www.authoring.html, Jukka K. Korpela wrote:
>
>Interesting -- you wrap all the page content in a big <div>,
>position that absolutely, and let the (unpositioned) links take up
>the space that is unused.

I have another attempt, and this one works much better:
http://www.acad.sunytccc.edu/instru...ce/probform.htm
(I know that I still have some issues with horizontal formatting.)

This replaces
http://www.acad.sunytccc.edu/instru...at/probform.htm
The "nonce" version has the breadcrumbs physically at the end of the
file and positions them absolutely to the top; the "stat" version
has the breadcrumbs physically at the top of the file.

But here's my problem. The "stat" version reformats itself well when
you make the window quite narrow; the "nonce" version has the
breadcrumbs overlapping the content. I implemented the "nonce"
version by wrapping the content in a <div ID="content">, styled with
margin-top:2.5em; the breadcrumbs are in a <div ID=crumbs"> styled
with position:absolute;top:0;margin-top:0.5em.

Seems to me I need the "crumbs" div to have auto height, and the
"content" div to flow after "crumbs", however high it might be. But
after reviewing section 9 of the spec it looks to me like I can't do
that. Am I missing something?

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/