Dissociated navigation bar and absolute positioning

Vincent

First, here is a page to help you figure out what I'm talking about:
http://relinquiere.free.fr/test.html

As you can see in the source of this page, the structure is the following :
- a banner
- a skip-to-navigation-links div
- a main div with :
- a div with content
- navigation links in a single ul
- a footer

The navigation bar is made of three levels of options, but is kind of
dissociated in the stylesheet: the first level should appear on top of
the page, and the next two levels should appear on the left of the page,
next to the content (on the right).

This works pretty well *if* the content is longer than the side bar, but
if this fails, the footer and the side bar overlap (as in the example).

Can anyone think of a way to fix this, or should I give up and split my
single navigation bar into two lists ?

Thanks.

Jul 20 '05 #1

Subscribe Post Reply

3414

Neal

On Fri, 16 Jan 2004 16:05:08 +0000, Vincent <vincent.@wanadoo.fr> wrote:

First, here is a page to help you figure out what I'm talking about:
http://relinquiere.free.fr/test.html

As you can see in the source of this page, the structure is the
following :
- a banner
- a skip-to-navigation-links div
- a main div with :
- a div with content
- navigation links in a single ul
- a footer

The navigation bar is made of three levels of options, but is kind of
dissociated in the stylesheet: the first level should appear on top of
the page, and the next two levels should appear on the left of the page,
next to the content (on the right).

Here's what you could do.

<body>
<div id="header">
Header Stuff
</div>
<div id="main">
Everything that goes in the big box.
</div>
<div id="nav">
The left nav bar info
</div>
<div id="footer">
The footer stuff
</div>
</body>

#header - no set positioning, just default static.

#main - float:right;

#nav - float:left; (could also float: right; if you prefered, with margins
set properly)

#footer - clear: both;

Use percentages for widths on the two columns. Add margins etc. to the
divs to space them as you'd like.

Jul 20 '05 #2

Vincent

Neal wrote:

On Fri, 16 Jan 2004 16:05:08 +0000, Vincent <vincent.@wanadoo.fr> wrote:

Here's what you could do.

<body>
<div id="header">
Header Stuff
</div>
<div id="main">
Everything that goes in the big box.
</div>
<div id="nav">
The left nav bar info
</div>
<div id="footer">
The footer stuff
</div>
</body>

#header - no set positioning, just default static.

#main - float:right;

#nav - float:left; (could also float: right; if you prefered, with
margins set properly)

#footer - clear: both;

Use percentages for widths on the two columns. Add margins etc. to the
divs to space them as you'd like.

Thanks, but this is not quite what I want. Maybe I wasn't clear in my
explanations, that's why I joined an example at
http://relinquiere.free.fr/test.html.

The navigation bar is basically a list:
<ul>
<li>A<ul1/></li>
<li>B<ul2/></li>
<li>C<ul3/></li>
</ul>

I'd like to display A, B, C in a horizontal menu, on top of the page
(below the banner) and the corresponding sublist as a secondary vertical
menu on the left, i.e. if the user selected option A, he retrieves a
page P1 from the server and ul1 should appear as a secondary menu, if he
selects B, he gets P2 and ul2 is displayed, and so on.

I know this may sound weird, but the idea behind that is that, according
to the stylesheet, I could display my navigation list as two dissociated
menus as described above or as a single multi-level menu. I think that
would be great, but maybe this is just impossible, because of this
overlapping problem I have with the footer.

Jul 20 '05 #3

Neal

On Sun, 18 Jan 2004 11:49:07 +0000, Vincent <vincent.@wanadoo.fr> wrote:

I'd like to display A, B, C in a horizontal menu, on top of the page
(below the banner) and the corresponding sublist as a secondary vertical
menu on the left, i.e. if the user selected option A, he retrieves a
page P1 from the server and ul1 should appear as a secondary menu, if he
selects B, he gets P2 and ul2 is displayed, and so on.

Right. I think you want it so if the user chooses Menu 1 from your top bar
(#mainbar), the sidebar (#scndbar) should show the corresponding submenu
structure for that menu item. At the same time, you want the unstyled page
to show the whole structure.

What you're trying to do is pull a section out to float at a different
location than it is at, which is the problem. If you want the footer to be
clear of the #scndbar *and* the content div (where one might be taller or
shorter than the other, depending on content), you're going to have to
float #scndbar. Since the height is content-dependent, and you can't float
something in a place it isn't in the code, you're stuck.

