four divs on one page?

[Pierre Jelenc]

I need to lay out a page with five main elements: A fixed div at the top
containing a navigation bar, two side-by-side columns, a centered shopping
cart at the bottom, and a full-window fixed div to provide a border. A
test page is at

http://www.marcvonem.com/discography.html

The navigation bar and absolutely positioned side by side columns look
fine (with a few cosmetic problems that will be dealt with later) but I
cannot figure out how to place the shopping cart under the two columns
(not at the bottom of the window, at the bottom of the page regardless of
the length of the page, which hopefully will grow as they release more
records!)

Any hints?

Pierre
--
Pierre Jelenc | New on Home Office Records: Ethan Lipton
| www.homeofficerecords.com www.ethanlipton.com
The Gigometer | Pepper Of The Earth: the HO blog
www.gigometer.com | www.homeofficerecords.com/blog

[Ivo]

"Pierre Jelenc" <rc**@panix.com> wrote in message
news:c1**********@reader2.panix.com...

I need to lay out a page with five main elements: A fixed div at the top
containing a navigation bar, two side-by-side columns, a centered shopping
cart at the bottom, and a full-window fixed div to provide a border. A
test page is at

http://www.marcvonem.com/discography.html

The navigation bar and absolutely positioned side by side columns look
fine (with a few cosmetic problems that will be dealt with later) but I
cannot figure out how to place the shopping cart under the two columns
(not at the bottom of the window, at the bottom of the page regardless of
the length of the page, which hopefully will grow as they release more
records!)

Any hints?

Pierre

The main content is not taking up space because it is absolutely positioned.
That is why the cart div is not low enough. Perhaps place it inside the main
div, or alter the main to be relative. If you knew the height of your
content, you could offset it with that amount, but you don't want to know
the height because as you say, that should grow.
HTH
Ivo

[Karl Smith]

rc**@panix.com (Pierre Jelenc) wrote:

I need to lay out a page with five main elements: A fixed div at the top
containing a navigation bar, two side-by-side columns, a centered shopping
cart at the bottom, and a full-window fixed div to provide a border. A
test page is at

http://www.marcvonem.com/discography.html

The navigation bar and absolutely positioned side by side columns look
fine (with a few cosmetic problems that will be dealt with later) but I
cannot figure out how to place the shopping cart under the two columns
(not at the bottom of the window, at the bottom of the page regardless of
the length of the page, which hopefully will grow as they release more
records!)

Get rid of that absolute positioning.

#discoleft {float: left;}
#discoright {float: right;}
form {clear: both;}

Easy one.

--
Karl Smith.
Interim President,
International Global World "Jonathon Frakes
must never work in films again!" Society

[Eric Jarvis]

Karl Smith go************@kjsmith.com wrote:

rc**@panix.com (Pierre Jelenc) wrote:

I need to lay out a page with five main elements: A fixed div at the top
containing a navigation bar, two side-by-side columns, a centered shopping
cart at the bottom, and a full-window fixed div to provide a border. A
test page is at

http://www.marcvonem.com/discography.html

The navigation bar and absolutely positioned side by side columns look
fine (with a few cosmetic problems that will be dealt with later) but I
cannot figure out how to place the shopping cart under the two columns
(not at the bottom of the window, at the bottom of the page regardless of
the length of the page, which hopefully will grow as they release more
records!)

Get rid of that absolute positioning.

#discoleft {float: left;}
#discoright {float: right;}
form {clear: both;}

Easy one.

in general it seems best to start by using relative positioning, and only
go to absolute positioning if the design requires it...a lot of people
seem to work the other way around and I'm not entirely sure why...what am
I missing?

--
eric
www.ericjarvis.co.uk
all these years I've waited for the revolution
and all we end up getting is spin

[Neal]

On Sat, 28 Feb 2004 03:43:27 -0000, Eric Jarvis <we*@ericjarvis.co.uk>
wrote:

in general it seems best to start by using relative positioning, and only
go to absolute positioning if the design requires it...a lot of people
seem to work the other way around and I'm not entirely sure why...what am
I missing?

Well, for one I don't fully agree. Floating and absolute positioning each
have their uses, and one cannot do half of what the other does. Rather
than avoid one and use the other, you need to consider which is right for
doing what you want.

And relative positioning hasn't shown itself to be useful to me in page
layout with the exception of setting an otherwise static div as positioned
without even moving it. I can't think of a layout situation where relative
positioning would really be used... ideas?

[Eric Jarvis]

Neal ne*****@spamrcn.com wrote:

On Sat, 28 Feb 2004 03:43:27 -0000, Eric Jarvis <we*@ericjarvis.co.uk>
wrote:

