Mise en boîte (partie 1/2)

• block : une balise de type "block" sur votre page web crée automatiquement un retour à la ligne avant et après. Il suffit d'imaginer tout simplement un bloc. Votre page web sera en fait constituée d'une série de blocks à la suite les uns des autres. Mais vous verrez qu'en plus, il est possible de mettre un block à l'intérieur d'un autre, ce qui va augmenter considérablement nos possibilités pour créer le design de notre site !
• inline : une balise de type "inline" se trouve obligatoirement à l'intérieur d'une balise "block". Une balise inline ne crée pas de retour à la ligne, le texte qui se trouve à l'intérieur s'écrit donc à la suite du texte précédent, sur la même ligne (c'est pour cela que l'on parle de balise "en ligne").

Quelques exemples

Les balises universelles

• <span></span> (inline) : on l'a déjà utilisée, si vous vous souvenez bien. Je m'en suis servi pour vous montrer quelques exemples de propriétés CSS au milieu d'une ligne. Vous souvenez-vous du code ci-dessous ?
  Code : HTML

  1	<p>Comme l'a dit <span class="nom">Neil Armstrong</span> un certain 20 juillet 1969...</p>

  
  S'il existait une balise XHTML <nom></nom>, je l'aurais utilisée. Mais comme ce n'était pas le cas, j'ai dû me rabattre sur un <span> et lui appliquer une class que j'ai inventée ("nom").
• <div></div> (block) : c'est aussi une balise qui n'a aucun sens, comme span, sauf que celle-là est de type block. On va pas mal s'en servir dans les chapitres qui suivent, notamment pour créer le design de votre site. Vous allez voir qu'un design, en fait, c'est une série de blocks qu'on dispose comme on veut.

Respectez la sémantique !

• Exemple d'un span inutile :
  Je ne devrais jamais voir dans un de vos codes :
  <span class="important">
  ... alors qu'il existe la balise <strong> qui sert à ça !
• Exemple d'un div inutile :
  De la même manière, ceci est complètement absurde :
  <div class="titre">
  ... puisqu'il existe des balises faites spécialement pour les titres (<h1><h2><h3>...)

• width : c'est la largeur du block. A exprimer en pixels (px) ou en pourcentage (%).
• height : c'est la hauteur du block. Là encore, on l'exprime soit en pixels (px), soit en pourcentage (%).

1

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam lacinia leo ac nunc. Nulla aliquet. Nullam quam leo, volutpat vitae, venenatis eget, blandit eu, augue. Proin ac libero nec magna laoreet tempus. Nullam felis. Nam et libero. Sed velit dui, tempus in, nonummy venenatis, accumsan id, justo. Ut ullamcorper. Cras sem diam, vulputate nec, tempor at, pretium at, magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur sapien pede, malesuada ac, ultricies in, dignissim eget, mauris. Nullam varius diam ac ligula. Morbi mattis posuere odio. Ut mattis risus ac erat. Nam volutpat, nisl vitae venenatis mollis, ante erat tincidunt purus, nec ornare felis tellus sed purus. Phasellus orci.</p>

1
2
3

p{
   width: 50%;
   text-align: justify; /* Texte justifié pour mieux voir la largeur du block */}

1
2
3
4

p{
   width: 250px;
   text-align: justify;
}

Minimum et maximum

• min-width : largeur minimale
• min-height : hauteur minimale
• max-width : largeur maximale
• max-height : hauteur maximale

"Couper" un block avec un overflow

1
2
3
4
5

p{
   width: 250px;
   height: 100px;
   text-align: justify;
}

• visible (par défaut) : si le texte dépasse les limites de taille, le block est agrandi de manière à ce que tout soit visible. C'est ce que nous venons de constater.
• hidden : si le texte dépasse les limites, il sera tout simplement coupé. On ne pourra pas voir tout le texte.
• scroll : là encore, le texte sera coupé s'il dépasse les limites. Sauf que cette fois, le navigateur mettra en place des barres de défilement pour qu'on puisse voir tout le texte. C'est un peu comme un cadre à l'intérieur de la page.
• auto : mode "pilote automatique" :p. En gros, c'est le navigateur qui décide ou pas de mettre des barres de défilement (il en mettra si c'est nécessaire).

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

p /* Tous les paragraphes auront ces propriétés CSS */{
   width: 250px;
   height: 100px;
   text-align: justify;
}/* Et chacun des paragraphes aura en plus une valeur d'overflow différente */
.coupe{
   overflow: hidden;
}
.barres_defilement{
   overflow: scroll;
}
.auto{
   overflow: auto;
}

• La largeur : indiquez la largeur de votre bordure. Mettez une valeur en pixels (comme 2px), ou utilisez un des mots-clé suivants :
  
  • thin : bordure fine
  • medium : bordure moyenne
  • thick : bordure épaisse
  
  C'est le navigateur qui choisit le nombre de pixels qui correspond à thin, medium et thick. En général, c'est à peu près pareil sur tous les navigateurs.
  Personnellement, j'ai plutôt tendance à utiliser des valeurs en pixels au lieu de "thin" et compagnie... Mais c'est une question de goût après tout
