Valeur de cette activité : 5 points
Compétence :
14- Css : Le positionnement

A-Module 03 : CSS : 5 points - difficulté : 2

CSS Le Positionnement

Présentation

L'utilisation des feuilles de style nous permet de spécifier l'emplacement d'un objet (image) dans une page web.

Cette activité vous permettra de vous familiariser avec cette fonction du langage CSS.

Consultez ce site (CLIQUEZ ICI) au besoin pour en connaître davantage sur le positionnement CSS.

Description

Dans cette activité, vous aurez à placer en utilisant le langage CSS 5 drapeaux d'un pays au bon endroit sur une carte du monde.

  1. Ajoutez une page à votre portfolio en affichant la directive 18310

  2. Affiche les assistants et

  3. Inscrivez dans le champ titre : Css : Le positionnement

  4. Sélectionnez la matière : informatique

  5. Inscrivez le no de la directive : 18310

  6. Inscrivez dans votre page le titre de niveau 1 : Le positionnement CSS

  7. Insérez l'image suivante (utilisez cet URL : http://ladifference.info/i/images/cartemonde2.gif ) dans votre page en position gauche (left) de 150 px et haute (top) de 550 px en utilisant le code CSS de positionnement absolu : voir l'exemple ci=dessous (en jaune).

    <img src="http://ladifference.info/i/images/cartemonde2.gif" style="position:absolute; top:550px;left:150px;" /> EXPLICATIONS : source : http://fr.selfhtml.org/css/proprietes/positionnement.htm



  8. Consultez ce site CLIQUEZ ICI et récupérez (téléchargez les images dans votre espace de téléchargement) les drapeaux de 5 pays différents de votre choix. Choisissez des drapeaux de petites dimensions.

  9. Insérez ensuite dans votre page vos 5 images.

  10. Ajoutez pour chacune des images le code de feuille de style EN UTILISANT LA MÉTHODE INTRALIGNE qui vous permettra de positionner vos images au bon endroit et de dimensionner vos images avec une largeur de 30 pixels et une hauteur de 20 pixels. Pour conaître l'emplacement de chacun des pays sur la carte du monde, utilisez GOOGLE et les mots de recherche "carte du monde". UTILISEZ L'EXEMPLE CI-DESSOUS AFIN DE POSITIONNER VOS IMAGES:

    <img src=VOTREIMAGE style="position:absolute; top:30px;left:50px;height:20px;width:30px;" /> EXPLICATIONS : source : http://fr.selfhtml.org/css/proprietes/positionnement.htm

    POSITION : vous pouvez déterminer le mode de positionnement. Les mentions suivantes sont permises:
    absolute = Positionnement absolu, mesuré à partir du bord de l'élément parent; peut défiler.
    fixed = Positionnement absolu, mesuré à partir du bord de l'élément parent; reste fixe lors du défilement. .
    relative = Positionnement relatif mesuré à partir de la position de départ de l'élément proprement dit.
    static = Pas de positionnement spécial, flux normal de l'élément (réglage par défaut).

    TOP : Position de l'image à partir du haut (de la page si méthode position:absolute)

    LEFT : Position de l'image à partir de la gauche (de la page si méthode position:absolute)

    AUTRES PARAMÈTRES UTILISABLES
    HEIGHT : hauteur de l'image
    WIDTH : Largeur de l'image


  11. Insèrez ensuite au bas de ta page 30 sauts de ligne et les 5 images des drapeaux utilisés de dimension 200x300 et écrivez à côté de chacun de ces drapeaux le nom du pays.
  12. Séparez chaque couple Drapeau : Nom du pays d'une ligne horizontale ou d'un saut de ligne.


  13. Visualisez votre page et apportez des modifications au besoin.