Internet > Création web > Les CSS - 3 : Positionnement

Les feuilles de style - 3 : Positionnement

Page suivante :

 

 

Le positionnement : utilisation des balises block :

Ici, j'aborde le positionnement des blocs en CSS

 

****Quelques pages très simples où l'on comprend tout sur la position des bloc :
http://deptinfo.cnam.fr/~pons/TOTO/positionement.html

 

Une architecture très simple (les noms de blocs sont à choisir ses goût)

 

3 étapes :
- on définit les caractéristiques des blocs dans la feuille de style
- on ordonne les blocs et on remplit leur contenu dans le fichier html
- on affiche le résultat.

Approximatif :)

 

PS : les lignes vides sont là pour clarifier, mais pas nécessaires

 

1 - Dans la feuille de style :

On définit les caractéristiques des blocs.

#conteneur{position:relative;width:1000px;margin-left:auto;margin-right:auto;text-align:left;}

#entete{position:absolute;width:1000px;height:110px;margin-top:0px;vertical-align:bottom;background-image:url(images/menu/fond.png);z-index:5;}

#content{position:absolute;width:998px;margin-top:221px;background-color:#EEE;color:#000;border:1px solid #CCC;}

 

#bloc_bas{float:left;margin-bottom:0px;margin-top:10px;width:980px;color:#009;background-image:url(images/baie_concarneaum.jpg);text-align:center;padding:10px;}

 

2 - Dans le fichier html

On ordonne les blocs successivement

<div id="conteneur">

<div id="en_tete">
</div>

<div id="content">

<div id="bloc_gauche">
<!-- le menu du site -->
</div>
<div id="bloc_central">
<!-- la partie principale -->
</div>
<div id="bloc_bas">
<!-- le pied de la page -->
</div>

</div>

</div>

 

3 - Résultat :

Page en CSS

 

 

Initiation au positionnement :

En CSS, on n'utilise pas de tableaux pour mettre en page images et texte, mais des blocs que l'on positionne les uns par rapport aux autres...

On utilise des balises <div> pour positionner les blocs.
On utilise des id et des class pour définir les styles.

Exemple :

Dans la page HTML :

<div id="en_tete">
<!-- le bloc supérieur -->
</div>

<div id="menu">
<!-- le bloc gauche -->
</div>

<div id="corps">
<!-- le bloc central -->
</div>

<div id="pied_de_page">
<!-- le bloc du bas -->
</div>

Ces blocs (<div>) seront définis dans la feuille de styles (CSS) :

Dans la feuile de styles (CSS) :

Contenu minimum et approximatif d'une feuille de style :

#en_tete { /* bloc supérieur */
width: 1000px;
height: 100px;
margin-bottom: 10px;
}

#menu { /* menu */
float: left;
width: 200px;
}

#corps { /* contenu de la page */
margin-left: 220px;
margin-bottom: 10px;
}

#pied_de_page { /* bloc bas */
text-align: center;
]

PS : les remarques sont entourées des signes /* et */

 

 

Liens sur le positionnement :

Quelques pages essentielles :

Openweb :
- Initiation au positionnement CSS : 1.flux et position relative
- Initiation au positionnement CSS : 2.position float
- Initiation au positionnement CSS : 3. position absolue et fixe

Alsacréations :
- Comprendre la structure HTML et le rendu CSS des balises : bloc et en-ligne
- Comment positionner les éléments en CSS ?
- Guide de survie du positionnement CSS

 

 

Alsacreations.com - Tutoriels web - CSS

Alsacreation.com - Initiation au positionnement CSS (partie 2)

 

Quelques sites qui parlent du positionnement :

alsacreations.com :

 

Alsacreation.com - Guide de survie du positionnement CSS

Alsacreation.com - Initiation au positionnement en CSS (partie 1)
Alsacreation.com - Initiation au positionnement en CSS (partie 2)

Alsacreation.com - Empêcher les flottants de dépasser de leur conteneur
propriété CSS float - La propriété overflow - La propriété clear

 

openweb.eu.org :

 

Openweb.eu.org - Initiation au positionnement CSS : 1.flux et position relative
Par défaut, les boîtes de type bloc seront affichées dans une succession verticale
Par défaut, les boîtes de type en-ligne sont affichées dans une succession horizontale.

Openweb.eu.org - Initiation au positionnement CSS : 2.position float
Openweb.eu.org - Initiation au positionnement CSS : 3. position absolue et fixe

 

csszengarden.com :

 

