28173 sujets

CSS et mise en forme, CSS3

Largeur en % et padding ?

Salut à tous !

Je rencontre un nouveau problème Smiley rolleyes

VOilà, lorsqu'on met un padding à un DIV de largeur 100%, le padding s'ajoute aux 100%, c'est alors cuit pour faire une interface extensible comme il faut.

Admettons j'ai un padding de 4px au coté gauche et droit (8px au total),

Je voudrais savoir si faire ca, c'est pas trop bricolage :

width: 100%-8px;

Merci d'avance !

Smiley edit En fait ca n'a pas l'air de fonctionner Smiley decu

Il n'y a pas d'autres solution que de mettre deux blocs l'un dans l'autre ?
Modifié par vin-moi (21 Jun 2006 - 19:21)
Salut,

Si le bloc n'est pas en absolute ou flottant (et dans quelques autres cas), tu n'as pas besoin de lui spécifier de largeur à 100%, il s'entendra tout seul.

S'il est en position absolue, il y aurait un solution simplissime, mais non comprises par IE5/6 (mais 7 oui), qui consiste à mettre left:0; et right:0;. Le bloc prend alors toute la largeur de son conteneur. Si on laisse IE6 en quirks mode, il serait alors possible d'utiliser le modèle de boîte Microsoft (où padding et bordure ne s'ajoute pas à la largeur ou hauteur).

Sinon il y a une propriété qui pourrait s'avérer pratique pour ce genre de chose : « box-sizing », qui permet de choisir le box-model (type standard ou type "à la Microsoft"). C'est du CSS3, mais c'est déjà implémenté par Opera, Firefox (sous forme d'extension propriétaire) et... IE mac. Ce n'est donc pas utilisable à moins de laisser IE (y compris 7) en quirks mode et de ne pas tenir compte de Safari/Konqueror. Mais, comme c'est CSS3, on ne sait même pas si cette propriété sera conservée Smiley ohwell

Finalement le plus simple est d'utiliser deux blocs conteneurs : le premier avec le width:100%; et le second avec le padding et la bordure...
Modifié par Alan (21 Jun 2006 - 20:17)
Sujet clos
Aller à