Réussir son site web avec XHTML et CSS

Transcription

1 Leçon 10 Réussir son site web avec XHTML et CSS Positionnement et mise en page par le CSS 1. Les 3 modes d affichage pour les éléments HTML Bloc / block En-ligne / inline Invisible / not displayed... 1 Transformer le mode d affichage Les balises universelles en HTML... 2 <span></span> (inline)... 2 <div></div> (block) Le dimensionnement des blocs Les marges des blocs... 3 Les marges intérieures et extérieures... 3 Le positionnement des marges... 4 Centrer des blocks La notion de "flux" Le positionnement par éléments flottants... 4 Faire flotter une image... 5 Créer une lettrine... 5 Stopper un flottant Le positionnement par la propriété position... 6 La position absolue... 7 La position fixe... 8 La position relative... 8 La position statique Les 3 modes d affichage pour les éléments HTML Par défaut, les éléments HTML sont affichés selon l'un des modes suivants : 1- Bloc / block Occupe toute la largeur disponible. Lorsque 2 éléments blocs se suivent dans une page, ils sont positionnés (par défaut) l'un sous l'autre. Exemple typique d'élément bloc : <p> ; <h1> <h6> ; <ul> ; <ol> ; <table> ; 2- En-ligne / inline N'occupe que la largeur indispensable à l'affichage du contenu et ne provoque pas de retour à la ligne. Lorsque 2 éléments en-ligne se suivent dans une page, ils sont positionnés l'un à côté l'autre (si la largeur de page le permet). Exemple typique d'élément en-ligne : <a> ; <strong> ; <img /> ; <br /> 3- Invisible / not displayed Certains éléments ne servent qu'à apporter des informations invisibles pour l'internaute. Exemple typique d'élément non affiché : l'élément <meta> Transformer le mode d affichage Il est parfois nécessaire en CSS de changer le mode d affichage d un élément HTML. C est le rôle de la propriété CSS display : Transformer le type d affichage display block (la balise concernée deviendra de type block) inline (la balise concernée deviendra de type inline) none (la balise concernée deviendra de type not displayed) Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 10 p.1/8

2 2. Les balises universelles en HTML Les balises universelles sont des balises qui n ont aucun sens particulier (contrairement à <p> qui veut dire paragraphe, <img /> qui veut dire insérer une image, <strong> qui veut dire important,...). Le principal intérêt de ces balises c'est de pouvoir appliquer une class (ou un id) pour le css quand aucune autre balise ne convient. Il existe 2 balises génériques, une de type inline et l'autre de type est block : <span></span> (inline) Exemple : <p>comme l'a dit <span class="nom">neil Armstrong</span> un certain 20 juillet </p> <div></div> (block) Exemple : <div id="entete"> </div> 3. Le dimensionnement des blocs Par défaut, un block prend 100% de la largeur disponible. Un block a des dimensions précises. Il a une largeur et une hauteur : Taille des blocs width largeur du block. À exprimer en pixels (px) ou en pourcentage (%) height hauteur du block. À exprimer en pixels (px) ou en pourcentage (%) Vous allez changer le style des titres de niveau 2. h2 width: 50%; height: 50px; Pour changer la largeur du site, il suffit de spécifier une largeur au corps des pages : Modifiez dans Notepad++ la feuille de style style.css en rajoutant le code suivant : body width: 799px; Enregistrez la feuille de style et observez les changements dans tout le site. Remarque Il peut être utile de demander à ce qu'un block ait une taille minimale ou maximale. C'est le rôle des 4 propriétés CSS suivantes : min-width : largeur minimale min-height : hauteur minimale max-width : largeur maximale max-height : hauteur maximale Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 10 p.2/8

3 4. Les marges des blocs Les marges intérieures et extérieures Tous les blocks possèdent des marges. Il existe 2 types de marges : les marges intérieures et les marges extérieures. blabla blabla height (hauteur) Padding Margin Width (largeur) padding Espace entre le texte et la bordure : marge intérieure (en vert). margin Espace entre la bordure et le prochain block : marge extérieure (en rouge). En CSS, on peut modifier la taille des marges avec les 2 propriétés suivantes : Les marges des blocs padding margin indique la taille de la marge intérieure. A exprimer en général en pixels (px). indique la taille de la marge extérieure. Là encore, on utilise le plus souvent des pixels. h2 padding: 20px; h2 margin: 30px; Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 10 p.3/8

4 Le positionnement des marges Tout comme pour les bordures, vous avez la possibilité de régler chacune des 4 marges. Voici la liste pour margin : margin-top : marge extérieure en haut. margin-bottom : marge extérieure en bas. margin-left : marge extérieure à gauche. margin-right : marge extérieure à droite Et la liste pour padding : padding-top : marge intérieure en haut. padding-bottom : marge intérieure en bas. padding-left : marge intérieure à gauche. padding-right : marge intérieure à droite. Vous allez indiquer un espace en bas de chaque paragraphe. p padding: 12px; margin-bottom: 30px; Centrer des blocks Il est tout à fait possible de centrer des blocks, c'est même très pratique pour réaliser un design centré quand on ne connaît pas la résolution du visiteur. Cela ne fonctionne que si vous avez indiqué une largeur précise (width) au block. Il suffit pour cela de mettre la valeur auto à la propriété margin. Vous allez centrer tout le contenu du site : body margin: auto; 5. La notion de "flux" Le flux, c'est l'ordre d'affichage des divers éléments qui composent votre page. Autrement dit, les éléments se succèdent dans l'ordre où ils sont déclarés dans le code HTML. 6. Le positionnement par éléments flottants La propriété float existe avant tout pour répondre à un besoin typographique précis : la création d'habillages. Un habillage consiste à "enrouler" un texte autour d'un élément (graphique ou texte). Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 10 p.4/8

