Voilà, je me suis mis aux css parceque c'est bien, j'ai lu quelques tutos sur les positions floats et tout ça mais je n'y arrive pas. J'aimerais faire celà:
 
 
Un truc assez simple. En rouge le logo, bleu le menu, le cadre bleu le contenu. Jusque là j'ai su m'en tirer plus ou moins avec des css   et des divs mais je n'ai pas réussi à obtenir un cadre qui fait tout le tour mais c'est un détail. Là ou je ne trouve pas du tout, c'est l'intérieur de mon cadre bleu. Dans ce cadre tous les éléments ont la même largeur mais des longueurs variabales. J'ai le  bloc jaune avec à sa gauche deux blocs verts et en dessous deux lignes de blocs verts. Quels type de positionnement adopter pour mes divs?

Pour le cadre principal c'est simple : il faut que tous tes blocs soient contenus dans un grand DIV principal.
 
Pour le reste :
 
 - le bloc rouge -> sans positionnement particulier
 - le bloc bleu -> en flottant à gauche
 - le bloc au cadre bleu -> sans positionnement particulier (avec une marge gauche de la taille du bloc bleu flottant)
 
Ensuite à l'intérieur du bloc au cadre bleu, je commencerais par séparer les blocs par des DIV anonymes. 3 DIV en fait : un premier qui contient le bloc jaune et les 2 verts à droite, et les 2 autres DIV qui contiennent chacuns 2 blocs verts. Bref on découpe en lignes.
Ensuite à l'intérieur de chacun de ces 3 DIV anonymes tu places le bloc de gauche en flottant et celui de droîte sans positionnement particulier, mais avec la marge qui va bien (comme le bloc bleu et le bloc au cadre bleu en fait).
 
Voilà, voilà

Arf, merci pour la réponse, c'ets comme ça que je pensais les choses mais ça marchait pas trop, je vais refaire tout ça calmement  

Après les conseils, la pratique
 
Je n'ai fait que le cadre interne.
L'exemple
 
J'ai essayé de respecter les couleurs du modèle.  
Le but de l'exemple n'est pas d'être joli. J'ai mis des bordures partout pour mieux voir les blocs et les lignes rouges pour les spacers.  
Ca fonctionne très bien sous firebird mais sous IE6, j'ai souvent les vignettes des images qui sont plus hautes que le texte. Comment règler ça    
 
   
 
La css

Il me semble pas que ça donnait ce que tu atendais.
 
Sois prudent avec les float:left. IE5 peut se mettre à bugger dans certaines situations ( quand il a envie en fait ).
 
   
 

Ouais, j'ai pas encore testé sous IE5 . Ca marche si peu que ça?
Je peux pas me permettre d'avoir une mise en page hasardeuse sous IE5. Je vais devoir passer aux tableaux

 
Les float left ça marche avec IE5 tant qu'il n'y en a pas trop.
 
Creuse un peu tu vas y arriver.
 
Tu veux pas prendre un truc déjà tout fait dont tu est sûre que ça marche ?  
 
Comme ici  
 
http://www.thenoodleincident.com/t [...] boxes.html
 
 
 

Il faut mettre l'image *dans* le paragraphe :
 

 
 
Remarque : float: left; sous implique que l'élément est un bloc. Donc le "display: foat" est inutile dans .vignette

J'avais mis un display:block dans la vignette mais c'était un peu crade peut être. Merci pour les conseils  
Edit: en fait j'ai rien compris... Qu'est ce que je ne dois pas mettre dans vignette ?

 
suffit. Pas besoins de :
 

Ah,oui, maintenant que tu précises je comprends pas comment je n'ai pas compris ton premier post.. Fatigue  

BOn, j'ai des problèmes assez bizarres sous ie.  
 
sous ie

 
sous firebird

 
Je dois mal m'y prendre. Les lignes rouges sont mes div spacers. Il faudrait qu'elles se placent comme sous firebird, c-a-d juste en dessous de la vignette. Comment faire?

Comme ça c'est difficile à dire sans avoir le site sous les yeux...
 
Tu pourrais pas le mettre online ?

L'exemple.
Je l'avais déjà mis juste au dessus de la css mais c'est vrai que els liens ressortent pas trop  
En fait le problème en autre est que le clear left se fait à fond à gauche. Il s'applique sur le bloc jaune et non sur la vignette comme je le voudrais

Mets tout tes éléments en float:left et donne leurs une largueur pour voir.

