ࡱ > ] ` \ E" bjbj |T x x $ * * * > > > > t T > + U : \ 0 Q+ S+ S+ S+ S+ S+ S+ $ ~- 0 B w+ * 3 " U w+ + p 8 * Q+ Q+ r -* T * a1 > * =+ + 0 + * V b0 7 b0 * * 8 b0 * + w+ w+ + b0 : Table des Matires TOC \o "1-3" \u Table des Matires PAGEREF _Toc324719250 \h 2 Le positionnement enCSS PAGEREF _Toc324719251 \h 3 Changer le type PAGEREF _Toc324719252 \h 4 Positionnement absolu, fixe et relatif PAGEREF _Toc324719253 \h 7 Positionnement relatif PAGEREF _Toc324719254 \h 7 Positionnement absolu PAGEREF _Toc324719255 \h 8 Positionnement Fixed PAGEREF _Toc324719256 \h 8 Le positionnement enCSS Nous avons appris qu'il y a deux types d'lment: in-line et block. Nous savons aussi que les inline peuvent tre contenus dans des blocks alors que l'inverse n'est pas possible.Jusqu' prsent, leCSSn'a jamais cess de nous apporter des nouvelles astuces. Cette fois-ci, il nous montre un autre moyen de diffrencier les deux types d'lment. Il s'agit de ce que l'on appelle le flux. Le flux dsigne l'ordre d'affichage par dfaut des lments. Par dfaut, le navigateur affiche les lments selon leur ordre d'apparition dans le code source.Une des proprits remarquables d'une balise de type inline c'est le fait de ne pas crer un retour la ligne.Par consquent, les lments du type inline s'affichent par dfaut les uns la suite des autres sur la mme ligne. D'o leur dsignation en anglais: inline qui signifie en ligne. CodeCSS(commun aux deux types d'affichage): .vert {background-color:green; /* vert */}.rouge {background-color:red; /* rouge */}.jaune {background-color:yellow; /* jaune */} CodeXHTML: tout sur la mme ligne A l'inverse les types block s'affichent les uns en dessous des autres comme les mots japonais. Avant et aprs l'affichage d'un lment du type block, il se cre automatiquement un retour la ligne. Exemple: CodeXHTML:
Ceci est un paragraphe normal. Block relatif Pourquoi ce texte "block relatif" est-il dcal? parce que c'est relatif;
Positionnement absolu Avec le positionnement absolu, l'lment est dtach compltement du flux. Sa position n'est plus dfinie par rapport la normale. Si la page est considre comme une sorte de repre, l'lment sera plac par rapport ce repre suivant les coordonnes dfinies. Les proprits bottom, left, right ou top dfiniront ses positions comme suit: left: par rapport la gauche de la page right: par rapport la droite de la page top: par rapport au haut de la page bottom: par rapport au bas de la page Le positionnement absolu nous donne alors une possibilit plus tendue au niveau du placement des blocks. Grosso modo, il nous permet de placer un block n'importe quel endroit de la page que ce soit en haut droite, ou en bas gauche, ou etc. Positionnement Fixed La proprit position:fixed pourrait nous tre avantageuse dans certains cas. Un petit rappel, comme d'habitude: quand nous avons tudi les fond,le background-attachment:fixed nous a permis de ne pas bouger le fond mme si on fait dfiler la page.L'ide du positionnement fixe est identique. On place un lment sur la page, il y reste visible mme si on fait dfiler la page. Un cas trs pratique est le cas des menus. Si on veut par exemple qu'un menu reste visible quand le visiteur parcourt la page, on le met en position fixe sur une partie de la page. Cependant, il y a quand mme un petit souci.Certains navigateurs non conformes aux standardsCSS2 ne prennent pas en compte cette proprit. A tout problme il y a une solution. Mais ce thme ne sera pas abord dans ce tutoriel. Si vous tes confront ce problme, on vous laisse le soin de trouver la solution en question. La dernire proprit c'est la position:inherit (CSS2) qui permet de dire que l'lment en question hrite de la proprit position de son parent. Si la position du parent est de type relatif, l'lment concern sera aussi positionn de faon relative. Cours CSS Positionnement - ) ; < = > O P b c d 橍llP;" 1j h5 h5 B*OJ QJ UmH nH ph u(h5 h5 B*OJ QJ mH nH ph u 6h5 h5 5B*OJ PJ QJ \mH nH ph tHu @j h5 h5 5B*CJ OJ PJ QJ U\aJ nHph tH 7h5 h5 5B*CJ OJ PJ QJ \aJ nHph tH7h5 h5 5B*CJ( OJ PJ QJ \aJ nHph tHAj h5 5B* CJ OJ PJ QJ U\aJ mH nH phg tHu1h5 5B* CJ OJ PJ QJ \aJ nHphg tH $dh -D @&M a$gd5 ! " # $ % & ' ( ) < = 3 j f# $dh -D @&M a$gd5 $dh -D @&M a$gd5 d ~ . ϶~b 7j h5 h5 B*OJ QJ UmH nH ph u7j} h5 h5 B*OJ QJ UmH nH ph u6h5 h5 5B*OJ PJ QJ \mH nH ph tHu 1j h5 h5 B*OJ QJ UmH nH ph u7j h5 h5 B*OJ QJ UmH nH ph u(h5 h5 B*OJ QJ mH nH ph u. / 0 1 2 3 I J K e f g h i j ʵʵʵ}ʵʵʵaʵʵʵ 7jq h5 h5 B*OJ QJ UmH nH ph u7j h5 h5 B*OJ QJ UmH nH ph u6h5 h5 5B*OJ PJ QJ \mH nH ph tHu (h5 h5 B*OJ QJ mH nH ph u 1j h5 h5 B*OJ QJ UmH nH ph u7jw h5 h5 B*OJ QJ UmH nH ph u ʵʵ{_I0 1h5 h5 B*CJ OJ PJ QJ aJ nHph tH+h5 B*CJ OJ PJ QJ aJ nHph tH7h5 h5 5B* CJ OJ PJ QJ \aJ nHphg tH1h5 5B* CJ OJ PJ QJ \aJ nHphg tH@j h5 h5 5B*CJ OJ PJ QJ U\aJ nHph tH (h5 h5 B*OJ QJ mH nH ph u 1j h5 h5 B*OJ QJ UmH nH ph u7j h5 h5 B*OJ QJ UmH nH ph u G H w x $dh -D M `a$gd5 $dh -D M a$gd5 $dh -D @&M a$gd5 " G H P v w x ʴʛʴ{^> ?h5 h5 5B*CJ OJ PJ QJ \aJ mH nHph sH tH9h5 5B*CJ OJ PJ QJ \aJ mH nHph sH tH?h5 h5 6B*CJ OJ PJ QJ ]aJ mH nHph333 sH tH1h5 5B*CJ OJ PJ QJ \aJ nHph tH+h5 B*CJ OJ PJ QJ aJ nHph tH1h5 h5 B*CJ OJ PJ QJ aJ nHph tH7h5 h5 5B*CJ OJ PJ QJ \aJ nHph tH x { | M N [ \ W X $dh -D @&M a$gd5 $dh -D M `a$gd5 $dh -D M a$gd5 7 $dh $d%d&d'd-D M N O P Q a$gd5 { | L M N X Z [ \ W ⨒yy]yyAy 7h5 h5 6B*CJ OJ PJ QJ ]aJ nHph333 tH7h5 h5 5B*CJ OJ PJ QJ \aJ nHph tH1h5 h5 B*CJ OJ PJ QJ aJ nHph tH+h5 B*CJ OJ PJ QJ aJ nHph tH?h5 h5 6B*CJ OJ PJ QJ ]aJ mH nHph333 sH tH3h5 B*CJ OJ PJ QJ aJ mH nHph sH tH9h5 h5 B*CJ OJ PJ QJ aJ mH nHph sH tH W X g h i o p x ʮfJ.J 7h5 h5 6B*CJ OJ PJ QJ ]aJ nHph333 tH7h5 h5 5B*CJ OJ PJ QJ \aJ nHph tH1h5 5B*CJ OJ PJ QJ \aJ nHph tH1h5 h5 B*CJ OJ PJ QJ aJ nHph tH+h5 B*CJ OJ PJ QJ aJ nHph tH7h5 h5 5B* CJ OJ PJ QJ \aJ nHphg tH7h5 h5 5B* CJ OJ PJ QJ \aJ nHphg tH1h5 5B* CJ OJ PJ QJ \aJ nHphg tH X h i o p 7 $dh $d%d&d'd-D M N O P Q a$gd5 $dh -D M `a$gd5 $dh -D M a$gd5 $dh -D @&M a$gd5 p q { ʹ_B" ?h5 h5 5B*CJ OJ PJ QJ \aJ mH nHph sH tH9h5 5B*CJ OJ PJ QJ \aJ mH nHph sH tH?h5 h5 6B*CJ OJ PJ QJ ]aJ mH nHph333 sH tH7h5 h5 5B*CJ OJ PJ QJ \aJ nHph tH1h5 5B*CJ OJ PJ QJ \aJ nHph tH1h5 h5 B*CJ OJ PJ QJ aJ nHph tH+h5 B*CJ OJ PJ QJ aJ nHph tH7h5 h5 6B*CJ OJ PJ QJ ]aJ nHph333 tH p q ~ - k O P ] ^ $dh -D M `a$gd5 7 $dh $d%d&d'd-D M N O P Q a$gd5 $dh -D M a$gd5 { ~ k s O P Z \ ¬wwZ: ?h5 h5 5B*CJ OJ PJ QJ \aJ mH nHph sH tH9h5 5B*CJ OJ PJ QJ \aJ mH nHph sH tH7h5 h5 5B*CJ OJ PJ QJ \aJ nHph tH1h5 h5 B*CJ OJ PJ QJ aJ nHph tH+h5 B*CJ OJ PJ QJ aJ nHph tH?h5 h5 6B*CJ OJ PJ QJ ]aJ mH nHph333 sH tH9h5 h5 B*CJ OJ PJ QJ aJ mH nHph sH tH \ ] ^ ȨsWA( 1h5 h5 B*CJ OJ PJ QJ aJ nHph tH+h5 B*CJ OJ PJ QJ aJ nHph tH7h5 h5 5B* CJ OJ PJ QJ \aJ nHphg tH7h5 h5 5B* CJ OJ PJ QJ \aJ nHphg tH1h5 5B* CJ OJ PJ QJ \aJ nHphg tH?h5 h5 6B*CJ OJ PJ QJ ]aJ mH nHph333 sH tH9h5 h5 B*CJ OJ PJ QJ aJ mH nHph sH tH3h5 B*CJ OJ PJ QJ aJ mH nHph sH tH ' > ? m n y $dh -D M `a$gd5 ! $ &