in general it seems best to start by using relative positioning, and only
go to absolute positioning if the design requires it...a lot of people
seem to work the other way around and I'm not entirely sure why...what am
I missing?
Well, for one I don't fully agree. Floating and absolute positioning each
have their uses, and one cannot do half of what the other does. Rather
than avoid one and use the other, you need to consider which is right for
doing what you want.

That's absolutely true. However there's still the question of which to try
first when either will work.
And relative positioning hasn't shown itself to be useful to me in page
layout with the exception of setting an otherwise static div as positioned
without even moving it. I can't think of a layout situation where relative
positioning would really be used... ideas?

The post I was replying to was an example where absolute positioning
failed when relative positioning worked. I very rarely find any need for
absolute positioning.

--
eric
www.ericjarvis.co.uk
"live fast, die only if strictly necessary"

[Neal]

On Sat, 28 Feb 2004 14:08:20 -0000, Eric Jarvis <we*@ericjarvis.co.uk>
wrote:

The post I was replying to was an example where absolute positioning
failed when relative positioning worked. I very rarely find any need for
absolute positioning.

No, Karl used floating. That's quite different from relative positioning.

[Pierre Jelenc]

Karl Smith <go************@kjsmith.com> writes:

Get rid of that absolute positioning.

#discoleft {float: left;}
#discoright {float: right;}
form {clear: both;}

Thanks, that works but there's something weird. Even though the page still
validates (both HTML and CSS) the links in the main part are all dead:

http://www.marcvonem.com/discography.html

"CD Baby" under each image and in the shopping cart should be links to
various pages on www.cdbaby.com. With Mozilla 1.6 the links are inactive
(no change while hovering, and nothing happens on clicking) even though
they are listed as links in the page info. With older browsers that mess
up the CSS the links are OK, and so are they in text-mode browsers.

The links in the navigation bar at the top are OK everywhere.

Pierre
--
Pierre Jelenc | New on Home Office Records: Ethan Lipton
| www.homeofficerecords.com www.ethanlipton.com
The Gigometer | Pepper Of The Earth: the HO blog
www.gigometer.com | www.homeofficerecords.com/blog

[Harlan Messinger]

rc**@panix.com (Pierre Jelenc) wrote:

Karl Smith <go************@kjsmith.com> writes:

Get rid of that absolute positioning.

#discoleft {float: left;}
#discoright {float: right;}
form {clear: both;}
Thanks, that works but there's something weird. Even though the page still
validates (both HTML and CSS) the links in the main part are all dead:

http://www.marcvonem.com/discography.html

"CD Baby" under each image and in the shopping cart should be links to
various pages on www.cdbaby.com. With Mozilla 1.6 the links are inactive
(no change while hovering, and nothing happens on clicking) even though
they are listed as links in the page info. With older browsers that mess
up the CSS the links are OK, and so are they in text-mode browsers.

As soon as I removed position: fixed; from the #mainbox the links
reactivated.
The links in the navigation bar at the top are OK everywhere.

Pierre

--
Harlan Messinger
Remove the first dot from my e-mail address.
Veuillez ôter le premier point de mon adresse de courriel.

[Karl Smith]

rc**@panix.com (Pierre Jelenc) wrote:

Karl Smith <go************@kjsmith.com> writes:

Get rid of that absolute positioning.

#discoleft {float: left;}
#discoright {float: right;}
form {clear: both;}

Thanks, that works but there's something weird. Even though the page still
validates (both HTML and CSS) the links in the main part are all dead:

http://www.marcvonem.com/discography.html

The links in the navigation bar at the top are OK everywhere.

That's a z-index issue - when links don't work it means they're
"behind" some transparent element with a higher z-index. Check
anything you've absolutely positioned, something is probably a lot
bigger than you intend.

E.g., that menu at the top should have "position: absolute", z-index,
top, width, and height - but *not* left, right, or bottom -
properties set.

--
Karl Smith.
Interim President,
International Global World "Jonathon Frakes
must never work in films again!" Society

[Karl Smith]

rc**@panix.com (Pierre Jelenc) wrote:

...and a full-window fixed div to provide a border.

That's probably the source of your link problems. What's wrong with:

body {border: thin solid red}

?

--
Karl Smith.
Interim President,
International Global World "Jonathon Frakes
must never work in films again!" Society

[Karl Smith]

Eric Jarvis <we*@ericjarvis.co.uk> wrote:

in general it seems best to start by using relative positioning, and only
go to absolute positioning if the design requires it...a lot of people
seem to work the other way around and I'm not entirely sure why...what am
I missing?

Capitalization? ;-)

The poor design of the CSS2 Recommendation itself. It says, there are
three formatting models: flowed, floated, and absolutely positioned.
Reader thinks, "I have three options, which to choose? Better read
on..."

Then under the guise of explaining "normal flow", it starts to waffle
about "line boxes", a "block formatting context" and an "inline
formatting context". Reader's brain starts to numb and he thinks "Too
weird, what's my next option?"

