Les feuilles de style - 3 : Positionnement

• Le positionnement : utilisation des balises block
• Initiation
• Liens (alsacreations.com, openweb.eu.org, csszengarden.com, Pompage.net)
• Compatibilité d'Internet Explorer avec les CSS
• L'héritage par imbrication
• Les valeurs dans les balises margin, padding
• Les balises block et inline

Page suivante :

• Les feuilles de style - 4 : Menus déroulants et divers

 

 

Le positionnement : utilisation des balises block :

Ici, j'aborde le positionnement des blocs 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 :

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 :

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.

 

 

 

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 :

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;
3 valeurs	top, right et left, bottom haut, droit et gauche, bas	margin:20px 0 10px;
4 valeurs	top, right, bottom, left haut, droit, bas, gauche	margin:0 30px 0 15px;

 

On peut également mettre :

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

 

Voir aussi :
http://www.aidenet.com/css/css42.htm

 

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 bailses 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 :

 

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