28172 sujets

CSS et mise en forme, CSS3

Documentation sur l'imbrication des boîtes.

Salut,

Je voudrais avoir le lien d'une documentation ou d'un cours sur l'imbrication des boîtes en CSS, par exemple j'ai remarqué que si je mets un p à l'intérieur d'un autre p, la boîte contenue aura par défaut ses bordures hautes et basses espacées de 16 pixels par rapport aux bordures de la boîte contenante et la boîte contenante aura ses bordures en gras (sauf les droites/gauches qui seront invisibles ?)comme j'ai pu le voir sur cet exemple

http://img214.imageshack.us/img214/846/capturecss.png

C'est ce genre de choses que je recherche, où pourrais-je trouver des infos sans faire des tests ? Merci

Ps : le CSS se résume à ça :

p
{
  border : 1px solid black;
}

Modifié par newlight (12 Nov 2010 - 03:47)
Tu n'as pas le droit de mettre un p dans p.

Donc ce qui se passe avec ton exemple c'est ça :

1 - le parser lit ton html et trouve le premier <p>
2 - il trouve le second <p>, comme il ne peux pas mettre un <p> dans un <p>, il suppose que tu fermes implicitement le premier <p> (le tag de fermeture </p> est optionnel)
3 - il lit le </p> et ferme ton second <p>
4 - il trouve un </p> sauf que il n'a pas de <p> ouvert (rappelle toi ton premier <p> à été fermé implicitement) donc la deux possibilités, selon les navigateurs :
4a - il insère implicitement un troisième <p> (opera, IE et chrome font ça)
4b - il ignore le tag de fermeture et ne fais rien (firefox)

Donc quand tu écris ça :
<!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>
<style type="text/css">p{border : 1px solid black;}</style>
</head>
<body>
	<p><p>test</p></p>
</body>
</html>


Le navigateur lit ça :
<!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>
<style type="text/css">p{border : 1px solid black;}</style>
</head>
<body>
	<p></p>
	<p>test</p>
	<p></p>
</body>
</html>


ou ça :
<!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>
<style type="text/css">p{border : 1px solid black;}</style>
</head>
<body>
	<p></p>
	<p>test</p>
</body>
</html>


Ce qui explique tes "bordures grasses" (qui sont en fait les bordures hautes et basses des <p> vides) l'abscence de bordure droite et gauche (les <p> vides font 0px de hauteur) et l'espacement c'est simplement les marges par défaut entre tes <p>.
PS : la fermeture implicite des tags est une mauvaise pratique qui porte à confusion.
Elle est permise en HTML (basé sur SGML) : http://www.w3.org/TR/REC-html40/intro/sgmltut.html#h-3.2.1
a écrit :
Some HTML element types allow authors to omit end tags (e.g., the P and LI element types). A few element types also allow the start tags to be omitted; for example, HEAD and BODY. The HTML DTD indicates for each element type whether the start tag and end tag are required.


Mais pas en XHTML (basé sur XML) : http://www.w3.org/TR/xhtml1/#h-4.3
a écrit :
In SGML-based HTML 4 certain elements were permitted to omit the end tag; with the elements that followed implying closure. XML does not allow end tags to be omitted. All elements other than those declared in the DTD as EMPTY must have an end tag. Elements that are declared in the DTD as EMPTY can have an end tag or can use empty element shorthand (see Empty Elements).
Merci pour ta réponse qui m'a fait comprendre ce casse-tête, je croyais que les bordures grasses appartenaient au grand <p> mais enfaite c'était deux <p> dont les bordures basses et hautes étaient adjacentes ce qui explique l'effet gras c'est ça Smiley biggrin ?
Très bonne explication de MonsieurY, rien à redire (et pourtant je suis un chieur Smiley lol ).

J'ajouterai juste pour info que si tu explores ton code HTML avec un outil tel que Firebug (extension pour Firefox) ou Web Inspector (intégré à Safari et Chrome), tu peux voir le code HTML tel qu'il est interprété par le navigateur (et pas tel que tu l'as écrit). C'est très utile. Et si le navigateur interprète mal, à priori c'est toi qui a fait une erreur.
Modifié par Florent V. (12 Nov 2010 - 19:46)
Sujet clos
Aller à