[Coup de gueule] gestion des padding

Mistic100 · 16/06/2011, 14h46

Bonjour à tous,
j'ai récemment compris que d'après les W3C les padding devaient s'ajouter à la taille totale d'un élément, jusque là ça me va, même si IE et Chrome ne respectent pas ça.

Seulement là où ça me hérisse les cheveux c'est : comment on est censé gérer ça quand on veut un élément de exactement 100% ??

Et finalement je trouve cette règle complètement stupide, c'est tellement la galère dès qu'on veut changer la marge interne d'un élément, et qu'il faut revoir toutes les largeurs...

Bon voila, si vous avez une solution pour gérer les dimensions relatives je suis preneur, et puis si vous voulez une pétition je vous suis aussi

edit :e je précise que dans mon cas je ne peut pas utiliser with:auto;

Bisûnûrs · 16/06/2011, 14h54

Chrome et IE gèrent ça correctement. Chrome que ce soit en mode Quirks ou Standard, et IE uniquement en mode Standard. Il ne faut jamais laisser le navigateur passer en mode Quirks, c'est-à-dire qu'il faut toujours mettre un DOCTYPE valide, sans rien avant.

Autrement, pour ton problème, il te suffit de rajouter un niveau d'imbrication. Tu gardes ton élément à 100% sans padding, et dedans tu rajoutes un autre élément avec un width auto et avec le bon padding.

Mistic100 · 16/06/2011, 15h02

j'ai un Doctype valide, HTML 4 Strict

et sur Chrome/IE un calque de 100% + padding de 10px ne générait pas de scroll horizontal (comme ça le fait sur FF) donc j'en conclu qu'ils ne le gèrent pas

et la solution des imbrications c'est quand meme pas pratique du tout, j'aimerais bien savoir qu'est-ce qui les a amené à faire cette règle, vraiment je ne comprend pas

12monkeys · 16/06/2011, 15h13

Bonjour

Et on peut voir une page en ligne pour constater de visu. Il y a surement un truc que tu as mal fait...

Bisûnûrs · 16/06/2011, 15h15

Ben écoute, je viens d'essayer :

Code html :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<title>Test</title>
<style>
div {
   width:100%;
   background:red;
   padding:10px;
}
</style>
</head>
<body>
 
<div>test</div>
 
</body>
</html>

Et j'ai bien le scroll horizontal qui apparait sur IE8 et Chrome.

Mistic100 · 16/06/2011, 15h21

ça doit venir de ce qu'il y autour alors
pour info c'est dans les onglets de la partie admin de http://piwigo.org/ (pas de demo de l'admin)

enfin de toute façon la vraie question n'est pas là puisque ce fonctionnement est celui que je ne veux pas et suis obligé de contourner

ce que j'ai quand même fait avec un conteneur

de toute façon je vis dans le monde des bisounours ou ça marche toujours exactement comme je veux

thelvin · 16/06/2011, 16h04

Il y a bien la propriété CSS 3 box-sizing pour changer la méthode de calcul, mais bon... Ça vient pas par défaut, et il n'y aurait pas de raison de le faire pour IE et Chrome puis laisser Firefox dans le vent.

Bisûnûrs · 16/06/2011, 16h28

Citation:

Envoyé par Mistic100

je vis dans le monde de Bisûnûrs

Ah bon ?

