Retour

Explications sur les positionnements

Exercice réalisé d'après le livre Premiers pas en CSS et XHTML  2e édition Eyrolles

Codes CSS et HTML

    <style type="text/css">
* {
    margin: 0;
    padding: 0;
    }
    body {
    background-color: #d4e4d7;
    }
    #frise {
    height: 30px;
    display: block;
    width: 100%;
    }
    #titre {
    text-align: center;
    height: 60px;
    background-color: skyblue;
    position: relative;
    }
    #titre img {
    position: absolute;
    top: 10px;
    left: 25%;
    }
    #titre h1, #titre h2 {
    margin: 0 auto;
    width: 200px;
    color: green;
    }
  
   #titre h1 {
    background-color: #d5e897;
    }
    #titre h2 {
    position: relative;
    top: -10px;
    left: 50px;
    }
    #titre_fixe {
    padding: 20px;
    position: fixed;
    top: 200px;
    left: 0;
    width: 80px;
    text-align: center;
    background-color: lightgreen;
    }
    #galerie {
    position: absolute;
    top: 90px;
    left: 120px;
    }
    #galerie img {
    border: 1px dotted #cccccc;
    margin: 20px;
    float: left;
    width: 200px;
    height: 230px;
    }
    </style> 		<body>
    <img id="frise" alt="frise de nuages" src="images/nuages30x1100.jpg" name="frise">
    <div id="titre">
      <img style="width: 40px; height: 41px;" alt="logo arbre" src="images/arbre3.gif">
      <h1>
        LA NATURE
      </h1>
      <h2>
        EN IMAGES
      </h2>
    </div>
    <h2 id="titre_fixe">
      Fleurs<br>
      et<br>
      plantes
    </h2>
    <div id="galerie">
      <img style="width: 200px; height: 230px;" alt="cognassier" src="images/cognassier.jpg">
      <img style="width: 200px; height: 230px;" alt="douce amère" src="images/douceAmere.jpg">
      <img style="width: 200px; height: 230px;" alt="feuille de platane" src="images/feuillePlatane.jpg">
      <img style="width: 200px; height: 230px;" alt="fleurs" src="images/fleurs.jpg">
      <img style="width: 200px; height: 230px;" alt="fougère" src="images/fougere.jpg">
      <img style="width: 200px; height: 230px;" alt="Hélianthème" src="images/Helianthemum.jpg"><br>
    </div>
  </body>
</html>

Image du haut "frise de nuages"

Une image frise de nuages est insérée au dessus du bloc de titre
elle a une hauteur de 30px et pour s'adapter à tous les écrans une largeur de 100%.
Afin de supprimer l'espace avec le bloc titre suivant, nous lui donnons la propriété display:block

div titre

hauteur 60px, arrière-plan uni
texte centré
position relative pour servir de référence au positionnement de l'image gif de l'arbre en position absolue
Cette image de l'arbre reçoit un décalage haut de 10px et gauche de 25%

Les titres

h1 "La nature" et le sous-titre h2 "En images" sont centrés par une largeur de 200px et des marges latérales auto
Le  sous-titre h2, position relative,  est légèrement décalé de sa position initiale vers le haut et vers la droite, pour venir se superposer à l'arrière-plan de h1

Le titre fixe

Fleurs et plantes est positionné avec un décalage 200px du haut de l'écran et complètement à gauche
Ce titre reste fixe même si la page défile.

div galerie d'images

En position absolue par rapport à son parent body, elle se juxtapose

Images de la galerie

Alignées côte à côte en position flottante gauche avec retour à la ligne automatique en fonction de la largeur de la fenêtre.
Les images ont ici une taille homogène 200 x 230 px et sont espacées par des margin et padding.