Centrer un groupe de div en mode float

**electroremy** · 22/11/2009, 20h22

Bonsoir,

Suite à quelques recherches, j'ai trouvé une façon de faire qui correspond presque à ce que je veux; les DIV utilisent judicieusement l'espace en adoptant le bon nombre de colonnes.

(Voir mon précédent sujet http://www.developpez.net/forums/d83...ent-efficaces/
je cherchais à obtenir cette mise en page http://electroremy.free.fr/sonorama2009/part20.html sans utiliser de javascript)

Mais je n'arrive pas à centrer l'ensemble des DIV.PIC, ce qui est très laid.

Voici les codes :

fichier html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<HTML>
<HEAD>
<style type="text/css">
@import url(style_p.css);
</style>
<TITLE>Vidéos</TITLE>
</HEAD>
<BODY>
<div class="int">
<div class="pic">boite 1</div>
<div class="pic">boite 2</div>
<div class="pic">boite 3</div>
<div class="pic">boite 4</div>
<div class="pic">boite 5</div>
<div class="pic">boite 6</div>
<div class="pic">boite 7</div>
<div class="pic">boite 8</div>
</div>
</BODY>
</HTML>

fichier css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
div.pic {float: left;
width: 250px;
height: 180px;
background: #ff9933;
margin: 12px 12px 12px 12px;
padding: 6px 6px 6px 6px;
border-style: dashed;
border-width: medium;
border-color: green;
text-align: center;
vertical-align: middle;
}
 
div.int {margin-left: auto;
margin-right: auto;
margin-top: 4%;
margin-bottom: 4%;
text-align: center;
}

Comment faire ? Sachant que je ne peux connaitre le width à appliquer à div.int puisque cette valeur dépend de la taille de la fenêtre du navigateur du visiteur du site.

Merci !

**CCyrillus** · 24/11/2009, 00h28

Bonjour,

un display:float-inline; n'existe pas .
Mais en regardant du coté de display:inline-block , il y a en théorie une solution.

Cependant , IE6 et IE6 (en mode standard) ne peuvent pas l'appliquer , FF2 est dans ce cas aussi. Difficile de zapper IE6 et IE7 encore aujourd'hui.

Si quelque acrobaties CSS ne te rebutes pas , au prix d'une modification de ta structure html (Pour FF2 en particulier) et un commentaire conditionnel , je te propose de regarder et tester ce gabarit : http://gcyrillus.free.fr/essai/float-center.html

l'approche :
1) display:inline-block; Pour les derniers navigateurs
2) modification du haslayout pour IE7 et inf via les CC
3) Usage d'une regle propriétaire instable pour ff2 et inf
4) structure avec une imbrication supplementaire :
- stabiliseen partie ff2
- illusion du float right ou left .
5) usage partiel du display façon table (alignement vertical).
6) changement de la direction d'affichage (appliquer l'illusion d'un float)
7) rétablissement du sens d'affichage du/des contenu(s)

Ce type de code peut-etre difficile a maintenir ou a repassé a un collegue .
Les block pourront se redimensionné en fonctions de leur contenu excepté dans IE7 par exemple ,
dans le cas d'un site international : le sens d'affichage par défaut de la page peut aussi compliqué la tache .

En final , si le display:inline-block est pertinent a la base ,
les corrections et derniers réglages le sont beaucoup moins :
Haslayout , display:table-cell (usage détourné) , direction:ltr / rtl ; (usage détourné) .

Si cela semble une solution , ça l'est peut-être moins après réflexion .

GC

Centrer un groupe de div en mode float

Centrer un élément en CSS

Vue hybride

Discussions similaires

Partager

Partager