Formatage css bloque de 2x(x) avec 2 titre et dynamique

[dcouture25]

Bonjours, j'aurais besoin de votre aide pour du formatage css. Je voudrais afficher des vignettes de facon fluide selon cette logique :

------------------------------------------------------------------------------
titre1 titre2 |
photo1.1 | photo1.2 | photo1.3 photo2.1 | photo2.2 | photo2.3 |
|
titre3 titre4 |
photo3.1 | photo3.2 | photo3.3 photo4.1 | photo4.2 | photo4.3 |
----------------------------------------------------------------------------- |

pour l'instant j'utilise ce code qui les places chaque titre un en dessous de l'autre
<div class="contour">
<ul class="demos">
<h2>titre1</h2>
<li>photo1</li>
<li>photo2</li>
<li>photo3</li>
</ul>
<ul ....
</div>

et comme css :

div.contour{
padding:10px;
}
ul.demos{
list-style:none;
height:240px;
}
ul.demos li{
width:160px;
height:200px;
border:1px solid #000;
background:#FFFFFF;
float:left;
margin:3px;
display:inline;
}


Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.9) Gecko/20071025 Firefox/2.0.0.9

[calimo]

Bon déjà le <h2> doit être à l'extérieur du <ul>.
Ensuite je dois avouer que je ne comprend pas vraiment la question... est-ce qu'on ne pourrait pas avoir un exemple concret ? C'est toujours beaucoup plus parlant qu'un bout de code sorti de son contexte...

[dcouture25]

c'est du code généré avec du php alors j'ai pris un peu de temps pour rendre le code plus clair en html et mettre le tous sur le serveur de production et la j'ai un autre problème plus grave. La hauteur des colonnes et le footer ne fonctionne plus avec IE7 seuleument et seulement sur le serveur de production. Peut etre du a cause qu'il y a plus de donné en prod mais la franchement je désespère.

Aussi pour ma principal question sur mon site dans la section principal ou j'ai toutes mes photos, j'ai 2 sections de photo (primeurs et événements). Comme il n'y a pas beaucoup de photo dans primeurs je voudrais les placé cote à cote sur la meme ligne. Ensuite, je compte ajoutez 2 nouvelles sections de photo qui vont eux aussi etre cote a cote et juste au dessus des 2 actuels les primeurs a venir et les événements à venir.

http://www.hnrmedia.com/HNRMedia2/SiteWeb/culturels/
j'espère que ce sera plus clair ainsi.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.9) Gecko/20071025 Firefox/2.0.0.9

[Nicosmos]

Peut être en appliquant un float:left; au ul des événements ?

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.8) Gecko/20061201 Firefox/2.0.0.8 (Ubuntu-feisty)

[dcouture25]

j'ai déjà essayé mais le prochain titre et tous ce qui lui est rattaché est décalé d'un saut de ligne. Et si je mets le float:left dans le h2 alors la le titre est a gauche de ces images. Cependant en attendant je pourrais transformer le titre en une image vertical et sa serais quand meme bien.


Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.9) Gecko/20071025 Firefox/2.0.0.9

[calimo]

STOP !
Ta page est bourrée d'erreurs : http://validator.w3.org/check?verbose=1 ... lturels%2F
Pas étonnant qu'il y ait des comportements bizarres si tu mets des titres dans les paragraphes etc. Je ne sais pas exactement comment les erreurs sont gérées dans ce cas, mais il est possible (édit : et même probable) que cela pose problème

[SB]

Je propose

Code : Tout sélectionner

div.contour{
padding:10px;
}
h1, h2, h3, h4{
font-size:24px;
font-weight:bold;
margin:0
}
h1, h3{
float:left;
}
.spacer{
visibility:hidden;
clear:both
}
ul.demos{
list-style:none;
}
ul.demosimpairs{
float:left;
clear:left;
padding:0;
width:50%
}
ul.demos li{
width:160px;
height:200px;
border:1px solid #000;
background:#FFFFFF;
float:left;
margin:1px;
display:inline;
}
 
**************

<div class="contour">
<h1>titre1</h1>
<ul class="demos demosimpairs">
<li>photo1.1</li>
<li>photo1.2</li>
<li>photo1.3</li>
</ul>
<h2>titre2</h2>
<ul class="demos">
<li>photo2.1</li>
<li>photo2.2</li>
<li>photo2.3</li>
</ul>
<hr class="spacer" />
<h3>titre3</h3>
<ul class="demos demosimpairs">
<li>photo3.1</li>
<li>photo3.2</li>
<li>photo3.3</li>
</ul>
<h4>titre4</h4>
<ul class="demos">
<li>photo4.1</li>
<li>photo4.2</li>
<li>photo4.3</li>
</ul>
</div> 

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.9) Gecko/20071025 Firefox/2.0.0.9