Créer son site Web

livre création de site Internet-Bon de commande

Float - Clear - Width - Height
Propriete CSS de positionnement

Formation site internet>compléments du livre>Exemples de code XHTML et CSS>Propriétés de positionnement >

Float , clear, width, height, propriétés CSS de positionnement (dans le flux ou hors flux), sont présentées ici avec les valeurs possibles pour chacun d'elles. Cette page internet est relative à la programmation CSS (pages 93-101 sur la syntaxe). Elle complète les pages 155 à 158 (propriétés de positionnement ) du livre-atelier Créer son site Web pas à pas.

Création site Web Formation site Web Livre site Web

Positionenment hors flux

Propriétés float, clear, width, height

Exemple de la page 156 : utilisation des propriétés float, clear, width, height, positionnement hors flux avec division de l'écran en 4 parties.

Float et clear

Lignes CSS

#debutgauche
{
float:left;
/*ce cadre flottera à gauche du suivant*/
height:120px;
width:29%;
}
#debut
{
margin-left:29%;
height:120px;
text-align:center;
}
#corpsgauche
{
clear:both;
/*annule l'effet des float précédents*/
float:left;
/*ce cadre flottera à gauche du suivant*/
width:29%;
}
#corps
{
margin-left:29%;
}

Lignes XHTML correspondantes

<link rel="stylesheet" media="screen" type="text/css" href="float-clear-1.css" />
<div id="debutgauche">
<p>début gauche</p>
</div>
<div id="debut">
<p>début</p>
</div>
<div id="corpsgauche">
<p>corps gauche</p>
</div>
<div id="corps">
<p>corps</p>
</div>

Propriétés float, clear, width, height

Exemple de la page 157 : utilisation des propriétés float, clear, width, height, positionnement hors flux avec habillage d'une image.

Float et clear

Lignes CSS

#gauche1
{
	float:left;
	/*ce cadre flottera à gauche du suivant*/
	border:1px solid black;
}
#droite1
{
	border:1px solid black;
}

Lignes XHTML correspondantes

<link rel="stylesheet" media="screen" type="text/css" href="float-clear-2.css" />
<div id="gauche1">
<img src="image/logo.png" alt="texte alternatif de l'image"/>
</div>
<div id="droite1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum.</p>
</div>

Propriétés float, clear, width, height

Exemple de la page 158 : utilisation des propriétés float, clear, width, height, positionnement hors flux, division en 3 parties.

Float et clear

Lignes CSS

#gauche
{
	clear:both;
	/*annule l'effet des float précédents*/
	float:left;
	/*ce cadre flottera à gauche du suivant*/
	width:29%;
	border:1px solid black;
}
#droite
{
	float:right;
	/*ce caadre flottera à droite du suivant*/
	width:29%;
	border:1px solid black;
}
#milieu
{
	margin-left:30%;
	margin-right:30%;
	border:1px solid black;
}

Lignes XHTML correspondantes

<link rel="stylesheet" media="screen" type="text/css" href="float-clear-3.css" />
<div id="gauche">
<p>gauche</p>
</div>
<div id="droite">
<p>droite</p>
</div>
<div id="milieu">
<p>milieu</p>
</div>

Les autres propriétés CSS

Autres exemples de code CSS à copier-coller :

Cet article vous a intéressé ?
Twitter Google +
Partagez-le !

Glossaire Outils pédagogiques Formation site Web Mentions légales Contact