28216 sujets

CSS et mise en forme, CSS3

Width 100% incluant padding/border/margin ?

Bonjour,
Je suis en difficulté pour donner le style que je désire a mes pages en css :
Supposons que j'ai : 

<div id="premier_div"> 
  <div id="second_div"> 
     blabla 
  </div> 
</div>


Voila mon premier_div a une largeur variable, et j'aimerai que mon second_div prenne toute la largeur de premier_div sans la dépasser.

Jusque la c'est bon, il suffit d'un width:100%;

Mais si je veux que dans second_div j'ai une padding-right:5px par exemple, ben mon second_div va dépasser de 5px par rapport a mon premier_div, car ils sont comptés en PLUS des 100%
Ceci n'est pas vrai apparemment dans IE, qui comprend les margin/border/padding comme faisant partie du width.

Mais comment je dois faire sans trop magouiller pour obtenir un width:100% INCLUANT un border/padding/margin sous firefox et autres navigateurs respectant bien le css ?

Merci

ps: J'en profite pour dire que ce site est super et j'y ai appris beaucoup
Modifié par Raymi (03 Nov 2005 - 11:05)
Bonjour,

On peut envisager tout un tas de choses. Voici 2 solutions :

1/ ajouter à premier_div un padding équivalent à celui que tu souhaites mettre sur second_div, et décaler cet élément de la même quantité vers la gauche s'il s'agit d'un padding-left.

2/ utiliser la même unité pour définir with et padding. Par exemple, width:90% et padding-left:10%
Modifié par Xavier (03 Nov 2005 - 12:18)
Salut

une solution (j'opterai pour celle là) est de séparer ton contenu, de manière à lui appliquer le padding directement, sans modifier son conteneur.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Test</title>
<style type="text/css">
#bloc1, #bloc2{
width:50%;
float:left;
margin:0;
}
#bloc1 p,#bloc2 p{
padding:0 10px;
}
#main{ background:#F00;}
#bloc1{ background:#ccc;}
#bloc2{ background:#ddd;}
</style>
</head>
<body>
<div id="main">
<span id="bloc1"><p>bloc 1</p></span>
<span id="bloc2"><p>bloc 2</p></span>
</div>
</body>
</html>

Modifié par yyoupla (03 Nov 2005 - 12:55)
Merci pour les réponses.
J'avoue que je n'avais encore pas penser a mettre le padding en % également, cette idée me convient assez bien.
yyoupla, j'ai du mal a suivre le raisonnement, la je risque d'obtenir 2 blocks distincts l'un a coté de l'autre non ?
lol c'est ce que je me suis dit en lisant ta réponse "il s'est pas trompé de topic lui ?" mais bon si c'était pas le cas j'aurai pas eu l'air malin en le disant :}
Modifié par Raymi (03 Nov 2005 - 17:03)
Rebonjour, toujours dans le meme registre, je bloque sur le meme probleme mais concernant un étirement a 100% en hauteur avec un padding. Le fait et que je ne peux pas utiliser un padding en % comme précédemment, j'utilise ici un padding en em.

Je voulais avoir plus de renseignements quant à la premiere soution de Xavier, ou une autre (vu qu'il y avait l'air d'en avoir pas mal possible).
Cette premiere solution me semble bizarre car a priori elle n'étirerait pas second_div a 100% de premier div si ?

Sinon concretement voila mon code

.diagrammes {
	display:block;
	float:right;
	margin:0;
	border:1px solid black;
	margin-right:2em;
	padding:0;
	height:2em;
	position:relative;
	z-index: 90;
}

.diagrammes a, .diagrammes a:hover {
	display:block;
	padding:0.3em;
	vertical-align:middle;
	text-align:center;
	margin:0;
	border:0;
	text-decoration:none;
	background-color:yellow;
}


J'aimerai que mon <a> remplisse completement mon .diagrammes qui est a la base un <span>
J'ai essayé de mettre un height:100% dans le <a> mais curieusement cela semble affecter également la largeur, en plus de ne pas donner le rendu voulu exactement

Merci des suggestions.
a écrit :
Cette premiere solution me semble bizarre car a priori elle n'étirerait pas second_div a 100% de premier div si ?
Si mais 100% de premier div n'est en fait pas une expression suffisament précise. Il vaudrait mieux dire 100% du contenu de premier div, sachant que selon la norme CSS2.1 le contenu ne comprend évidemment pas le padding. Donc le padding permet de compenser.

Sur l'exemple que tu proposes, ajoute height:100%; aux liens, puis padding-bottom à diagrammes d'une valeur double du padding des liens.

Attention cependant, ce padding ne doit pas être ajouté pour IE qui ne respecte pas le modèle de boite standard. Smiley cligne
Sujet clos
Aller à