du style, tu spécifie une largeur pour les blocs jaune et vert. Puis une hauteur pour les blocs vert.

je crois que je vais craquer et passer au tables . Je peux pas spécifier de hauteur pour mes blocs. c'est du contenu variable.

<html>
<head>
<title>mam page</title>
</head>
 
<style>
 
body,html{
margin:0;
padding:0;
}
 
#header{
    height:100px;
    background-color:red;
    }
     
#blue{
    background-color:blue;
    position:absolute;
    top:100px;
    left:0;
    width:20%;
    height:300px;
    }
     
#header{
    height:100px;
    background-color:red;
    }
     
#contenu{
    background-color:#eee;
    position:absolute;
    top:100px;
    left:20%;
    width:80%;
    height:300px;
    }
     
#jaune{
    float:left;
    background-color:yellow;
    width:40%;
    margin:1em;
    }
     
.vert{
    float:left;
    width:40%;
    background-color:green;
    margin:1em;
    }
 
</style>
 
<body>
 
<div id="header">
</div>
 
<div id="blue">
bla bla
</div>
 
<div id="contenu">
 
<div id="jaune">
asdlfkjasll32krlk32lérkj32élrk23
</div>
 
<div class="vert">
asdlkfjlaskjdélfaksd
</div>
 
<div class="vert">
asdlkfjlaskjdélfaksd
</div>
 
<div class="vert">
asdlkfjlaskjdélfaksd
</div>
 
<div class="vert">
asdlkfjlaskjdélfaksd
</div>
 
<div class="vert">
asdlkfjlaskjdélfaksd
</div>
 
</div>
 
 
</body>
</html>

pour le temps passé, je vais tester tout ça ce soir

Je viens de regarder. Le positionnement absolu avec le contenu variable, je peux déjà oublier. En fait mon gros problème n'est pas de faire la mise en apge comme le premier post.  
C'est pour ça que je me concentre sur le bloc interne. Mais c'est de bien placer mes blocs verts et que le contenu de mes blocs verts  se place bien.

 
Pourquoi ?
 
Tu prend très cumuler les deux !

Si je positionne les blocs en absolu, je peux oublier l'idée d'un cadre qui fait le tour. Enfin, il me semble. Puis tout ça est secondaire . Je me concentre sur le div contenu pour le moment

 
Humm qu'est ce qui va pas dans le div contenu ? ... de tt facon si tu veux un contenu variable sans fixer une hauteur avec les blocs vert tu aura forcement des pc c'est obligé...
 
Crois moi j'ai fait un site similaire.

des pc?

je voulais dire pb = problème ...

Sur la  page ici, le rendu est presque correct sous IE6.0 hormis le padding. J'avoue que j'ai pas encore osé regarder sous IE5.5. A part un petit problème de padding. Donc je pense que ça doit être possible. Mais je me demande de plus en plus pourquoi je n'utilise pas de tableaux. Les divs, je m'y remettrai plus tard. De toutes façons vu le nombre de boîtes qui laissent encore des vieux netscape 4.7

décéption  

Je te conseil d'oublier ta mise en page. Elle est foireuse, et même avec des tableau ça va pas être logique ... essaie de fair quelque chose de plus simple. Plus linéaire.
 
Les visiteurs ne demande pas un présentation exotique... À moins que tu veuille faire un site artistique ... Dans ce cas je te conseil flash.

La mise en page est un peu imposée en fait

 
Ben faut expliquer que tu connais ton métier et que si il veulent ça il peuvent l'avoir mais ce sera un site pourri ( faut pas le dire texto evidemment ).
 
Sinon tu peux spécifier une hauteur au div et offrir une scrollbar dans le cas ou le contenu dépasse. Et comme ça tout le monde il est content  

Pas beau scrollbar .
Pour ce qui est de la mise en page, étant donné que je débute, je vais pas être affirmatif comme ça . Merci pour toute l'aide

Comme il l'est précisé dans la FAQ, IE a du mal avec les flottants lorsque aucune largeur est précisée.
 
Ajoute donc simplement un "width: 100%" à la classe .right

Merci beaucoup gm, faut mettre plus un truc comme 50% je pense.
Là j'ai mis un 47% pour les div gauches et droites et le résultat me semble correct pour le moment à part sour opera mais bon. Ca reste présentable . Merci pour l'aide précise. Je vais relire ta FAQ pcq j'ai loupé des trucs on dirait