layout problem

Hi florent,
Sorry I'm not sure what you are trying to do.
Are you trying to separate the menu from the other columns?
Like have the menu floated left and the rest centered together.

yes that's exactly what i want !

and ideally the menu would be at the bottom of the code for user agents not using css (but at the top of the page for css agents)

any idea on how to acomplish this :?:

this way i could write my code in logical structure, not layout structure (have the menu appear at the bottom if no css is applied, for accessibility reasons)
What you can do is put the menu element at the end of the body element, (nested only in the body), and remove the float rule from it along with any
margining or other rules used elsewhere to accomodate the float. Now the other elements should center the way you want.

Then make the menu "position: absolute;" and give it appropriate "left" and "top" values to put it where you want.
HTH

thanks for the tip big john !

i've tried this already, but the problem when i do this is i can't position it relatively to the center anymore (so that the menu stays at the same distance of the centered column, to its left). when the screen width changes, the menu stays put and overlaps the content column or other bad things like that...

any other ideas ?

Okay, then you can remove the width from the center section,
and use % sized side margins on it to make side space. Since
that side space is a % of the body, your AP side col can also
be given a % width suitable to fit within that % margin space.

Scaling will not change that relationship. However, the center
col can be different true widths depending on screen size, so
that might affect contents within the center col.

yup that works, but you're right there is a problem with having a non fixed width for div#content.

i'm trying something different : positionning div#menu relatively to div#content (forget about putting div#menu at the end of the source for now ) using this code :

#menu {
float: left;
position : relative;
left : -125px;
width : 100px;
}

however, even though the div#menu is moved to the left of the div#content, the text inside the div#content seems to wrap around an invisible div matching the "unpositionned" div#menu. get it ?

it goes like this :

--------  -----------------------------------
| menu |  |         content content content |
| menu |  |         content content content |
| menu |  |         content content content |
--------  |         content content content |
          | content content content content |
          | content content content content |
          | content content content content |
          | content content content content |
          -----------------------------------

how do i get rid of this blank space ?

No need to float all those elements. Just float the menu box, and
then, instead of relatively shifting it, use a negative left margin.

This won't leave a hole. However, keep the box rel positioned
anyway. IE won't show it outside its container unless you do.
Just don't actually use the rel positioning to shift the box.
Let the neg margining do that.

BTW, it sounds like you are using positive left margins, not
negative, to move the main elements to the right. Neg left
margining moves elements to the left.

thanks big john for keeping on helping me !

i'm still not done :oops: . i've tried negative left margin but then the div#content is moved as if it was beneath the div#menu, like this :

          -----------------------------------
          | header! header! header! header! | 
          -----------------------------------
--------
| menu |
| menu |
| menu |
--------
          -----------------------------------
          | content content content content | 
          | content content content content | 
          | content content content content | 
          | content content content content | 
          | content content content content | 
          | content content content content | 
          | content content content content | 
          -----------------------------------

position : relative doesn't seem to help either...

here's my stylesheet now :

body {
background : #c1d5ef;
color : #000000;
font-family : verdana, arial, sans-serif;
font-size : 12px;
margin : 10px;
padding : 0;
text-align : center;
}
#header {
background : #b0c4de;
border : 1px solid #000000;
font-family : times new roman, serif;
font-size : 18px;
font-style : oblique;
font-weight : bold;
margin : 10px auto;
padding : 5px;
text-align : left;
width : 450px;
}
#menu {
position : relative;
top : 0;
border : 1px solid #000000;
background : #b0c4de;
font-size : 10px;
font-weight : bold;
line-height : 20px;
margin : 10px 0 0 -600px;
padding : 5px;
text-align : center;
width : 100px;
}
#content {
background : #b0c4de;
border : 1px solid #000000;
margin : 10px auto;
min-height : 100px;
padding : 5px;
text-align : justify;
width : 450px;
}
#footer {
background : #b0c4de;
border : 1px solid #000000;
font-size : 10px;
margin : 10px auto;
padding : 5px;
text-align : center;
width : 450px;
}
a, a:visited {
background : transparent;
color : #ffffff;
text-decoration : none;
}
a:active, a:hover {
background : transparent;
border-top : 1px solid;
border-bottom : 1px solid;
color : #ffffff;
text-decoration : none;
}
#menu a:active, #menu a:hover {
background : #ffffff;
border : 2px solid #ffffff;
color : #b0c4de;
text-decoration : none;
}
img {
border : 0;
}
ul {
list-style : none;
}

and here's my source page :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<title>title</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" media="screen" href="sadstyle.css" />
</head>

<body>

<h1 id="header">h1 id="header"</h1>

<ul id="menu">
	<li>menu item</li>
	<li>menu item</li>
	<li>menu item</li>
	<li>menu item</li>
	<li>menu item</li>
	<li>menu item</li>
</ul>

<div id="content">
	
	<p>div id="content" div id="content" div id="content" div id="content" div id="content" div id="content" div id="content" div id="content" div id="content" div id="content" div id="content" div id="content" div id="content" div id="content" div id="content" div id="content" div id="content" div id="content" div id="content"</p>
		
</div>

<div id="footer">div id="footer"div id="footer"div id="footer"</div>

</body>
</html>

Why have you stopped floating the menu?

well if i leave the float : left, the div#menu gets stuck to the left of the screen (i don't want him there, i want him to stick to the left of the div#content) and the div#content is pushed to the right by a certain amount of pixels (don't understand why and don't know how much pixels...)

here's a screenshot of the result :

using this style :

body {
background : #c1d5ef;
color : #000000;
font-family : verdana, arial, sans-serif;
font-size : 12px;
margin : 10px;
padding : 0;
text-align : center;
}
#header {
background : #b0c4de;
border : 1px solid #000000;
font-family : times new roman, serif;
font-size : 18px;
font-style : oblique;
font-weight : bold;
margin : 10px auto;
padding : 5px;
text-align : left;
width : 450px;
}
#menu {
float : left;
position : relative;
top : 0;
border : 1px solid #000000;
background : #b0c4de;
font-size : 10px;
font-weight : bold;
line-height : 20px;
margin : 10px 0 0 0px;
padding : 5px;
text-align : center;
width : 100px;
}
#content {
background : #b0c4de;
border : 1px solid #000000;
margin : 10px auto;
min-height : 100px;
padding : 5px;
text-align : justify;
width : 450px;
}

[snip]

Silly me, I forgot about that exquisite little IE "behavior".
You see, a good browser shows your page pretty close to
what you want with perhaps some margin tweaking needed.

But since we are talking about IE/win this does not apply.
That browser is being triggered into a proprietary and
totally non-standard float model, and the trigger is the
width on the #content div. That's right, without that width
IE would display exactly like better browsers.

To make it cross-browser, you will have to remove the
widths from the main divs and use side margining instead.
I hate to be the one to break this, but IE forces many many
compromises like this, and for no good reason I can fathom.

Here's a reading assignment that will fully explain
what is going on here:

http://www.positioniseverything.net/articles/towards.html

And a live demo of the effect:

http://www.positioniseverything.net/floatmodel.html

Please don't eat while studying these unless your stomach
is made of cast iron...

once again, thanks for keeping up helping !

anyway, this is way too complicated, i give up ! back to the old layout, i'll just let ie carry on with its annoying bugs.

btw, netscape also bugs a lot on my site : check out http://sadmusic.free.fr/photos.html and hover the images... terrible isn't it ? same thing on the lineup page, only uglier because i use transparent gifs...