Jasper Kuperus wrote:
Recently I've been working on the accessibility of one of my websites
(http://www.overhoorjesuf.nl/). I've been through the whole website with
a blind internet user. Out of accessibility reasons its better to switch
the menu and content in the source from place (#menu and #content).
Now that doesn't seem to be a problem. But when I do that, the menu will
get displayed underneath the content. Of course that doesn't really
surprise me, because the width of #content has a width of 100% and the
menu has a width of 182px. That just doesn't fit next to eachother when
you float. Now what does surprise me is the fact that this worked when I
had #menu above #content in my source.
This is how floats work. When #menu comes before #content and you float
#menu left, it moves as far to the left as it can and #content flows up
around it. Note that I didn't say that #menu moves up. It's #content
that moves up to wrap around #menu. So, when #menu comes after #content
and you float #menu left, it does the exact same thing -- moves as far
to the left as it can. It doesn't move up because that's not what it
should do as a float. Any content that comes after it should move up
beside it, but it shouldn't move up itself.
Does that help you understand how floats work a little better?
Now I already figured something out, but that brought another problem
with it. I gave #menu the following rules in addition:
position: absolute;
top: 141px;
Now this works perfectly. BUT... When my content div isn't high enough,
this will make my menu go over my footer. I've been thinking for a while
on this, but can't really find a fast solution to fix this problem. So,
does someone have a solution for this? I've made a testpage in which I
switched the menu and the content, you can find it on:
http://curunir.nl/OHJS/template.php.
I would use negative margins with floats. There are two different
approaches: one that accommodates large content well and one that
doesn't. Here are sample pages of each:
http://www.pixelsurge.com/experiment/negative_margins_1.html
http://www.pixelsurge.com/experiment/negative_margins_2.html
Zoe
--
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