Next best thing is extracting the primary list and setting it first, then
use the secondary etc. list for the left bar and put it next, after the
list. It will be disassociated in the unstyled page but you can float it,
and have that footer work out where you like it. (Alternately you can lose
the footer, but I don't think you want that.)

Sorry, it's the best I can do. Looks to me like you have to give something
up - and the nesting of the secondary list in the unstyled HTML seems to
be what's easiest to give up on.

Sure wish there was a positioning possibility to put a footer at the
bottom of all content regardless, but I wish for many things.

Jul 20 '05 #4

ICHwesen

First: neat idea! I like your approach, dissasociating style from
content in this strict manner.

Second: tricky problem!
My idea is surely not perfect, but I can not think of a better:
Try it the other way round: put the whole navigation bar on the left
side (floating, not absolutely positioned) an just position the first
level of list-items abolutely to the position at the top of the page.
Now the navigation-ul should prevent the footer from overlaying the menu
and the first level is in the desired position.

I have not got the time to check it out, but the remaining problem
should be to put the sub-levels of the first-level-li back into the
top-ul to prevent it from beein smaller than its content. So you may
have to position the links inside the first-level list-items instead of
the list-items themselves absolutely.

I hope this helped more than it confused!

ICHwesen

Jul 20 '05 #5

Vincent

Neal wrote:

On Sun, 18 Jan 2004 11:49:07 +0000, Vincent <vincent.@wanadoo.fr> wrote:
Right. I think you want it so if the user chooses Menu 1 from your top
bar (#mainbar), the sidebar (#scndbar) should show the corresponding
submenu structure for that menu item. At the same time, you want the
unstyled page to show the whole structure.
This is it, exactly.
Next best thing is extracting the primary list and setting it first,
then use the secondary etc. list for the left bar and put it next, after
the list. It will be disassociated in the unstyled page but you can
float it, and have that footer work out where you like it. (Alternately
you can lose the footer, but I don't think you want that.)
You mean, I could have two different lists, one for the main bar, and
one for the secondary bar, right ? Yes, I thought of that too, but it's
what I'd like to avoid: I wish I could keep all the navigation stuff
bundled together. Well, if possible...
Sorry, it's the best I can do. Looks to me like you have to give
something up - and the nesting of the secondary list in the unstyled
HTML seems to be what's easiest to give up on.

Thanks anyway !

Jul 20 '05 #6

Vincent

ICHwesen wrote:

First: neat idea! I like your approach, dissasociating style from
content in this strict manner.
Thanks ! I like the idea too :-) but as you can see, it has some severe
drawbacks !
Second: tricky problem!
You bet !
My idea is surely not perfect, but I can not think of a better:
Try it the other way round: put the whole navigation bar on the left
side (floating, not absolutely positioned) an just position the first
level of list-items abolutely to the position at the top of the page.
Now the navigation-ul should prevent the footer from overlaying the menu
and the first level is in the desired position.

I have not got the time to check it out, but the remaining problem
should be to put the sub-levels of the first-level-li back into the
top-ul to prevent it from beein smaller than its content. So you may
have to position the links inside the first-level list-items instead of
the list-items themselves absolutely.

I'm not sure I understood you. Let's take an example, if you don't mind.
Here is a two-level list (this is enough for our discussion):

<ul id="mainbar">
<li>A
<ul id="second1"><li>A1</li><li>A2</li><li>A3</li></ul>
</li>
<li>B
<ul id="second2"><li>B1</li><li>B2</li><li>B3</li></ul>
</li>
</ul>

The goal is to have options A, B horizontally displayed on top of the
page, while either list #second1 or #second2 is vertically shown at left
of the page, depending on the user having chosen option A or B.

If I'm right, you suggested me to float #mainbar on the left, then to
absolutely position the li A and B at the top of the page, and finally
to restore #second1 or #second2 back on the left, inside #mainbar.

Wow ! This *is* tricky ! Then I need even more of your help to achieve
that...

Jul 20 '05 #7

Lauri Raittila

In article Vincent wrote:

First, here is a page to help you figure out what I'm talking about:
http://relinquiere.free.fr/test.html The navigation bar is made of three levels of options, but is kind of
dissociated in the stylesheet: the first level should appear on top of
the page, and the next two levels should appear on the left of the page,
next to the content (on the right).
Quite a nice idea.
This works pretty well *if* the content is longer than the side bar, but
if this fails, the footer and the side bar overlap (as in the example).
I don't think there is any way to deal with this whitout extra markup and
fixed measure for height of menu. At least I can't find way. You can put
extra div to .content, and float it left, and make it height same as your
menu.

Example (that is not tested on IE, propably needs some tweaking):
http://www.student.oulu.fi/~laurirai/www/css/splitmenu/

Biggest problem is that it requires height of menu to be known.
should I give up and split my single navigation bar into two lists ?

Rather make your footer narrower. I'm not big fan of over long navigation
menus, but this seems good way to do one.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Jul 20 '05 #8

Michael Rozdoba

Lauri Raittila wrote:

I don't think there is any way to deal with this whitout extra markup and
fixed measure for height of menu. At least I can't find way. You can put
extra div to .content, and float it left, and make it height same as your
menu.

Example (that is not tested on IE, propably needs some tweaking):
http://www.student.oulu.fi/~laurirai/www/css/splitmenu/
Works fine in Mozilla Firebird 0.7.

IE 6.0 messes it up thanks to its insistence on large default line
spacing between list items. It requires a height of 34em on the floated
div, rather than 23em.
Biggest problem is that it requires height of menu to be known.

I assume styling the list fully will at least avoid the IE problem, so
that there doesn't remain any browser specific problems, only the menu
height knowledge one?

How does one reduce the spacing in IE on list items? line-height will do
it, but only with silly small values which don't work in other browsers.
Margin & padding don't seem to be the problem. Furthermore, adding a
border to see what's going on really confuses things, as the added
spacing then vanishes :/

--
Michael
m r o z a t u k g a t e w a y d o t n e t

Jul 20 '05 #9

Lauri Raittila

In article Michael Rozdoba wrote:

Lauri Raittila wrote:
I don't think there is any way to deal with this whitout extra markup and
fixed measure for height of menu. At least I can't find way. You can put
extra div to .content, and float it left, and make it height same as your
menu.

Example (that is not tested on IE, propably needs some tweaking):
http://www.student.oulu.fi/~laurirai/www/css/splitmenu/
Works fine in Mozilla Firebird 0.7.

IE 6.0 messes it up ... It requires a height of 34em on the floated
div, rather than 23em.

Was that only problem? Then it was surprisingly easy ;-)

Biggest problem is that it requires height of menu to be known.

I assume styling the list fully will at least avoid the IE problem, so
that there doesn't remain any browser specific problems, only the menu
height knowledge one?

I think so.
How does one reduce the spacing in IE on list items? line-height will do
it, but only with silly small values which don't work in other browsers.
I looked, and it was this good old white space bug. It works now in
IE5.5, not pixel perfectly, but that could be fixed using Tantek hack. I
wouldn't bother though, as it doesn't break. (after I changed it a
bit...)
Margin & padding don't seem to be the problem. Furthermore, adding a
border to see what's going on really confuses things, as the added
spacing then vanishes :/

Try background color or outline instead border next time, they work even
when border changes relations.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Jul 20 '05 #10

Michael Rozdoba

Lauri Raittila wrote:

In article Michael Rozdoba wrote:
[snip]

IE 6.0 messes it up ... It requires a height of 34em on the floated
div, rather than 23em.

Was that only problem? Then it was surprisingly easy ;-)