The next section describes floats, but only deals properly with inline
floats - moving an image to the side and letting a paragraph flow
around it. That is the CSS1 equivalent for replacing the HTML align
attribute. Reader thinks that is irrelevant to laying out blocks of
text, "What's my last option?"

Absolute positioning.

All that business of inline formatting will always be there,
regardless of whether the blocks are laid out using flow, floats or
positioning. So the explanations of line boxes and inline formatting
should really be in the chapter that deals with text formatting, not
in the "visual layout model" chapter at all.

But the text chapter comes after the layout chapter, and you really
need to know about the box model before you can position boxes. The
authors of CSS2 assumed their readership would be familiar with CSS1
so they put all the shiny new stuff (positioning) at the front. That
was a mistake (that CSS 2.1 should have fixed).

If the box model was explained in the text chapter, and that was read
before the layout chapter, people's eyes wouldn't glaze over while
they were trying to read about "normal flow".

--
Karl Smith.
Interim President,
International Global World "Jonathan Frakes
must never work in films again!" Society

[Karl Smith]

Neal <ne*****@spamrcn.com> wrote:

Eric Jarvis <we*@ericjarvis.co.uk> wrote:

The post I was replying to was an example where absolute positioning
failed when relative positioning worked. I very rarely find any need for
absolute positioning.

No, Karl used floating. That's quite different from relative positioning.

True, but I took Eric's comments in a more general sense of, "Why do
people start with the most complex possibility, before fully exploring
simpler options?"

I don't think people are masochists, as Eric is possibly implying. I
think the CSS2 rec. itself is to blame.

--
Karl Smith.
Interim President,
International Global World "Jonathon Frakes
must never work in films again!" Society

[Eric Jarvis]

Karl Smith go************@kjsmith.com wrote:

Neal <ne*****@spamrcn.com> wrote:

Eric Jarvis <we*@ericjarvis.co.uk> wrote:

The post I was replying to was an example where absolute positioning
failed when relative positioning worked. I very rarely find any need for
absolute positioning.

No, Karl used floating. That's quite different from relative positioning.

True, but I took Eric's comments in a more general sense of, "Why do
people start with the most complex possibility, before fully exploring
simpler options?"

I don't think people are masochists, as Eric is possibly implying. I
think the CSS2 rec. itself is to blame.

I wasn't implying anything...it was pure curiousity...whilst I do my best
to work out a logical design process, there's always the possibility that
I've completely missed something...so I was wondering if there was a
genuine advantage to starting a layout by looking at absolute positioning

your explanation, however, makes perfect sense

--
eric
www.ericjarvis.co.uk
"live fast, die only if strictly necessary"

[Pierre Jelenc]

Karl Smith <go************@kjsmith.com> writes:

That's a z-index issue - when links don't work it means they're
"behind" some transparent element with a higher z-index. Check
anything you've absolutely positioned, something is probably a lot
bigger than you intend.

It is the div called "mainbox" which is intended to provide a 2px border.
If I remove it things are OK, but if I leave it in, no matter what its
z-index, it blocks the links unless I make the z-index negative, but then
the border disappears, behind <body> I suppose.

How do I make a border around the window, keeping the scrollbars where and
when needed? If I put a border in body, it frames the entire contents, not
exactly the window.

Pierre
--
Pierre Jelenc | New on Home Office Records: Ethan Lipton
| www.homeofficerecords.com www.ethanlipton.com
The Gigometer | Pepper Of The Earth: the HO blog
www.gigometer.com | www.homeofficerecords.com/blog

[Pierre Jelenc]

Harlan Messinger <hm*******************@comcast.net> writes:

As soon as I removed position: fixed; from the #mainbox the links
reactivated.

Right, but then the framing border collapses into a single line at the
top, it does not surround the window anymore.

Pierre
--
Pierre Jelenc | New on Home Office Records: Ethan Lipton
| www.homeofficerecords.com www.ethanlipton.com
The Gigometer | Pepper Of The Earth: the HO blog
www.gigometer.com | www.homeofficerecords.com/blog

[Pierre Jelenc]

Karl Smith <go************@kjsmith.com> writes:

rc**@panix.com (Pierre Jelenc) wrote:

...and a full-window fixed div to provide a border.

That's probably the source of your link problems. What's wrong with:

body {border: thin solid red}

That's a border around the contents, less than a window or more than a
window depending on how long the contents are. They want a frame around
the entire window, and the contents accessible with scrollbars if they
overflow the window size.

I suppose I could use 4 separate divs stuck along the 4 edges but that
would be a really ugly hack.

Pierre
--
Pierre Jelenc | New on Home Office Records: Ethan Lipton
| www.homeofficerecords.com www.ethanlipton.com
The Gigometer | Pepper Of The Earth: the HO blog
www.gigometer.com | www.homeofficerecords.com/blog