Soucis : padding et pourcentages

vAl · décembre 2009

Bonjour,
Je suis en train d'adapter le thème par défaut de pluxml à mon site et j'ai voulu passer toutes valeurs des largeurs en pourcentages plutôt qu'en pixel. Et c'est ici que je rencontre un problème : le padding du blog #content s'ajoute à son pourcentage : alors que #content devrait faire 75% de #page, il en fait 75% + 8px, ce qui complique grandement le calcul du pourcentage du footer, de la sidebar...
Pourquoi ce padding s'ajoute-il à la largeur ? Je pensais que marge intérieur était équivalent à "on établit des marges à l'intérieur du bloc, mais sans changer ses dimensions". Me serai-je fourvoyé ? Comment résoudre ce problème ? Je vous remercie de l'attention que vous porterez à mon message !

oscim · décembre 2009

Salut,

La , il me semble perso qu'il faut passer par une recherche google, sur "cours css" ou 'apprendre css" ou 'permier pas css".

sinon, alsacreation ou css.developpez.com. par ex.

Parce que au vu du post c'est pas gagné, et il manque beaucoup de base.

Stéphane · décembre 2009

Bonjour vAl

Je te déconseille de travailler en %.
Tous les navigateurs ne réagissent pas de la même façon.
Tu risques donc d'être confronté à des problèmes récurrents d'affichage différents en fonction des navigateurs. L'utilisation des % est possible dans certains cas et pour certaines balises uniquement. Donc les % oui mais pas partout. Si l'utilisation des px te gêne oriente toi plutôt vers les em

Stéphane

ti_pierre · décembre 2009

vAl a écrit:

Bonjour,

Bonjour

vAl a écrit:

Je suis en train d'adapter le thème par défaut de pluxml à mon site et j'ai voulu passer toutes valeurs des largeurs en pourcentages plutôt qu'en pixel.

C'est un choix judicieux, j'y travail moi aussi actuellement.

vAl a écrit:

Et c'est ici que je rencontre un problème : le padding du blog #content s'ajoute à son pourcentage : alors que #content devrait faire 75% de #page, il en fait 75% + 8px, ce qui complique grandement le calcul du pourcentage du footer, de la sidebar...

Alors là oui le mélange ne peut pas fonctionner, ou alors à grand coups de chance.

vAl a écrit:

Pourquoi ce padding s'ajoute-il à la largeur ? Je pensais que marge intérieur était équivalent à "on établit des marges à l'intérieur du bloc, mais sans changer ses dimensions". Me serai-je fourvoyé ?

Bah voui me semble t-il, nous allons essayer d'expliquer ça. Un padding est une marge intérieure, si tu applique un padding sur la div#page par exemple, la largeur du conteneur global vas s'agrandir.

Par contre si tu applique un padding sur la div.post qui est à l'intérieur de la div#page, alors là seul la div.post vas se décaler ( selon la valeure choisie ) mais pas la div#page.

Vois-tu ce que je veut dire ?

vAl a écrit:

Comment résoudre ce problème ? Je vous remercie de l'attention que vous porterez à mon message !

En faisant des tests en se basant sur l'exemple cité ci-dessus. Et en parcourant longuement les documentation sur Css afin de paufiner ses acquis

A bientôt.

gcyrillus-nomade · décembre 2009

vAl a écrit:

Bonjour,
Je suis en train d'adapter le thème par défaut de pluxml à mon site et j'ai voulu passer toutes valeurs des largeurs en pourcentages plutôt qu'en pixel. Et c'est ici que je rencontre un problème : le padding du blog #content s'ajoute à son pourcentage : alors que #content devrait faire 75% de #page, il en fait 75% + 8px, ce qui complique grandement le calcul du pourcentage du footer, de la sidebar...
Pourquoi ce padding s'ajoute-il à la largeur ? Je pensais que marge intérieur était équivalent à "on établit des marges à l'intérieur du bloc, mais sans changer ses dimensions". Me serai-je fourvoyé ? Comment résoudre ce problème ? Je vous remercie de l'attention que vous porterez à mon message !

Bonjour,

si tu veut caler l'ensemble de ton site sur largeur exprimée en pourcentage , l'idéal est de te servir d'un conteneur principal en marge automatique . tu peut en plus imposer une largeur maximale et minimale de façon a conteneur les largeurs extrêmes (qu'elle tete a le design dans une fenêtre de 500px ou de 1600px ? ).

Les élément enfants direct de type block s'étaleront sur toute la largeur disponible de ce conteneur sans que les marges externes ou internes viennent tout bousculer.

