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 :
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
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>
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.
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; }
Merci !
Partager