Ici je peux mettre la description de mon image.
Ici je peux mettre la description de mon image.
Ici je peux mettre la description de mon image.
Explication des boîtes "DIV" 100% CSS - Centrage et Float
- En jaune: il est important de mettre les marges du body à zéro en utilisant le style CSS: margin:0px; NB: je mets le text-align:center; pour la compatibilité avec IE.
- En noir: c'est la Div Conteneur: width:100%; margin-top:20px; et margin-buttom:20px; (au choix) text-align:left (au choix) pour rétablir l'allignement centré du body pour IE.
- En gris: c'est la div Contenu ou centrage du site: width:720px; et margin:auto pour centrer proprement dans la page! NB: j'ai exceptionnellement mis une hauteur à la div pour la voir, normalement elle s'ajuste à la hauteur de son contenu.
- En vert: il y a une div parent (sans style) qui contiens les trois autres div enfants. Les trois div enfant ont le style: float:left pour s'alligner une à côté de l'autre width:240px soit (largeur total) / (nombre de boîte voulu).
- En rouge: la div qui centre l'image; width:100px il est trés important que cette div soit au minimum de la même largeur que l'image et que la différence entre la div parent et la div enfant soit divisable par deux sans reste: (240 - 100) / 2 = 70 ensuite, margin:auto et la div est centrée.
- En bleu: même démarche que les div en vert.
- En blanc: la div des textes est en % width:80%; margin:auto pour centrer. NB: la div prend 80% de l'espace de son parent en largeur, pour cela je peux la réutiliser avec un autre parent comme ici même!
- En rose: la div qui termine le float, clear:both