Si ensuite , tu veut partager cette largeur entre deux éléments (enfant et adjacent) le plus simple est de positionner le premier éléments dans le flux en float avec une largeur exprimé en pourcentage(si content) , ou fixe (si sidebar) et de laisser le second élément se positionner dans la partie restante en t'appuyant sur les comportements induits par une modifications des contextes de formatages (ou haslayout selon les versions viellissantes de IE ).

En gros , tu peut avoir ce genre de gabarits comme base de travail:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>HTML 4.01 </title>
<style type='text/css'>
div {
border:1px solid;
background:gray;
/* contexte de formatage sur tout les div */
overflow:hidden;
zoom:1;
}
#global {
width:80%;
min-width:700px;
max-width:1200px;
margin:auto;
position:relative;

}
 div div , h1{
background:white;
width:auto;
margin:1%;
padding:8px;
}
#content {
float:left;
width:75%;
margin:0 1%;
display:inline;
}
#sidebar {width:auto;}
#pied {clear:both;}
</style>
</head>
<body>
<div id="global">
<h1>Titre 1</h1>

<div id="content">	contenu	</div>

<div id="sidebar">	a coté 	</div>

<div id="pied">	 pied	     </div>

</div>
</body>
</html>

GC

mise a jour du css pour IE 6 aussi

vAl · décembre 2009

Merci à tous pour vos réponses sur lesquelles je vais me pencher, il y a des pistes intéressantes à explorer ( en effet, je ne suis pas spécialiste en CSS, j'ai appris "sur le tas" en fonction des besoins que j'ai pu avoir dans le passé) !

Stéphane a écrit:

Bonjour vAl

Je te déconseille de travailler en %.
Tous les navigateurs ne réagissent pas de la même façon.
Tu risques donc d'être confronté à des problèmes récurrents d'affichage différents en fonction des navigateurs. L'utilisation des % est possible dans certains cas et pour certaines balises uniquement. Donc les % oui mais pas partout. Si l'utilisation des px te gêne oriente toi plutôt vers les em

Stéphane

L'utilisation des pixels ne me gène pas du tout, mais je me disais qu'il y a de plus en plus d'écarts entre les tailles d'écrans, et qu'ainsi un site dont les dimensions sont fixées doit être ridicule sur une écran de télévision (même si c'est un exemple extrême) et c'est pourquoi je m'étais tourné vers les pourcentages ; mais je ne savais pas que cela posait en plus des problèmes supplémentaires de compatibilité entre les navigateurs !

gcyrillus-nomade · décembre 2009

vAl a écrit:

L'utilisation des pixels ne me gène pas du tout, mais je me disais qu'il y a de plus en plus d'écarts entre les tailles d'écrans, et qu'ainsi un site dont les dimensions sont fixées doit être ridicule sur une écran de télévision (même si c'est un exemple extrême) et c'est pourquoi je m'étais tourné vers les pourcentages ; mais je ne savais pas que cela posait en plus des problèmes supplémentaires de compatibilité entre les navigateurs !

Comme l'exemple que je te propose plus haut , tu peut remarquer que les problemes de compatibilté de navigateurs peuvent être facilement gérer en évitant certaines situations.

Faire en sorte de ne pas atteindre ou depasser les 100% en largeur : les navigateurs calculent et arrondissent au pixel le plus proche les valeurs exprimés en pourcentage. certains arrondissent a la valeur superieur d'autre a la valeur inférieur. se garder donc une marge d'erreur !

Exprimer les marges externes en pourcentage peuvent aussi amener a des calculs incoherents d'un navigateur a l'autre : l'un calculeras 1% sur la largeur du conteneur parent , l'autre sur le conteneur lui même . De plus quelques bugs d'IE6 sur les marges et les flottants vont aussi ajouter de la confusion ou des incoherences aux rendus.

deplacer les marges internes(padding) vers les enfants soit en marges internes , soit en marges externes .

ne pas oublier non plus les effets de fusions de marges qui peuvent apparaitres

Ils n'y a pas que des bugs

, il y a aussi des solutions qui paraissent logiques aprés reflexions et observations.

Ce n'est pas Mission Impossible , il faut simplement distribuer les marges sur plusieurs niveaux pour eviter les melanges % et valeurs precises.

GC

vAl · décembre 2009

D'accord

Du coup, comme conseillé au début, je vais remettre le tout en pixel, approfondir mes connaissances en CSS et explorer vos codes et suggestions, puis j'essaierai de m'en sortir seul

lagraphiste · janvier 2010

Essai aussi le mesures en «em» avec ça je suis parvenu à faire mon thème en % (largeur des div) + em (padding et margin) qui s'ajuste à tout les formats d'écran (je présume que c'est pour ca que tu veux le faire en %). Et seul ton body doit être à 100%, le reste idéalement met les à max 97% pour éviter que les navigateur qui mettent des marge par defaut fassent déborder ta page de l'écran.

Soucis : padding et pourcentages

Réponses