La balise DIV < Créer des pages Web

La balise DIV définit un bloc (ou conteneur) neutre. 

Cet outil, en compagnie des CSS, permet de créer des maquettes (gabarits) de pages Web.

Objectifs pratiques

Caractéristiques

Pour exploiter les exemples...

Sélectionner le code - Copier - Coller dans NotePad++, dans Thimble...

Définir un conteneur DIV

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />

<title>Déclarer un DIV</title>

<style type="text/css">
</style>
</head>

<body>

<div>
</div>


</body> 
</html>


Remarque

Le code présenté ci-dessus n'affiche rien, car le conteneur div ne contient rien.

Attribuer un style

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />

<title>Déclarer un DIV et lui associer un style</title>


<style type="text/css">
.monbloc{
   width:250px; /* Largeur du bloc */
   height:250px; /* Hauteur du bloc */
   padding:5px; /* Marges intérieures */
   border: 1px dashed gray; /* bordure en pointillé, d'un pixel et en gris */
   font-family:"century gothic", arial, tahoma;
   font-size:16px;

.motcle{
   font-family:arial;
   font-size:20px;
   color:#ff9900;

</style>
</head>

<body>

<div class="monbloc">

<span class="motcle">Ordinateur</span> - Machine électronique de traitement numérique de l'information, à usage individuel, utilisée pour les travaux de bureau, en comptabilité et en graphisme 
Collection Microsoft® Encarta® 2004. © 1993-2003 Microsoft Corporation. Tous droits réservés.

</div>

</body> 
</html>


Le résultat dans le navigateur :

div02

 

Remarque - Pour définir la largeur d'un bloc, vous pouvez utiliser la propriété width ou la propriété max-width. Avec width, une partie du contenu sera masquée quand la largeur du conteneur sera inférieure à la largeur du bloc. Avec max-width, les dimensions du bloc s'adaptent pour que tout le contenu reste visible.

home2

 

Centrer horizontalement de manière absolue

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />

<title>Centrer un DIV en mode absolu</title>


<style type="text/css">
.monbloc{
   position:absolute;
   margin-left:50%;
/* Centre = 50% de la largeur du conteneur */
   left:-125px;
/* moins la moitié de la largeur du div */

   width:250px; /* Largeur du bloc */
   height:250px; /* Hauteur du bloc */

   padding:5px; /* Marges intérieures */
   border: 1px dashed gray; /* Bordures en pointillé, d'un pixel et en gris */
   font-family:"century gothic";
   font-size:16px;

.motcle{
font-family:arial;
font-size:20px;
color:#ff9900;

</style>
</head>

<body>

<div class="monbloc">

<span class="motcle">Ordinateur</span> - Machine électronique de traitement numérique de l'information, à usage individuel, utilisée pour les travaux de bureau, en comptabilité et en graphisme 
Collection Microsoft® Encarta® 2004. © 1993-2003 Microsoft Corporation. Tous droits réservés.

</div>

</body> 
</html>


La sortie écran est la même que celle de l'exemple précédent mais le div est centré horizontalement.

Remarques

1° La méthode utilisée fonctionne de la même manière pour toute balise du type bloc.

2° Un positionnement absolu provoque un affichage du bloc hors du flux (flux = l'ordre normal d'affichage des objets du code). Tout se passe comme si le bloc était extrait de la page et positionné ailleurs sur ladite page. 

 

home2

 

Centrer horizontalement avec les marges

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />

<title>Centrer horizontalement un DIV </title>


<style type="text/css">
.monbloc{

width:250px; /* Largeur du bloc */
height:250px; /* Hauteur du bloc */

margin-left:auto;
margin-right:auto;

padding:5px; /* Marges intérieures */
border: 1px dashed gray; /* Bordures en pointillé, d'un pixel et en gris */
font-family:"century gothic";
font-size:16px;

.motcle{
font-family:arial;
font-size:20px;
color:#ff9900;

</style>
</head>

<body>

<div class="monbloc">

<span class="motcle">Ordinateur</span> - Machine électronique de traitement numérique de l'information, à usage individuel, utilisée pour les travaux de bureau, en comptabilité et en graphisme 
Collection Microsoft® Encarta® 2004. © 1993-2003 Microsoft Corporation. Tous droits réservés.

</div>

</body> 
</html>


La sortie écran est la même que celle de l'exemple précédent.

 La solution proposée ci-contre impose la présence des déclarations suivantes :

1° définir la largeur du conteneur (width) ;

2° définir la marge à gauche sur auto (margin-left) ;

3° définir la marge à droite sur auto (margin-right).

 

home2

 

Centrer un bloc horizontalement et verticalement

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Centrer un bloc verticalement et horizontalement</title>

<style type="text/css">
#master{ 

/* Positionnement en mode absolu */
position:absolute

/* Définir le centre de l'affichage : ici, le centre de Body (= bloc positionné, par défaut) */
top:50%;
left:50%;

/* Dimensions du bloc */
width:400px; 
height:200px; 

/* Pour centrer le bloc verticalement et horizontalement */
margin-left:-200px
margin-top:-100px

border:3px dotted gray; 



</style>
</head>
<body>
<div id="master">
</div> 
</body>

</html>


Dans le code CSS, les parties en gras permettent de centrer verticalement et horizontalement le bloc dans la fenêtre du navigateur.

Le résultat dans le navigateur :

centrervh

home2

 

Cadre informatif avec une légende

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Cadre informatif avec DIV</title>

<style type="text/css">

body{
   margin-left:25%;


* {                 /* Sélecteur universel */
   font-family:arial;
   font-size:1em;
   margin:0;

.info {
   width:300px;
   height:250px;
   border :2px dotted #228B22;
   border-bottom :none;
   margin-top:20px;
   padding:5px;

}
.info:first-line { /* Définir le style de la première ligne */
   color:#FF8C00;
   font-size:1.05em;
}
.sous_titre{
   width:300px;

   height:18px;
   line-height:18px;

   font-size:13px;
   font-family:"courier new";
   text-align:right;
   color:#fff;
   border:2px dotted #228B22;
   border-top :0px solid #228B22;
   background-color:#228B22;
   padding:5px;

</style>
</head>

<body>
<div class="info">
Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
</div>

<div class="sous_titre">
Marjk - 14/03/2011
</div>

</body> 
</html> 


Le résultat dans le navigateur :

  capsule

 

home2

 

Simuler un vecteur vertical

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />

<title>Vecteur vertical avec div</title>

<style type="text/css">
div{
   width:300px;
   height:50px;
   border:1px solid gray;
   margin:0;
   margin-top:-1px;

</style>
</head>

<body>

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

</body> 
</html> 


Le résultat dans le navigateur :

vec_div

 

 

home2

 

Simuler une matrice

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />

<title>Matrice avec div</title>


<style type="text/css">
div{
   width:200px;
   height:50px;
   border:1px solid gray;
   margin:0;
   margin-top:-1px;

.gauche {
   float:left;
   margin:0;
   border:0;
   margin-left:1px;

</style>
</head>

<body>

<div class="gauche">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

<div class="gauche">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

</body> 
</html> 


Le résultat dans le navigateur :

mat_div

home2

 

Placer deux conteneurs côte à côte (1)

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />

<title>Deux cadres placés côte à côte</title>

<style type="text/css">

#gauche {
   float:left; /* Le cadre sort du flux */
   border:1px solid #DAA520;
   height:200px;
   width:200px; 
   background-color:#DAA520;
}
#droite {
   float:left; /* ou margin-left:202px;  */
   border:1px solid gray;
   height:200px;
   width:200px; 
   background-color:gray;
}

</style>
</head>

<body>

<div id="gauche"> <!-- Sort du flux car float:left-->
</div>

<div id="droite"> <!-- Sort du flux car float:left-->
</div>

<p>La suite...</p>
</body>
</html>


Le résultat dans le navigateur :

div04

Remarque

Dans cet exemple, le paragraphe se positionne à droite du deuxième bloc. Par contre, si vous remplacez float:left; par margin-left:202px; dans #droite, le paragraphe se positionnera en dessous du bloc vert.

home2

 

Placer deux conteneurs côte à côte (2)

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />

<title>Deux cadres placés côte à côte</title>

<style type="text/css">
* {
   font-family:"Century gothic";

}
#saut {
   clear:both; /* Annuler les effets de float */
}

h1 {
  font-size:1.2em;
 color:gray;
  margin-bottom:10px;



#gauche {
   float:left; /* Le cadre sort du flux */
   border:1px solid #DAA520;
   height:200px;
   width:200px; 
   background-color:#DAA520;
}
#droite {
   float:left;
   border:1px solid gray;
   height:200px;
   width:200px; 
   background-color:gray;
}

</style>
</head>

<body>
<h1> Deux DIV placés côte à côte</h1>
<div id="gauche"> <!-- Sort du flux car float:left-->
</div>

<div id="droite"> <!-- Sort du flux car float:left-->
</div>
<p>Le texte suivant reprend le cours normal du flux en tenant compte des blocs flottants à gauche : donc, le texte se place à droite de l'élément flottant.</p>
<p id="saut">Ce texte se place en dessous des DIV grâce à la déclaration clear:both; qui neutralise le float:left;.</p>
</body>
</html>


Par défaut, un DIV provoque un saut de ligne : donc, si deux blocs <div></div> se suivent dans le code, le deuxième se positionnera en dessous du premier.

Pour les placer côte à côte, il faut neutraliser le saut de ligne. Pour y arriver, nous utiliserons la propriété float : elle permet de définir un élément flottant.

Avec float:left, le deuxième DIV se placera à droite du premier. Le placement se réalise de gauche à droite.

Avec float:right, le deuxième DIV se placera à gauche du premier. Le placement se réalise de droite à gauche.

Le résultat dans le navigateur :

div03

Remarque

La propriété clear permet d'annuler l'effet d'un float. Dans notre exemple, le paragraphe d'ID saut bénéficie de clear:both. Il se positionnera en dessous des deux blocs (voir la copie d'écran présentée ci-dessus).

 

home2

 

Placer trois conteneurs côte à côte

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />

<title>Deux cadres placés côte à côte</title>

<style type="text/css">
* {
   font-family:"Century gothic";

}

h1 {
   font-size:1.3em;
   color:gray;
   margin-bottom:10px; 

h2 {
   font-size:1.1em;
   color:gray;
   margin-bottom:10px; 
   text-align:center;
   border-bottom:2px dotted gray;




#gauche {
   float:left; /* Le cadre sort du flux */
   border:2px dotted gray;
   height:300px;
   width:20%; 
   margin-right:-2px;

}
#milieu {
   float:left;
   border:2px dotted gray;
   height:300px;
   width:20%; 
   margin-right:-2px;}

#droite {
   float:left;
   border:2px dotted gray;
   height:300px;
   width:20%;
}


</style>
</head>

<body>
<h1> Trois DIV pour trois colonnes </h1>
<div id="gauche"> <!-- Sort du flux car float:left-->
<h2>Partie 1</h2>
</div>

<div id="milieu"> <!-- Sort du flux car float:left-->
<h2>Partie 2</h2>

</div>
<div id="droite"> <!-- Sort du flux car float:left-->
<h2>Partie 3</h2>

</div>

</body>
</html>


Le résultat dans le navigateur :

 div05

En modifiant la propriété width de chaque conteneur, on peut obtenir une division de la page en trois colonnes occupant la largeur totale de la page.

La ligne margin-right:-2px; permet de réaliser une superposition des bordures.

Grâce à la ligne border-bottom:2px dotted gray; de la balise h2, on crée une ligne continue horizontale (en fait, elle est composée de trois parties contiguës).

 

home2

 

Un bloc principal et trois secondaires

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8" />

<title>Un div, plus trois</title>

<style type="text/css">
h1,h2 { /* Eléments communs pour les titres */
font-family:arial;
color:gray;
}
h1 { /* Titre principal */
font-size:2em;
}
h2 { /* Titre secondaire */
font-size:1.4em;
}
#gauche p { /* Paragraphes du conteneur principal */
font-family:"century gothic";
font-size:1.1em;
line-height:1.5em;

.droite p { /* Paragraphes des conteneurs secondaires */
font-family:"century gothic";
font-size:0.9em;
line-height:1.5em;


#conteneur { /* Conteneur global pour le centrage */
width:900px;
height:640px;
margin:auto;
margin-bottom:1px;

#gauche { /* Conteneur principal */
float:left; /* Le cadre sort du flux */
border:1px solid gray;
height:580px;
width:47%;
background-color:#F5F5DC;
padding:10px;
margin-left:1px;
}
.droite { /* Conteneur secondaire */
float:right;
border:1px solid gray;
height:172px;
width:47%;
background-color:#ddd;
margin-right:1px;
margin-bottom:10px;
padding:10px;
}

</style>
</head>

<body>
<div id="conteneur">

<div id="gauche">
<h1> Titre principal </h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget mauris leo. Etiam scelerisque lectus vel justo tristique, a interdum odio feugiat. Vivamus hendrerit non mi sit amet ultrices. </p>
<p>Maecenas sed ipsum in leo vulputate pharetra sit amet nec turpis. Sed bibendum vel sem ac aliquam. Ut ac porttitor justo. In porttitor egestas elit. Aenean tincidunt fermentum nisi, ut scelerisque quam lacinia non.</p> 

</div> 

<div class="droite"> 
<h2> Titre secondaire 1</h2>
<p> 
Maecenas sed ipsum in leo vulputate pharetra sit amet nec turpis. Sed bibendum vel sem ac aliquam. Ut ac porttitor justo. In porttitor egestas elit. Aenean tincidunt fermentum nisi, ut scelerisque quam lacinia non. 
</p> 

</div> 
<div class="droite"> 
<h2> Titre secondaire 2</h2>
<p> 
Maecenas sed ipsum in leo vulputate pharetra sit amet nec turpis. Sed bibendum vel sem ac aliquam. Ut ac porttitor justo. In porttitor egestas elit. Aenean tincidunt fermentum nisi, ut scelerisque quam lacinia non. 
</p> 

</div> 

<div class="droite"> 
<h2> Titre secondaire 3</h2>
<p> 
Maecenas sed ipsum in leo vulputate pharetra sit amet nec turpis. Sed bibendum vel sem ac aliquam. Ut ac porttitor justo. In porttitor egestas elit. Aenean tincidunt fermentum nisi, ut scelerisque quam lacinia non. 
</p> 

</div> 

</div> 
<p> La suite...</p>
</body> 
</html>



Le résultat dans le navigateur :

untrois

Les quatre blocs sont contenus dans un bloc externe (nommé conteneur) d'une largeur de 900px.

 

home2

 

Habillage d'un bloc par un contenu textuel

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />

<title>Habillage d'un bloc </title>

<style type="text/css">
body{
font-family:verdana;
margin-left:400px;
margin-right:400px;

.monbloc1{
   float:left; 
   width:300px; /* Largeur du bloc */
   height:200px; /* Hauteur du bloc */
   padding:10px;
   margin-right:10px;
   background-color:#6495ED;
   border: 1px dashed gray; 

.monbloc2{
   float:right; 
   width:300px; /* Largeur du bloc */
   height:200px; /* Hauteur du bloc */
   padding:10px;
   margin-left:10px;
   background-color:#6495ED;
   border: 1px dashed gray; 


</style>
</head>

<body>
<div class="monbloc1">
Positionnement : float:left; 
<p>Le contenu suivant du flux se positionne à droite du bloc.
</div>
<p>DEBUT ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper libero et nulla tristique adipiscing. In faucibus nulla at eros suscipit rutrum. Donec ullamcorper, dolor eu eleifend egestas, ante ante lobortis orci, a rutrum nisl est et nisl. Maecenas tincidunt est quis turpis porttitor faucibus rutrum risus sollicitudin. Sed bibendum mi ut nisl ornare vitae elementum lorem pulvinar. Nullam sodales rutrum lectus, in venenatis est adipiscing in. Cras nec justo a odio lacinia fringilla. Praesent tempor, nisi sit amet iaculis posuere, dui justo posuere nulla, id hendrerit nibh elit id libero. Quisque scelerisque sem quis leo bibendum cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam egestas aliquam neque, vel porta diam lobortis sit amet. Praesent in justo justo. Fusce aliquam erat nec mauris lobortis tempus in in justo. Praesent aliquet tellus in justo convallis interdum venenatis mauris convallis. Pellentesque diam libero, pharetra id lobortis id, ultrices sed nisi.</p> 
<div class="monbloc2">
Positionnement : float:right; 
<p>Le contenu suivant du flux se positionne à gauche du bloc.
</div>
<p>DEBUT ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper libero et nulla tristique adipiscing. In faucibus nulla at eros suscipit rutrum. Donec ullamcorper, dolor eu eleifend egestas, ante ante lobortis orci, a rutrum nisl est et nisl. Maecenas tincidunt est quis turpis porttitor faucibus rutrum risus sollicitudin. Sed bibendum mi ut nisl ornare vitae elementum lorem pulvinar. Nullam sodales rutrum lectus, in venenatis est adipiscing in. Cras nec justo a odio lacinia fringilla. Praesent tempor, nisi sit amet iaculis posuere, dui justo posuere nulla, id hendrerit nibh elit id libero. Quisque scelerisque sem quis leo bibendum cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam egestas aliquam neque, vel porta diam lobortis sit amet. Praesent in justo justo. Fusce aliquam erat nec mauris lobortis tempus in in justo. Praesent aliquet tellus in justo convallis interdum venenatis mauris convallis. Pellentesque diam libero, pharetra id lobortis id, ultrices sed nisi. </p>

</body> 
</html>


Le résultat dans le navigateur :

img_div04

Remarque

Le contenu textuel est stocké dans un paragraphe normal. Dans le premier cas, le texte habille le bloc par la droite. Dans le second cas, le texte habille le bloc par la gauche.

 

home2

 

Un en-tête et deux images

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />

<title>Définir un en-tête avec deux images </title>

<style type="text/css">
.bloc1{
   float:left;

.bloc2{
   float:right; 

#header{
   width:800px;
   height:120px;
   margin-left:auto;
   margin-right:auto;
   border:1px dashed gray;
}
</style>
</head>

<body>
<div id="header">
   <img class="bloc1" src="images/img_div01.jpg">
   <img class="bloc2" src="images/img_div02.jpg">
</div>
</body> 
</html>


Le résultat dans le navigateur :

 img_div03

Remarquez l'usage d'un id pour le header : effectivement, cette partie d'une page Web est unique. Or, l'id ne peut s'appliquer qu'à un seul élément. Cette solution simplifie la maintenance de la page.

 

home2

 

Un conteneur composé d'autres conteneurs

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />

<title>Un conteneur et ses blocs</title>

<style type="text/css">

div.master { 

/* Pour définir master comme référence pour le positionnement absolu des div internes */
position:relative

width:350px; 
height:255px; 
border:1px solid gray; 
padding:5px; 

/* Pour centrer le div horizontalement */;
margin-left:auto;
margin-right:auto; 
/* Fin Pour centrer le div horizontalement */

background-color:#ffe4c4; 

.com { /* Commun pour les 4 petits blocs */
border:1px solid gray; 
width:100px; 
height:100px; 
padding:5px; 
margin:5px;
text-align:center; 
background-color:#e9967a; 

}

div.csg{ 
position:absolute; 
left:10px;
top:10px;



div.csd{ 
position:absolute; 
right:10px;
top:10px;

}
div.cig{ 
position:absolute; 
left:10px;
top:130px;



div.cid{ 
position:absolute; 
right:10px;
top:130px;

}

body{
top:0;
left:0;
}
.commun { 
color:#ffe4c4; 
font-family:"Century Gothic";
font-size:18px;

</style>
</head>
<body>

<!-- Remarquez l'espace entre master et commun : cela permet d'utiliser simultanément le style master et le style commun pour le div. -->
<div class="master commun">

<div class="csg com">
HTML
</div>

<div class="csd com">
XHTML
</div>
<div class="cig com">
HTML
</div>

<div class="cid com">
XHTML
</div>

</div>
</body> 
</html>


Le résultat dans le navigateur :

div01

 

home2

 

 

Un gabarit avec 4 blocs + menu

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />

<title>Maquette d'une page d'accueil</title>

<style type="text/css">

/* Gabarit avec quatre blocs*/
/* Largeur fixe pour le menu et le contenu */
/* --------------------------------------------------------*/

*{
font-family:"century gothic";


#master { /* Conteneur principal pour centrer le contenu */
width:800px;
margin-left:auto;
margin-right:auto;
padding:0;
}

.titre {
font-size:25px;
}

#entete { /* Bloc de l'en-tête */
margin:0;
height:90px;
border: 1px solid red;
}
#entete p {
margin:0 0 0 1em; /* Marge gauche de 1em */
}

#menu { /* Bloc du menu */
float:left;
margin:0;
width:200px;
height:550px;
border: 1px solid green;
}

#menu p {
margin:0 0 0 1em; /* Marge gauche de 1em */
}

#menu a {
font-family:verdana;
font-size:16px;
text-decoration:none;
}
#menu a:hover {
font-family:verdana;
font-size:16px;
color:green;
text-decoration:underline;


#menu li {
line-height:3em; /* Pour définir l'espace entre les options */
list-style-type:none; /* Aucune puce */



#contenu { /* Bloc du contenu */
margin:0;
margin-left:200px;
height:550px;
border: 1px solid blue;
}

#contenu p {
margin:0 0 0 1em;  /* Marge gauche de 1em */
}

#pied { /* Bloc du pied de page */
clear:both;
margin:0;
height:90px;
border: 1px solid purple;
}

#pied p {
margin:0 0 0 1em; /* Marge gauche de 1em */
}

#logo{
margin:3px;
float:left;

</style>

</head>
<body>

<div id="master">

<div id="entete">
<img id="logo" src="logo.jpg" alt="" width="120" height="80" />

<p><span class="titre">En-tête</span> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec condimentum sapien. </p>

</div>

<div id="menu">
<p><span class="titre">Menu</span></p>
<ul>
<li> <a href="#"> Option1</a> </li>
<li> <a href="#"> Option2</a> </li>
<li> <a href="#"> Option3</a> </li>
<li> <a href="#"> Option4</a> </li>
<li> <a href="#"> Option5</a> </li>
<li> <a href="#"> Option6</a> </li>
</ul>
</div>

<div id="contenu">

<p><span class="titre">Contenu</span>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec condimentum sapien. Phasellus egestas justo ac elit ullamcorper a pharetra diam faucibus.</p> 

</div>

<div id="pied">
<p><span class="titre">Pied</span> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec condimentum sapien. - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec condimentum sapien.</p>
</div>
</div>

</body>
</html>


 Objectif - Créer la structure d'une page composée d'un :

 Remarques 

1° Nous avons défini une bordure autour des blocs pour les visualiser : dans le cas d'une page définitive, vous pouvez supprimer ces bordures.

2° La taille du bloc principal vaut 800px et il sera centré latéralement.

 

Le résultat dans le navigateur :

gabarit4

Placement du menu et du contenu côte à côte.

Bloc menu : flottant et une largeur fixe de 200px. Le bloc contenu se placera à droite du bloc menu si nous définissons la marge de gauche de ce bloc à 200px.

Astuce pour le positionnement du logo : si vous définissez la marge de gauche à -125px (= la largeur de la photo + 5 px), l'image se placera juste à gauche de l'en-tête.

gabarit4b

 

home2

 

Un DIV structuré en 3 colonnes (CSS3)

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />

<title>CSS3 - définir des colonnes (columns)</title>

<style type="text/css">

.troisc {
/*------ Début Définir les colonnes ----------------*/

columns:3; /* Nombre de colonnes de l'élément */
column-width:200px; /* Largeur de chaque colonne */
column-rule-style:dotted; /* Style du filet entre les colonnes */
column-rule-width:2px; /* Largeur du filet */
column-rule-color:gray; /* Couleur du filet */

/* gap : espace entre chaque colonne */

-webkit-column-gap: 3em; /* Chrome, Safari, Opera */
-moz-column-gap: 3em; /* Firefox */
column-gap: 3em;

/*------ Fin Définir les colonnes ----------------*/

margin:auto;
padding:10px;
border:2px solid gray;
width:800px;
font-family:tahoma;
font-size:15px;
border-radius:10px;

}

h1 {

font-size:25px;
margin-bottom:1em;
color: #8fb51e;
font-family: 'Roboto Condensed',sans-serif;
font-weight: normal;

}

</style>
</head>
<body>

<div class="troisc">
   <h1>Pour une découverte de columns (CSS3)</h1>
   <p> *** du texte pour remplir ***</p>
</div>

</body>
</html>

 


Le résultat dans le navigateur :

columns

 

Remarque

Les deux lignes suivantes :

columns:3; /* Nbre de colonnes de l'élément */
column-width:200px; /* Largeur de chaque colonne */

se condensent en :

columns:200px 3;

 

home2

 

 

Créer une maquette avec un menu vertical

Cette solution utilise un div flottant à gauche (float:left;) pour le menu.

Voir l'exemple

Aligner une image verticalement et horizontalement dans un div

<!DOCTYPE html>
<html lang="fr"> 
<head> 
<meta charset="utf-8">
<title>Image centrée V et H avec FLEX</title> 
<style type="text/css"> 
#test { 
   display:flex;
   justify-content:center; /* Centrer latéralement le contenu de FLEX */
   max-width:450px;
   height:350px;
   border:1px solid gray; 
   border-radius:10px;
   margin:auto;
}
#demo {
   align-self:center; /* Indispensable - La propriété align-self détermine comment aligner les éléments flexibles sur une même rangée.(Source : https://developer.mozilla.org/fr/docs/Web/CSS/align-self */
   border-radius:10px;
}
</style> 
</head> 
<body>
   <div id="test">
      <img id="demo" alt="avions" src="avion4.jpg" width="400" height="243" />
   </div>
</body>
</html> 

avion

Maintenir la taille d'un div, quelles que soient les valeurs de border et de padding.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
* {/* padding et border n'influenceront plus la largeur et la hauteur d'un bloc */
   box-sizing: border-box;  
}
h2 {
   color:gray;
   font-family:calibri;
   font-weight:normal;
   width:500px;
   margin:auto;
   margin-bottom:30px;
}
.div1, .div2 {
   margin:20px auto;

.div1 {
   width: 300px;
   height: 100px;
   border: 1px solid gray;
}

.div2 { /* Malgré padding et border : largeur div1 = largeur div2 + idem pour la hauteur */
   width: 300px;
   height: 100px; 
   padding: 50px;
   border: 20px solid lightgreen;
}
span {
   font-weight:bold;
}

</style>
</head>
<body>
<h2>Grâce à <span>box-sizing:border-box;</span>, le rendu des deux div sera le même au niveau de la hauteur et de la largeur, malgré le padding présent dans le second div.</h2> 

<div class="div1">Un div sans padding</div>

<div class="div2">Un div avec padding:50px;</div>

</body>
</html>

home2

Une galerie de 6 photos (avec FLEX)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Galerie de 6 photos </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
img { /* Ajustement automatique de la taille des images en respectant les proportions */
   width: 30%;
   height: auto;
   border:3px solid antiquewhite; /* Bordures de l'image */
   box-shadow:5px 5px 5px #888; /* Ombre de l'image */
   border-radius:10px; /* Bords arrondis */

}
.conteneur {
   display:flex;
   flex-flow:row; /* Affichage horizontal du contenu */
   justify-content:space-between; /* Espace entre chaque photo */
   align-items:center; /* Centrer verticalement dans le conteneur */
   min-height:auto; /* Ajustement automatique de la hauteur du conteneur */
   border-radius:10px;
   padding:20px;
   box-sizing:border-box;
   margin-bottom:30px;
   background-color:antiquewhite;

</style>
</head>

<body>

<div class="conteneur">
   <img src="img3.jpg" width="400" height="266">
   <img src="img3.jpg" width="400" height="266">
   <img src="img3.jpg" width="400" height="266">
</div>

<div class="conteneur">
   <img src="img3.jpg" width="400" height="266">
   <img src="img3.jpg" width="400" height="266">
   <img src="img3.jpg" width="400" height="266">
</div>

</body>
</html>

flex

home2

 

Valid XHTML 1.0 Transitional   CSS Valide !