Margin avec un element en float : Optimisation code,

bonjour à tous,

une petite question pour vous, une énigme pour moi
Voici ma page :


Une image en float left, et deux listes.
Je cherche à décaler mes deux listes, avec qqchose comme ca

#wrapper ul {margin-left: 25px;}

Le problème c'est que la première liste ne se décale pas car il y a l'image en float left, pour cela il faut que je la décale d'au moins la largeur de l'image.
Donc entre la liste 1 et la liste 2, je ne vais pas avoir le même décalage :

#wrapper ul.liste1  {margin-left: 275px;} /*largeur image + 25px */
#wrapper ul.liste2  {margin-left: 25px;}

Donc existe-t-il une astuce pour réussir à décaler ses deux listes sans multiplier les class.
Car niveau maintenance c'est pas très pratique, car à chaque fois que la largeur de mon image va changer il va falloir créer une nouvelle class pour la liste 1.

Merci à tous.
Modifié par lkadiss (18 Oct 2010 - 10:01)

bonjour,

.left {
float:left;
margin-right:10px;
}
ul{
margin-left:30px;
display:inline-table;
}

à "patcher" pour ie6 ?

bonjour,

merci pour ta réponse, j'avais oublié cette solution.
j'ai essayé avec table-cell, ca fonctionne très bien aussi.
Par contre IE6 et IE 7 ne le gère pas.

Merci

re—
avec inline-block plutôt et avec une class ib pour inline-blocker

/* pour ie */
.ib{
display: inline;
zoom:1;
}
/* pour les plus récents */
html>body .ib{
display: inline-block;
}

oui c'est nikel merci beaucoup

bonsoir,

et ce qu'un

ul , p {oveflow:hidden;zoom:1;}

ou en le passant en class:

.seeFloat {overflow:hidden;zoom:1;}

<div class="seeFloat">
<img class="float" src="#" />
<p class="seeFloat">textes</p>
<ul class="seeFloat><li>..</li></ul>
<p class="seeFloat clear">retextes</p>
<ul class="seeFloat"><li>...</li></ul>

ne serait-il pas plus simple a gerer dans la feuille de style commune?

Cela ne nécessite pas de déclaration redondante ni d'astuces , ul garde son comportement de block par defaut. Ie6 rentre dans le rang et IE7 ne sera pas perturbé même si il reagira de la même façon a overflow:hidden; et zoom:1; .

Possible que j'ai raté quelque chose (lien vers le site, architecture html, ...) Le post initial a était modifié.

Cordialement GC

Pour aligner l'image et les autres contenu (p et liste) , un padding-left dans le conteneur principal evitera de se prendre la tête avec des marges a tout les enfants.

Le margin-right a image repoussera p et ul .