UP PREVIOUS NEXT   Technologies Internet et Education, © TECFA
  7. Les boites CSS et leur positionnement

7. Les boites CSS et leur positionnement

7.1 Anatomie des boites

Une boite (chaque élément "bloc" sauf les tables et autres exeptions qui ont des priorités à part ) possède l'anatomie suivante:

 

Chaque élément correspond à un selecteur CSS qui permet de définir la largeur générale (des 4 cotés) ou encore la largeur de chaque côté. On peut aussi définir dessin et couleur du cadre.

7.2 Les bords, les cadres et le couleur

 

Attributs

Valeurs

se charge de

exemple

margin

pt, px, cm, %

4 marges

body {margin:1cm;}

margin-top

 

marge en haut

p {margin-top:10px;}

margin-bottom

 

marge en bas

h3 {margin-bottom:3pt;}

margin-left

 

marge à gauche

img {margin-left:50px;}

margin-right

 

marge à droite

p.citation {margin-right:10pt;}

border

pt,px, cm, %

largeur du cadre

p {border:5px;}

border-top

 

 

h1 {border-top:0.2cm;}

etc ...

 

 

 

border-style

 

style de cadre

 

 

solid

ligne simple

p {border-style:solid;}

 

double

ligne double

h1 {border-style:double;}

padding

pt,px,cm,%,etc

marge intérieures

p {padding: 5px;}

color

valeur hexa /nom

couleur d'un élément

#menu {color:#000000;}

body {color:blue;}

background

aussi

couleur de l'arrière-plan

h1, h2 {background:silver;}

 

Les bords, les cadres et la couleur (shortcuts)

Exemple:

#content {	
border-right:	2px dotted black;
border-bottom:	2px dotted black;
color: #000;
background-color:	#ffffcc;
padding: 5px 5px 5px 5px;		    /* haut, droite, bas, gauche */
margin:	5px 15px 5px 5px;
}
 
H1 {
  /* 1 cm en haut et en bas, 2cm sur les côtés */
  margin: 1cm 2cm;
  /* 3em en haut, 20% sur les côtés, et 2em en bas */
  padding: 3em 20% 2em;
}
 

Exemple 7-1: Plusieurs exemples simples avec des boites

<body style="border-style:dotted">
<h1>Boites</h1>
<p>The dashed box is for the "body", the big thick box is for a "p" tag, and the thin box is used within a "span" tag. (View the source).</p>
<p style="background-color:#d0d0d0;border-style:solid;border-width:4px;
         padding:1em;margin:0.1cm;
">
   Tout est une boite - DKS nov 2003 
   <span
 style="background-color:#d0d0d0;border-style:solid;border-width:1px;
               padding:1pt;margin:1pt;width:50%;position:relative
">
    <a href="http://validator.w3.org/check/referer">XHTML validation</a> -
   <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS validation<a>
   </span>
  </p>
<p>Voir <a href="boxing1.html">boxing1.html</a>  pour plus ... </p>
</body>

7.3 Le positionnement

#content	{	/*  les coordonnees selon l'horloge: 12, 3, 6, 9 */
	float:	left;
	width:	80%;
	color: #000;
	background-color:	#ffffcc;
	padding: 5px 5px 5px 5px;		  
	margin:	5px 5px 5px 5px;
	}
#menu	{ /* qui sera mis à droite */
	position: absolute;
	right: 0;
	width: 17%;
	font:	10px/14px verdana, sans-serif;
	color:	black;
	margin:	5px 5px 5px 5px;
	background-color: #ffffff;
	}
 

Exemple 7-2: Positionnement relatif de boites flottantes

Exemple 7-3: Positionnement relatif horizontal + vertical

Exemple 7-4: Un menu: "ul/li" comme boutons

Exemple 7-5: Positions absolues

Exemple 7-6: Layout 3-colonnes


UP PREVIOUS NEXT -- TIE