5 Les flottants float left right l'élément flottera à gauche l'élément flottera à droite Remarque Le flottant doit être placé avant le texte qui va l entourer, qu il flotte à gauche ou à droite. Faire flotter une image Vous allez faire "flotter" les images suivantes de la page Histoire et de la page Carnaval en créant une class imageflottante..imageflottante float: right; Enregistrez la feuille de style. Rajoutez l identifiant imageflottante dans les attributs des balises images concernées : <img src="" class="imageflottante" alt="" /> Enregistrez les pages et observez les changements. Changez l alignement des class imageflottante pour aligner les images concernées à gauche. Ajoutez une marge extérieure de 15px à droite et en-dessous de ces images. Créer une lettrine Remarque Pour travailler sur la première lettre d un paragraphe, il suffit d utiliser le pseudo-élément first-letter Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 10 p.5/8

6 Vous allez créer une lettrine au début de chaque paragraphe de la page Localisation & Climat..lettrine:first-letter float: left; font-size: 3em; font-weight: bold; margin-right: 5px; Ajoutez aux 2 paragraphes de la page Localisation & Climat l identifiant class="lettrine". Enregistrez la feuille de style. Stopper un flottant Quand vous mettez en place un flottant, tout le texte suivant l entoure. Si vous voulez stopper cet effet à un moment, il faut utiliser la propriété clear. Stopper un flottant left Stoppe l effet d un float:left clear right Stoppe l effet d un float:right both Stoppe l effet d un float:left ou float:right Vous allez stopper l effet du float:left pour le deuxième paragraphe de la partie Les carnavaliers de la page Carnaval..dessous clear: both Ajoutez au paragraphe concerné de la page Carnaval l identifiant class="dessous". Enregistrez la feuille de style et observez le résultat. 7. Le positionnement par la propriété position La propriété position va permettre de gérer la position dans la page des éléments de type block ou ayant la propriété display:block. C'est la propriété vers laquelle l'on se doit de se tourner en premier lieu dès que l'on considère une mise en page pour laquelle les possibilités du flux ne suffisent plus, et c'est là toute la raison d'être de cette puissante propriété. Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 10 p.6/8

7 La position d un élément position absolute fixed relative static permet de placer un block n'importe où sur la page (en haut à gauche, en bas à droite, tout au centre etc...) idem au positionnement absolu, mais cette fois le block reste toujours visible, même si on descend plus bas dans la page. permet de déplacer un block par rapport à sa position normale valeur par défaut La propriété position doit être complétée par les 4 propriétés suivantes qui vont préciser la position de l élément par rapport à la page : La position d un élément left right top bottom longueur (px) ou % ou auto position par rapport à la gauche de la page position par rapport à la droite de la page position par rapport au haut de la page position par rapport au bas de la page La position absolue La position absolue (position:absolute) permet de ne pas dépendre de l'ordre dans lequel les éléments HTML sont déclarés dans le code, contrairement aux flottants. La position absolue s'affranchit définitivement du cordon liant jusqu'alors intimement contenu et présentation. L'élément étant totalement extrait du flux, il ne dépend plus du tout des éléments qui le côtoient. Vous allez créer un message Site en construction sur la page d accueil que vous allez positionner à différents endroits de la page : Modifiez dans Notepad++ la page index.html en ajoutant à la fin du corps le code XHTML suivant : <div id="message">site en construction!!!</div> Modifiez dans Notepad++ la feuille de style style.css en ajoutant le code CSS suivant : #message background-color: yellow; border: 4px solid red; position: absolute; left: 300px; top: 130px; Après avoir tout enregistré, observez le résultat et faites défiler la page. Changez les valeurs gauche et droite à 50% et observez. Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 10 p.7/8

8 La position fixe Le positionnement fixe (position:fixed) s'apparente au positionnement absolu, sauf que cette fois le block reste fixe, même si on descend plus bas dans la page. Fixez la position du message en modifiant la valeur de la propriété position et observez le changement en faisant défiler la page. La position relative La position relative (position:relative) permet de décaler un élément par rapport à une position de référence: celle qu'il avait dans le flux. Les éléments qui le suivent et le précèdent ne sont pas influencés par ce décalage puisqu'ils considèrent que l'élément est toujours dans le flux à sa position initiale. En pratique, ce positionnement est plus rare bien qu'il puisse s'avérer utile dans certains cas. Vous allez changer le comportement des éléments placés entre deux balises <strong>. Modifiez dans Notepad++ la feuille de style style.css en ajoutant le code CSS suivant : strong background-color: red; color: yellow; Après avoir enregistré, observez le résultat sur la page d accueil. Point d origine (0,0) Ajoutez à la balise strong les propriétés suivantes et observez. strong background-color: red; color: yellow; position: relative; left: 55px; top: 10px; 55px 10px La position statique La position statique (position:static) correspond simplement à la valeur par défaut d'un élément du flux. Il n'y a que peu d'intérêt à la préciser, si ce n'est dans le but de rétablir dans le flux un élément en particulier parmi une série qui serait positionnée hors du flux. Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 10 p.8/8