<g>

[snip]

How does one reduce the spacing in IE on list items? line-height
will do it, but only with silly small values which don't work in
other browsers.

I looked, and it was this good old white space bug.

[looks up ominous sounding white space bug]

:-/ Eeugh, oh dear, not seen that before. Something else to keep an eye
out for.
It works now in IE5.5, not pixel perfectly, but that could be fixed
using Tantek hack. I wouldn't bother though, as it doesn't break.
(after I changed it a bit...)
Now fine in IE6.0 too; alas not in Firebird 0.7 anymore - the footer top
border lies at about the same height as the baseline of the "Menu 3.4.1"
text.

Margin & padding don't seem to be the problem. Furthermore, adding
a border to see what's going on really confuses things, as the
added spacing then vanishes :/

Try background color or outline

[Looks up outline -> http://www.w3.org/TR/REC-CSS2/ui.html#dynamic-outlines]

Ah, I didn't know that existed. Very handy :)
instead border next time, they work even when border changes
relations.

I wasn't keen on using border due to positional shifts - is that what
you mean by relations (sorry, new to all this), however I didn't know
about outline.

Thanks for bringing all these problems to my awareness. Seems like
reading this group is even more of an aid to learning CSS than I expected :)

--
Michael
m r o z a t u k g a t e w a y d o t n e t