16/06/2011, 14h46	#1
Mistic100 Futur Membre du Club Inscription : décembre 2006 Messages : 84 Détails du profil Informations personnelles : Localisation : France, Vaucluse (Provence Alpes Côte d'Azur) Informations forums : Inscription : décembre 2006 Messages : 84 Points : 19 Points : 19	[Coup de gueule] gestion des padding Bonjour à tous, j'ai récemment compris que d'après les W3C les padding devaient s'ajouter à la taille totale d'un élément, jusque là ça me va, même si IE et Chrome ne respectent pas ça. Seulement là où ça me hérisse les cheveux c'est : comment on est censé gérer ça quand on veut un élément de exactement 100% ?? Et finalement je trouve cette règle complètement stupide, c'est tellement la galère dès qu'on veut changer la marge interne d'un élément, et qu'il faut revoir toutes les largeurs... Bon voila, si vous avez une solution pour gérer les dimensions relatives je suis preneur, et puis si vous voulez une pétition je vous suis aussi edit :e je précise que dans mon cas je ne peut pas utiliser with:auto;
	00

16/06/2011, 15h13	#4
12monkeys Rédacteur/Modérateur Dr. Peters Webmaster Inscription : novembre 2006 Messages : 3 618 Détails du profil Informations personnelles : Nom : Dr. Peters Âge : 35 Localisation : France, Bas Rhin (Alsace) Informations professionnelles : Activité : Webmaster Secteur : Service public Informations forums : Inscription : novembre 2006 Messages : 3 618 Points : 6 238 Points : 6 238	Bonjour Et on peut voir une page en ligne pour constater de visu. Il y a surement un truc que tu as mal fait... __________________ Vous débutez dans la creation de sites web : les bases du html et débuter avec les CSS Pas de MP pour des questions techniques ! Mode d'emploi du forum ; Règles ; Pensez à la balise code ; Pas de SMS ! Votez pour les messages qui vous ont aidés...
	00

16/06/2011, 14h54	#2
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	Chrome et IE gèrent ça correctement. Chrome que ce soit en mode Quirks ou Standard, et IE uniquement en mode Standard. Il ne faut jamais laisser le navigateur passer en mode Quirks, c'est-à-dire qu'il faut toujours mettre un DOCTYPE valide, sans rien avant. Autrement, pour ton problème, il te suffit de rajouter un niveau d'imbrication. Tu gardes ton élément à 100% sans padding, et dedans tu rajoutes un autre élément avec un width auto et avec le bon padding.
	00

16/06/2011, 15h02	#3
Mistic100 Futur Membre du Club Inscription : décembre 2006 Messages : 84 Détails du profil Informations personnelles : Localisation : France, Vaucluse (Provence Alpes Côte d'Azur) Informations forums : Inscription : décembre 2006 Messages : 84 Points : 19 Points : 19	j'ai un Doctype valide, HTML 4 Strict et sur Chrome/IE un calque de 100% + padding de 10px ne générait pas de scroll horizontal (comme ça le fait sur FF) donc j'en conclu qu'ils ne le gèrent pas et la solution des imbrications c'est quand meme pas pratique du tout, j'aimerais bien savoir qu'est-ce qui les a amené à faire cette règle, vraiment je ne comprend pas
	00

16/06/2011, 15h21	#6
Mistic100 Futur Membre du Club Inscription : décembre 2006 Messages : 84 Détails du profil Informations personnelles : Localisation : France, Vaucluse (Provence Alpes Côte d'Azur) Informations forums : Inscription : décembre 2006 Messages : 84 Points : 19 Points : 19	ça doit venir de ce qu'il y autour alors pour info c'est dans les onglets de la partie admin de http://piwigo.org/ (pas de demo de l'admin) enfin de toute façon la vraie question n'est pas là puisque ce fonctionnement est celui que je ne veux pas et suis obligé de contourner ce que j'ai quand même fait avec un conteneur de toute façon je vis dans le monde des bisounours ou ça marche toujours exactement comme je veux
	00

16/06/2011, 16h04	#7
thelvin Expert Confirmé Sénior Inscription : septembre 2004 Messages : 5 066 Détails du profil Informations forums : Inscription : septembre 2004 Messages : 5 066 Points : 6 988 Points : 6 988	Il y a bien la propriété CSS 3 box-sizing pour changer la méthode de calcul, mais bon... Ça vient pas par défaut, et il n'y aurait pas de raison de le faire pour IE et Chrome puis laisser Firefox dans le vent.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email