28220 sujets

CSS et mise en forme, CSS3

Soucis de largeur de blocs avec le modèle de boite w3c

Hello,
Le modèle de boite w3c me pose un problème récurent dans mes développement, le voici :


<!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;
	padding:0 10px;
	margin:0;
}

#main{ background:#F00;}
#bloc1{ background:#ccc;}
#bloc2{ background:#ddd;}
</style>
</head>
<body>
<div id="main">
  <p id="bloc1">bloc 1</p>
  <p id="bloc2">bloc 2</p>
</div>
</body>
</html>


maintenant comment faire pour que bloc1 et bloc2 restent cote à cote, occupent toute la largeur ET gardent leur padding de 10px ?

bien sur je ne veux pas que le padding des blocs soit en pourcentage Smiley cligne

en résumé, comment concilier des marge fixes avec des blocs de largeur relatives ? Smiley ohwell

merci beaucoup
Comme la notion de largeur concerne le contenu et non pas padding, marges et bordures, il suffit d'ajouter à main des marges (ou padding ou bordures) qui compensent la totalité des padding que tu souhaites attribuer à tes blocs.

c'est la même question qu'ici.
Il y a aussi la solution de séparer ton contenu, afin de lui appliquer le padding directement, sans toucher à 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:57)
merci pour vos réponses

j'ai bien sur pensé à la solution de yyoupla mais définir les marges sur les blocs enfants n'est pas tout le temps faisable, surtout si on commence à imbriquer ces blocs, ou si on ne connait pas par avance le type de blocs qu'il y aura.

Par contre je n'ai pas compris ta solution Xavier, je ne vois pas comment appliquer une marge au bloc conteneur peut résoudre le problème ?
Je prends un exemple simple :
- un élément extérieur avec un padding (ou une marge selon les besoins) de 10px
- un élément intérieur qui fait 100% mais qui a un padding de 10px
Les 2 éléments auront bien la même dimension hors tout. Il faut ensuite les positionner selon les choix (marge, padding, droite gauche...)
Sujet clos
Aller à