28172 sujets

CSS et mise en forme, CSS3

Salut à tous,

J'ai mon avis sur la question mais j'aimerais savoir ce que d'autres "pro" du CSS en pensent :

Si je souhaite aligner 4 divs sur la même ligne, je peux spécifier leurs attributs ainsi :

div { float:left; width:25% }


C'est génial mais je n'ai pas de margin ni de padding entre les blocs. Hors, si je spécifie margin ou padding, l'affichage ne se réalise plus sur une ligne car la largeur de chaque div fait (du coup) plus de 25%.

2 solutions sont disponibles pour contourner ce problème :
- spécifier les largeurs des divs de manière absolue, en pixels (en prenant soin de soustraire les margin et padding)
- imbriquer un nouvel élement (div ou autre) au sein de ces divs, auquel on attribuera le margin et padding

La 2ème solution est nettement plus souple mais génère plus de markup. Quelle(s) technique(s) utilisez-vous personnellement et qu'en pensez-vous ?

Merci d'avance pour vos réponses,
Jérémy
Administrateur
Bonjour et bienvenue,

dans la mesure où les 12 derniers designs que j'ai intégré étaient en largeur fixe, la 1.
Les div supplémentaires, je les réserve au centrage de page avec fond faisant toute la largeur et aux dégradés extensibles en hauteur avec bords arrondis, en attendant de jeter la version 7 d'un certain navigateur qui ne comprend pas :before et :after Smiley decu
Salut Felipe et merci pour ta réponse.

Un autre élément que j'ai oublié de préciser est le fait qu'avec la technique n°1, on perd la possibilité d'utiliser les em en tant qu'unité de mesure pour les padding et margin.

Ca entraine une nouvelle fois un manque de souplesse... Le bug d'IE6 sur son interprétation des boîtes était pas si mal en fait Smiley biggrin