Pompage.net :

 

 

http://www.w3.org/Style/CSS/

 

 

Le modèle "Parent-Enfant(s)" - L'Héritage par imbrication des classes ou des id

Le modèle "Parent-Enfant(s)" - L'Héritage par imbrication des classes ou des id

Alsacreations.com - Comprendre l'héritage et la parenté des styles CSS (Essentiel)
... L'héritage des CSS est fondé sur le modèle Parent-Enfant(s) : chaque élément Enfant reçoit en héritage tous les styles de son élément Parent. Par exemple, la balise <html> est parent de <body>, et <table> est parent de <tr> qui lui-même est parent de <td>...

Voir aussi le site :
http://giminik.developpez.com/xhtml/

 

 

Les valeurs dans les balises margin, padding

Selon la marge ou la bordure que l'on veut obtenir, on est amené à déclarer une à quatre valeurs :

valeurs effets code visualisation
1 valeur les quatre côtés margin:0;  
2 valeurs

top et bottom, right et left

haut et bas, droit et gauche

margin:0 10px; Marges en CSS : 2 valeurs
3 valeurs

top, right et left, bottom

haut, droit et gauche, bas

margin:20px 0 10px; Marges en CSS : 3 valeurs
4 valeurs

top, right, bottom, left

haut, droit, bas, gauche

margin:0 30px 0 15px; Marges en CSS : 4 valeurs

 

On peut également mettre :

margin-top:12px;
margin-left:255px;

 

 

Zonecss.fr - Propriété line-height - CSS
"La propriété CSS line-height permet de spécifier la hauteur d'une ligne de texte et donc aussi de gérer l'espace entre les lignes..."

 

 

Les balises block et les balises inline :

Il y a deux catégories de balises :

Les balises block :
exemple : <div></div>, <p></p>, <h1></h1>, etc.
- elles sont "indépendantes" et constituent chacune un élément "à part",
- il y a toujours un espace au-dessus et au-dessous d'une balise block,
- elles peuvent être à l'intérieur d'une autre balise block.

Les balises inline :
exemple : <a></a>, <span></span>, </strong></strong>, <img />, etc.
- elles sont toujours à l'intérieur d'une balise block.

 

exemple :

<p>Le site <strong>Aidewindows.net</strong> vous aide à créer votre page web</p>

Ce qui donne :

Le site Aidewindows.net vous aide à créer votre page web

 

display: block; = permet de transformer une balise inline en balise block

 

Par défaut, les boîtes de type bloc seront affichées dans une succession verticale
Par défaut, les boîtes de type en-ligne sont affichées dans une succession horizontale.

 

 

Compatibilité d'Internet Explorer avec les CSS :

Internet Explorer 6.x (et précédents) interprètent mal les CSS.
Cela peut entraîner des différences à l'affichage (voir des incompatibilités) :

Un problème provient du calcul des marges, différent sur Internet Explorer (anciennes versions).
D'autres problèmes concernent la reconnaissance de certaines balises.

 

Marges en CSS

 

 

Gérer les modèles de boîtes CSS standard et Microsoft :
http://openweb.eu.org/articles/dimensions_boites_css/

 

Alsacreations.com - A propos du Modèle de boîte Microsoft (ou "quirks")

 

Alsacreations.com - HasLayout et bugs de rendu dans Internet Explorer 6-7

 

 

Les bug d'Internet Explorer en CSS - Bug IE6 - Bug IE7
Compatibilité entre navigateurs Firefox 2 et 3 :
"1# Bien renseigner son doctype :
Essentiel à la bonne compréhension de votre code, le doctype va donner une clé à IE 6 pour interpréter votre code HTML. En l'absence de Doctype, IE passe en mode QUIRKS et point de vue affichage c'est la catastrophe !"

 

Solutions :

Des solutions sont possibles :

Internet Explorer peut fonctionner en deux modes :
- le mode Standard,
- le mode Quirk
css.maxdesign.com - The IE box model and Doctype modes (anglais)
hsivonen.iki.fi - Activating Browser Modes with Doctype (anglais)

Contourner les défauts d'Internet Explorer :
fastclemmy.com - Contourner les défauts/limitations/bugs d'Internet Explorer

 

La meilleure solution consistera à utiliser une feuille de style supplémentaire qui contiendra les styles modifiés à l'intention d'Internet Explorer.
Cette feuille de style sera mentionnée dans la partie head de la page par une instruction semblable :

<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="styles_ie.css" />
<![endif]-->