Jul 20 '05 #11

Lauri Raittila

In article Michael Rozdoba wrote:

Lauri Raittila wrote:
In article Michael Rozdoba wrote:
[snip]
IE 6.0 messes it up ... It requires a height of 34em on the floated
div, rather than 23em.

Was that only problem? Then it was surprisingly easy ;-)

<g>

[snip]
How does one reduce the spacing in IE on list items? line-height
will do it, but only with silly small values which don't work in
other browsers.

I looked, and it was this good old white space bug.

[looks up ominous sounding white space bug]

:-/ Eeugh, oh dear, not seen that before. Something else to keep an eye
out for.

Then you must be new. White space bug is like margin collapsing - last
thing people understand to check. Difference is that white space bug is
actually bug, not correct behaviour ;-)

It works now in IE5.5, not pixel perfectly, but that could be fixed
using Tantek hack. I wouldn't bother though, as it doesn't break.
(after I changed it a bit...)

Now fine in IE6.0 too; alas not in Firebird 0.7 anymore - the footer top
border lies at about the same height as the baseline of the "Menu 3.4.1"
text.

Need to check that. I can't understand reason, as I don't think I changed
anythig that could change something.

Try background color or outline

[Looks up outline -> http://www.w3.org/TR/REC-CSS2/ui.html#dynamic-outlines]

Ah, I didn't know that existed. Very handy :)

OTOH, they only work on Opera AFAIK.
I wasn't keen on using border due to positional shifts - is that what
you mean by relations[*] , however I didn't know
about outline.
Borders also affect on margin collapsing.
Thanks for bringing all these problems to my awareness. Seems like
reading this group is even more of an aid to learning CSS than I expected :)

I don't think there is any other way to learn CSS well exept try and
error and serious spec reading. Much easier to read this group.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Jul 20 '05 #12

Michael Rozdoba

Lauri Raittila wrote:

In article Michael Rozdoba wrote:
[white space bug]
Then you must be new.
Very. Been meaning to learn HTML for years, but just got into it a few
weeks ago when I had to write an assignment for a basic HTML
introductory course. I got a bit carried away & when I discovered CSS,
couldn't resist using it, even though it wasn't part of the course (hope
I don't get marked down).

The result's at http://osiris.sunderland.ac.uk/~cd2mro/. I'm still
tinkering with it, so the latest version is at
http://osiris.sunderland.ac.uk/~cd2mro/final/
White space bug is like margin collapsing - last thing people
understand to check. Difference is that white space bug is actually
bug, not correct behaviour ;-)
Easy to tell them apart - if it's in IE there seems to be a 99% chance
it's a bug; if it's Gecko & Opera, almost certainly is the spec.
Need to check that. I can't understand reason, as I don't think I
changed anythig that could change something.
Sorry I can't help - could it be anything to do with differing default
values for something that's not been specified explicitly? I'm afraid
when I said it previously worked in Firebird, I just meant it looked
okay (ie no overlap & not an overly large gap between navigation bar &
footer) - I didn't do a comparison of positioning down to the pixel
level (that doesn't usually bother me, so I don't look or aim for it). I
reckon I would have noticed a difference of over an em, mind you.

If you have the original version & put it back on the server, I'll have
another look, if you don't have the time or a gecko based browser handy.

[the joy of outline]
OTOH, they only work on Opera AFAIK.
[checks]

Bum. You're right of course; ignored by IE6.0 & Firebird 0.7 :-(

[snip]
Borders also affect on margin collapsing.

Ah, okay.

I do read the spec, but only as & when I have time or a problem. Bits of
it are sinking in, but I'm not yet familiar with much of it. It is a
surprisingly easy to read document though.