• La couleur : c'est la couleur de votre bordure. Utilisez, comme on l'a appris, soit un nom de couleur ("black", "red"...), soit une valeur hexadécimale (#FF0000), soit une valeur rgb (rgb(198, 212, 37))
• Le type de bordure : là, vous avez pas mal de choix. Votre bordure peut être un simple trait, ou des pointillés, ou encore des tirets etc... Voici les différentes valeurs disponibles :
  
  • none : pas de bordure (par défaut)
  • solid : un trait simple.
  • dotted : pointillés.
  • dashed : tirets.
  • double : bordure double.
  • groove : en relief.
  • ridge : effet 3D.
  • inset : autre effet 3D (on a l'impression que le block forme un creux).
  • outset : encore un autre effet 3D (on a l'impression que le block est surélevé).

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

p
{
   width: 300px; /* Tous les paragraphes font 300px */
   text-align: justify; /* Tous les paragraphes sont justifiés */
}
 
.rien
{
   border: none;
}
.solid
{
   border: 2px solid black;
}
.dotted
{
   border: 2px dotted green;
}
.dashed
{
   border: 2px dashed red;
}
.double
{
   border: 4px double maroon;
}
.groove
{
   border: 4px groove teal;
}
.ridge
{
   border: 4px ridge fuchsia;
}
.inset
{
   border: 3px inset black;
}
.outset
{
   border: 3px outset black;
}

En haut, à droite, à gauche, en bas...

• border-top : bordure en haut.
• border-bottom : bordure en bas.
• border-left : bordure à gauche.
• border-right : bordure à droite.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

p
{
   width: 350px;
}
h2
{
   border-bottom: 2px solid black;
}
 
.haut_bas
{
   border-top: 1px dashed red;
   border-bottom: 1px dashed red;
}
.points
{
   border-top: 3px dotted blue;
   border-left: 2px solid green;
   border-right: 2px solid green;
   border-bottom: 3px dotted blue;
}
.tres_solide
{
   border-left: 6px solid black;
   border-right: 6px solid gray;
}

Ca marche aussi sur des balises inline !

1
2
3
4

<p>
   Vous souhaitez vous rendre vers un endroit magique ? Rien de plus simple, cliquez sur l'image ci-dessous :<br />
   <a href="http://www.siteduzero.com"><img src="images/hawai.jpg" alt="Photo de Hawaii" title="Clique pour voyager !" /></a>
</p>

1
2
3
4

a img /* Toutes les images contenues dans un lien */
{
   border: none; /* Pas de bordure */
}

A la place de "border:none", j'aurais pu utiliser "border:0px" ou encore "border:0" (ça marche aussi). D'ailleurs, la plupart des webmasters ont tendance à mettre "border:0" tout simplement parce que c'est le plus court.
N'oubliez pas : les webmasters sont des humains comme les autres. Moins ils en font, mieux ils se portent

• Les marges intérieures
• Les marges extérieures

• padding : indique la taille de la marge intérieure. A exprimer en général en pixels (px).
• margin : indique la taille de la marge extérieure. Là encore, on utilise le plus souvent des pixels.

1
2
3
4
5
6

p
{
   width: 350px;
   border: 1px solid black;
   text-align: justify;
}

1
2
3
4
5
6
7

p
{
   width: 350px;
   border: 1px solid black;
   text-align: justify;
   padding: 12px; /* Marge intérieure de 12px */
}

1
2
3
4
5
6
7
8

p
{
   width: 350px;
   border: 1px solid black;
   text-align: justify;
   padding: 12px;
   margin: 50px; /* Marge extérieure de 50px */
}

En haut, à droite, à gauche, en bas... Et on recommence !

• top : haut
• bottom : bas
• left : gauche
• right : droite

• margin-top : marge extérieure en haut.
• margin-bottom : marge extérieure en bas.
• margin-left : marge extérieure à gauche.
• margin-right : marge extérieure à droite

• padding-top : marge intérieure en haut.
• padding-bottom : marge intérieure en bas.
• padding-left : marge intérieure à gauche.
• padding-right : marge intérieure à droite.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

p
{
   width: 350px;
   border: 1px solid black;
   text-align: justify;
   padding: 12px;
   margin-bottom: 50px;
}

h1
{
   margin-left: 30px;
}

Centrer des blocks

1
2
3
4
5
6
7
8
9

p
{
   width: 350px; /* On a indiqué une largeur (obligatoire) */
   border: 1px solid black;
   text-align: justify;
   padding: 12px;
   margin: auto; /* On peut donc demander à ce que le block soit centré avec "auto" */
   margin-bottom: 20px;
}