Je débutte dans l'utilisation des div et je voulais faire un exercice tout bête, à savoir faire une page dans ce modèle là:
 

 
le tout étant centré dans la page. Je suis arrivée à placer correctement les div1 et 2 en utilisation le position:relative par rapport à la page.
 
malheureusement, pour la 3e, ca bloque. si j'utilise le position relative par rapport à la div2, il vient trop bas. si je le mets en position:absolute par rapport à la page, j'ai des décallage.
 
Alors d'une part, comment faire pour placer correctement mes div? et d'autre part, est-ce que mon code est correct? (autant faire juste dès le départ). Merci de votre aide.
 
voici le code:

tu devrais ajouter un margin-top:-300 dans la définition de ton 3è div
 
sinon j'aurais écrit les styles comme ceci:
 

 
et les div comme cela:

bof, je prefere avec les id moi.
pas besoin d'une classe quand ca concerne un seul élement.
 
par contre, les attributs en minuscules, c'est mieux

oui c'était ca, merci, c'était tout bête en fait  
j'ai hésité à utiliser la class ou l'id, j'ai opté pour l'id car ces div seraient uniques. dans quel cas peut-on utiliser id plutot que class?

les id, je les garde pour JavaScript

ouais c'est juste
et que l'on mette div.MenuTop ou .MenuTop ca revient au meme'

en effet, mais je préfère les préfixer par réflexe d'organisation

ouais c'est pas mal comme système. merci du tuyau  

je vois pas le rapport.
les id c'est pour identifier un élement, que ce soit pour les css ou le javascript.
 
par contre, ok pour le préfixage.
 
j'aime bien
div#monMenu {
...
}

alors dans mon cas, plutot class ou plutot id?

ben id. tu vas pas avoir plusieurs MenuTop dans la même page, surtout que tu mets le placement dans le style.
 
class c'est plus quand t'as un style plus général qui s'applique a plusieurs élements.  

c'est précisément pour cette raison que j'emploie systématiquement class.  J'avoue qu'en fait, j'ignorais que id servait d'identifiant de style

Disons, que c'est sémantiquement plus correct. Si tu as un bandeau en haut de ta page, c'est un bonne chose de l'identifier de manière car tu donnes du sens à ton document.
 
Sinon Urd-Sama, ta méthode fonctionne, mais elle risque de s'avérer compliquée à l'usage si tu ajoutes des éléments. Personnellement, je ferais les choses comme ça :
 

 
Et pense à mettre des unités à tes longueurs, sinon, tu vas avoir des surprises avec Mozilla

oui je vais rajouter les unités.
pour ta solution, je l'avais vue dans la FAQ, mais il me semblait que celle que j'utilise était valable sur + de browser que la tienne. Mais c'est vrai que c'est beaucoup + simple...
pour l'id, je vais remettre ce que j'avais mis au départ alors  

est-ce que l'on peut utiliser des iframe ou c'est pas bien?

IE est le seul à les gérer je crois.  Est-ce toujours bien d'actualité?  Si oui, c'est pas bieng effectivement.

non. mais c'est pas bien quand même

tu as des précisions pourquoi?

euh. je me souviens d'avoir lu gm dire que c'était pas bien, ca me suffit

tu ne m'as pas mis le style de l'id de "menus", il contiendrait quoi?

Problème d'accessibilité, de référencement, marche pas avec NS 4...
 
Enfin ça dépend ce que tu veux faire avec, mais souvent les frames peuvent être remplacées avantageusement par des includes coté serveur (avec php, asp ou les SSI d'apache...)

c'est ce que je pensais, donc si on veut faire une applic sans serveur, plutot iframe, sinon on oublie

Ben rien
 
Je sais pas ce que tu veux faire avec ce design mais a priori si tu mets des infos à droite de MenuMain elles viendront se mettre dans ce DIV.

Et puis le tag <iframe> n'existe plus dans les dernière versions du XHTML (remplacé par <object> )

c'est pas centré sur ie 5,5 c'est normal?

Oui, ce c*n de IE 5.5 ne reconnait margin: auto;
 
Ajoute :
 

 
et à div#main :
 

 
Enfin tout ça est expliqué dans la FAQ

merci, tout est nickel. je n'avais trouvé que la solution qui centrait tout, y compris le texte (je devais pas avoir tout lu la FAQ)

et est-ce une bonne idée d'utiliser ce object? ou non recommandé?

<object> c'est mieux car c'est plus standard (dans les dernières normes iframe a disparu). Par contre je crois qu'IE dessine toujours un cadre autour de <object> qu'il est impossible d'enlever... A toi de voir donc.
 
La syntaxe pour object :
 

merci beaucoup  

je prends ce topic concernant un deuxième problème de placement de css.
 
Cas:

1:  div.center {text-align: center;}
2:  div.moitie {float: left; width: 47%;}
3:  div.espace {float: left; width: 6%;}
 
Première question: est-ce que le 3, qui sert à créer un espace entre les 2 div de type 2 (qui contiennent du texte) est supprimable? j'ai essayer de mettre des margin-left et margin-right aux div2, mais cela ne fonctionnait pas.
 
Deuxième question: si le contenu de 2.2 est moins long que 2.1, la div 1.2 viendra se mettre sous 2.2 au lieu d'aller à la ligne. comment éviter ce bug?

Oui il est supprimable. Ton DIV 2.2 devrait avoir comme propriété :
 

 
Mais il ne doit pas être flottant.

Ce n'est pas un bug. Voir la FAQ sur les flottants (positionnement). C'est l'histoire du "spacer"

le truc c'est qu'il va a la ligne à la suite du 2.1, puis affiche le 2.2, d'ou un décallage
 
edit: j'ai repris le système avec les floats, en ajoutant une marge. Et j'ai un question à ce sujet, lorsque l'on met une margin-left, met-il une margin-right tout seul? j'avais déjà eu une variante avec un autre exercice

Ca fait ça seulement avec IE ? Si c'est ça bravo, tu es tombée sur un bug. Eventuellement, si tu indiques explicitement la largeur des blocs ça peut résoudre le problème.
 
Le mieux serait que tu postes le code ou une URL de ta page.

je ne peux pas uploader aujourd'hui donc voici le code du cas qui semble bugger:
 

et les styles:

IE 5.5

Heu tu as oublié le float: left; pour moitieLeft.
 
Sinon, passe la marge à 52% au lieu de 53 et les 2 DIVs seront l'un à coté de l'autre sous IE.

ah oui en effet. mais j'ai opté pour cette solution là:

elle me semble + claire

C'est très bien aussi

mais en fait je n'ai pas compris pourquoi ma classe moitie n'avait que 44% de largeur. au départ j'avais mis 47, car 47+3 de marge, c'est à dire 50% en tout.
pourquoi ce 44?

Ben je sais pas ce que tu veux faire
 
En tout cas là tes DIV ont l'air centrés avec le même espace à gauche et à droite.
 
En tout cas si tu compares Moz et IE, IE donne une marge à gauche du premier DIV bien plus importante que IE
A part un bug, je ne vois pas ce que c'est. C'est pour ça qu'avec IE et le flottants il faut toujours s'assurer que la longueur totale fasse moins de 100%.