Thanks for bringing all these problems to my awareness. Seems like
reading this group is even more of an aid to learning CSS than I
expected :)

I don't think there is any other way to learn CSS well exept try and
error and serious spec reading. Much easier to read this group.

Combined, they work well. I certainly had a lot of "fun" getting my
small assignment to work as I intended & I only caught the peekaboo bug
after the submission date.

--
Michael
m r o z a t u k g a t e w a y d o t n e t

Jul 20 '05 #13

Lauri Raittila

In article Michael Rozdoba wrote:

Lauri Raittila wrote:
In article Michael Rozdoba wrote:
[white space bug]
Then you must be new.

Very. Been meaning to learn HTML for years, but just got into it a few
weeks ago when I had to write an assignment for a basic HTML
introductory course. I got a bit carried away & when I discovered CSS,
couldn't resist using it, even though it wasn't part of the course (hope
I don't get marked down).

It really don't make sence to tech HTML whitout CSS. After all, it takes
4 hours to tech basics of html to 13 year old newbie. If that 13 year old
is interested, he'll learn it by himself. (it is harder to tech to
someone older, they want to make webpages just like all others in net
unfortunately).
The result's at http://osiris.sunderland.ac.uk/~cd2mro/. I'm still
tinkering with it, so the latest version is at
http://osiris.sunderland.ac.uk/~cd2mro/final/
You should em unit for navigation bar width. Now it breaks on small
window sizes... At least min-width.

| Make plentiful use of whitespace. Narrower columns of text, clearly
| delimited with empty space, either side, are much easier to read.

There is a limit. If it goes under 40-50 chars, it starts to be too
short. Max-width is better than big margins (but don't work on IE). Big
margins should be done using percentages, so that they dont take overly
much space on smaller window. And if window is bigger, they take more
space.

White space bug is like margin collapsing - last thing people
understand to check. Difference is that white space bug is actually
bug, not correct behaviour ;-)

Easy to tell them apart - if it's in IE there seems to be a 99% chance
it's a bug; if it's Gecko & Opera, almost certainly is the spec.

White space bug also applies to Opera and Gecko, but less often (and even
more hard to think times). And sometimes something that look like white
space bug is really white space feature...

Need to check that. I can't understand reason, as I don't think I
changed anythig that could change something.

Sorry I can't help - could it be anything to do with differing default
values for something that's not been specified explicitly? I'm afraid
when I said it previously worked in Firebird, I just meant it looked
okay (ie no overlap & not an overly large gap between navigation bar &
footer) -

I didn't do a comparison of positioning down to the pixel
level (that doesn't usually bother me, so I don't look or aim for it). I
reckon I would have noticed a difference of over an em, mind you.
I don't care pixel perfectness much either, but it is challenge. That
layout would have been much easier to do whiout being pixel perfect.
If you have the original version & put it back on the server, I'll have
another look, if you don't have the time or a gecko based browser handy.
Well, I checked it now and noticed that I had but margin between footer
and other content to wrong place. Also happened in Opera, I just didn't
notice as my content was too long.

It was on margin-top on footer, and of course it doesn't affect to space
between float and cleared element.
Ah, okay.

I do read the spec, but only as & when I have time or a problem. Bits of
it are sinking in, but I'm not yet familiar with much of it. It is a
surprisingly easy to read document though.

Yes, especially compared to HTML spec. I have not seen any CSS tutorial
etc that I would think is clearer than spec. Even if, or maybe just
because there is lots of totally undefined things.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Jul 20 '05 #14

Stan Brown

It seems "Lauri Raittila" wrote in
comp.infosystems.www.authoring.stylesheets in article
<MP************************@news.cis.dfn.de>:

In article Michael Rozdoba wrote:
Lauri Raittila wrote:
> Try background color or outline

