Accueil > 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

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 :

Sur Openweb :
http://openweb.eu.org/articles/initiation_flux/

Sur AlsaCreations :
http://css.alsacreations.com/Bases-et-indispensables/Comprendre-le-positionnement-des-balises-en-CSS

Sur AideJavaScript :
http://www.aidejavascript.com/article93.html

Sur le site du Zero :
http://www.siteduzero.com/tuto-3-42-1-mise-en-boite-partie-1-2.html
Créons le design de votre site web !
http://www.siteduzero.com/tutoriel-3-13572-creons-le-design-de-votre-site-web.html

 

Quelques sites qui parlent du positionnement :

alsacreations.com :

 

Guide de survie du positionnement CSS
http://www.alsacreations.com/article/lire/53-guide-de-survie-du-positionnement-css.html

Initiation au positionnement en CSS :
http://www.alsacreations.com/article/lire/533-initiation-au-positionnement-en-css-partie-1.html
http://www.alsacreations.com/tuto/lire/608-initiation-au-positionnement-css-partie-2.html

Empêcher les flottants de dépasser de leur conteneur
propriété CSS float - La propriété overflow - La propriété clear
http://www.alsacreations.com/astuce/lire/7-depassement-flottants-css.html

 

openweb.eu.org :

 

Initiation au positionnement CSS : 1.flux et position relative
http://openweb.eu.org/articles/initiation_flux
Initiation au positionnement CSS : 2.position float
http://openweb.eu.org/articles/initiation_float
Initiation au positionnement CSS : 3. position absolue et fixe
http://openweb.eu.org/articles/initiation_absolue

 

csszengarden.com :

 

Pompage.net :

 

 

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

 

 

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/

CSS et Internet Explorer pour Windows :
http://www.christopher-jablonski.com/fr/reperes/ie6.shtml

 

A propos du Modèle de boîte Microsoft (ou "quirks") :
http://www.alsacreations.com/tuto/lire/573-A-propos-du-Modele-de-boite-Microsoft-ou-quirks.html

 

HasLayout et bugs de rendu dans Internet Explorer 6-7
http://www.alsacreations.com/article/lire/76-haslayout-internet-explorer.html

IE Windows, layout et bugs de rendus CSS
http://www.test.blog-and-blues.org/haslayout/

 

Les bugs des navigateurs :
http://www.alsacreations.com/articles/compatibilite/

Model Box et Doc Switching :
http://www.siteduzero.com/tuto-3-11595-1-introduction.html

 

Les bug d'Internet Explorer en CSS - Bug IE6 - Bug IE7
Compatibilité entre navigateurs Firefox 2 et 3 :
http://esprit-creatif.blog.mongenie.com/index.php?idblogp=406297
"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
http://css.maxdesign.com.au/listamatic/about-boxmodel.htm (anglais)
http://hsivonen.iki.fi/doctype/ (anglais)

Contourner les défauts d'Internet Explorer :
http://www.fastclemmy.com/index.php?
viewlog=75_contourner-les-defauts-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]-->

Voir : Les syntaxes de commentaires conditionnels pour IE Windows :
http://www.blog-and-blues.org/articles/
Les_syntaxes_de_commentaires_conditionnels_pour_IE_Windows

 

http://www.softibox.com/softi_forum/topic-32.html

 

 

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

Comprendre l'héritage et la parenté des styles CSS (Essentiel) :
http://www.alsacreations.com/tuto/lire/545-Comprendre-l-heritage-et-la-parente-des-styles-CSS.html
... 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;

 

 

Line-height :
http://www.zonecss.fr/style_css/feuille_css_line_height.html

 

 

Les balises block et les balises inline :

En XHTML, 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

 

 

Haut de page

| Copyright | Histoire d'Aidewindows | Assistance à domicile | Concarneau | Aide Informatique et Internet : www.ai2.fr

Hit-Parade des sites francophones