[Looks up outline -> http://www.w3.org/TR/REC-CSS2/ui.html#dynamic-outlines]

Ah, I didn't know that existed. Very handy :)

OTOH, they only work on Opera AFAIK.

A quick test shows that Mozilla 1.4 doesn't support them.

But for debugging purposes, Mozilla does have DOM inspector, and in
that mode displays a box around any selected element.

--
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/

Jul 20 '05 #15

Michael Rozdoba

Lauri Raittila wrote:

In article Michael Rozdoba wrote:
[snip]
It really don't make sence to tech HTML whitout CSS.
I'm inclined to agree.
After all, it takes 4 hours to tech basics of html to 13 year old
newbie. If that 13 year old is interested, he'll learn it by himself.
We had about 12 hours (it ought to have been 18), plus our own time;
this module was one of three, forming one semester of a part time
Foundation degree course running over 3 years.
(it is harder to tech to someone older, they want to make webpages
just like all others in net unfortunately).
Grown ups are often annoying :)

The result's at http://osiris.sunderland.ac.uk/~cd2mro/. I'm still
tinkering with it, so the latest version is at
http://osiris.sunderland.ac.uk/~cd2mro/final/

You should em unit for navigation bar width. Now it breaks on small
window sizes... At least min-width.

At the time I was happy to get something that looked reasonable much of
the time. Now I don't like a lot of what I did, but would have to start
from scratch to change it, so that will have to wait for my next experiment.

For the time being I've added a min-width to the navigation bar & main
h2 headers. I tried a fixed width, but didn't like how it looked at
small sizes.

Shame one can't specify min & max values for properties
other than width - margin & padding would be useful. Shame even
min-width doesn't work in IE :/
| Make plentiful use of whitespace. Narrower columns of text, clearly
| delimited with empty space, either side, are much easier to read.
There is a limit. If it goes under 40-50 chars, it starts to be too
short.
Generally, I'd agree.
Max-width is better than big margins (but don't work on IE).
As a means to limit text width, I think I'd go along with that.
Big margins should be done using percentages, so that they dont take
overly much space on smaller window. And if window is bigger, they
take more space.
Definitely agreed.

A min, norm & max triple for margins would be handy.

It might be useful to be able to specify sizes as a function of other
object sizes, but I wouldn't want to introduce complexity for the same
of it.

White space bug is like margin collapsing - last thing people
understand to check. Difference is that white space bug is
actually bug, not correct behaviour ;-)

Easy to tell them apart - if it's in IE there seems to be a 99%
chance it's a bug; if it's Gecko & Opera, almost certainly is the
spec.

White space bug also applies to Opera and Gecko,

:-/

I know they have bugs, obviously, but that seems an unnecessary one, not
that I've ever tried to write a parser for HTML.
but less often (and even more hard to think times). And sometimes
something that look like white space bug is really white space
feature...
Complexity can make things interesting.

[snip]
I don't care pixel perfectness much either, but it is challenge. That
layout would have been much easier to do whiout being pixel perfect.

I can imagine

[snip]
Well, I checked it now and noticed that I had but margin between
footer and other content to wrong place. Also happened in Opera, I
just didn't notice as my content was too long.

It was on margin-top on footer, and of course it doesn't affect to
space between float and cleared element.

Okay, I'll take your word for it :)

Glad to see it sorted.

I do read the spec, but only as & when I have time or a problem.
Bits of it are sinking in, but I'm not yet familiar with much of
it. It is a surprisingly easy to read document though.

Yes, especially compared to HTML spec. I have not seen any CSS
tutorial etc that I would think is clearer than spec. Even if, or
maybe just because there is lots of totally undefined things.

Undefined in the spec?

I've looked at a couple of CSS books, but not found anything I've liked
so far. I've the new version of Meyer's Definitive Guide to CSS on order
& am hopeful it will be a worthwhile purchase.

--
Michael
m r o z a t u k g a t e w a y d o t n e t

Jul 20 '05 #16

Vincent

Lauri Raittila wrote:

Example (that is not tested on IE, propably needs some tweaking):
http://www.student.oulu.fi/~laurirai/www/css/splitmenu/
Thanks, I haven't had time to test your solution yet (I've been busy on
some other stuff these days), but it looks great ! Exactly what I needed.

Rather make your footer narrower. I'm not big fan of over long navigation
menus, but this seems good way to do one.

Me neither, but the point is that this solution provides many
interesting positioning possibilities (one top-level navigation bar,
plus two-level navigation list, three-level single menu, horizontal tabs
with sub-options, plus one single-level dissociated list, etc.): this is
why I wanted to give it a try.

Thanks a lot for your help.

Vincent.

Jul 20 '05 #17

Dissociated navigation bar and absolute positioning

Similar topics