Outils pour utilisateurs

Outils du site


html:tp1

Initiation aux techniques CSS

PS : ne pas oublier de valider les pages !

Configuration :

Installez les extensions :

Chez vous, installer firefox en cochant l'option pour les outils de développement ; lors de l'installation initiale (ou alors le réinstaller).

Exercices :

Le but est de vous montrer des techniques de base, pour la mise en page CSS.

Suivez les étapes pour progressivement reconstruire la mise en page suivante :

rendu final

Le code HTML de départ et le suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
    <title>Exercice mise en page CSS (initial)</title>
    <link rel="stylesheet" href="typo.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="page.css" type="text/css" media="screen" />
 
</head>
 
<body>
    <div id="contenu">
        <h1>Lorem</h1>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                <q>
                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </q> 
                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
    </div>
    <ul id="menu">
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
    </ul>
</body>
</html>
  • Enregistrer ce code dans un fichier nommé TP1.html (vous pouvez le placer ou vous voulez).
  • Dans le même répertoire que TP1.html, faire un fichier page.css .
  • La feuille de style page.css recevra les styles destinés à la mise en page.

un fichier typo.css peut-être utilisé pour la mise en forme des textes (police, couleur, …)

Marges et positionnement absolu :

Ajouter à page.css les sélecteurs et propriétés CSS suivants :

body {
  margin: 10px;
  padding-right: 80px; /* place du menu */
}
#menu {
  position: absolute; /* le place en absulu */
  top: 30px;
  right: 10px;
  width: 80px; /* fixe sa largeur */
}

Le principe est d'ajuster la place prise par la page pour laisser la place aux éléments positionnés en absolu

Le but est d'obtenir le rendu suivant :

rendu initial

Rq: le seul critère qu'il est inutile de respecter et la largeur du contenu, car il est déterminé par la largeur de la fenêtre

Pour ce faire, ajouter un sélecteur pour la division contenu : #contenu et ajuster/ajouter aux différents sélecteurs les propriétés suivantes :

  • margin
  • padding
  • border
  • liste-style-type

Exemples :

  border: 1px solid black;
  border-left: none;
  list-style-type: none;

Colonnes (float)

Pour pouvoir régler les marges, nous allons placer les paragraphes dans des divisions :

<div class="colonne" id="col_gauche">
   <p>Lorem ipsum dolor sit amet, ... 
       <q>Ut enim ad minim veniam, ...
       </q>
      Duis aute irure dolor in reprehenderit in voluptate velit ...
   </p>
</div>
<div class="colonne" id="col_droite">
   <p>Lorem ipsum dolor sit amet,...
   </p>
</div>

Le code CSS suivant créé les colonnes :

.colonne {
  float: left;
  width: 49%;
}

Reste que le cadre ne recouvre plus les colonnes :

Problème de rendu avec float

Ajouter une division à la fin de la division d'id contenu

<div class="clear">&nbsp;</div>

Et le style suivant :

.clear {
  clear: both;
}

Ajuster les propriétés :

  • margin
  • padding
  • border

Les sélecteurs suivants peuvent être utiles

  • .colonne p
  • #col_gauche

Mise en exergue (float)

Utiliser le code suivant :

q {
  float: right;
  width: 50%;
  display: block;
}

Ajuster les bordures et marges

Centrage

Centrage de texte

utiliser text-align: center; sur l'élément qui contient le texte

Centrage d'un élément :

W3C : utiliser utiliser margin-left: auto; margin-right: auto; width: 99px; (voir cours)
IE : Ne respect pas la norme. Utiliser text-align: center; sur l'élément parent.

Faire des essais pour centrer le titre. Ajouter une bordure pour bien voir ce qui se passe. Regarder la différence entre centrer le texte et centrer l'élément.
Exemples de centrage

Substitution du texte par une image

Méthode triviale

L'astuce consiste à :

  • Placer le texte dans un élément SPAN, pour lui demander de ne pas s'afficher
  • Placer l'image en fond de l'élément
  • Ajuster la taille de l'élément à celle de l'image

On utilise le code HTML :

<h1 id="titre"><span>Lorem</span></h1>

Et le code CSS :

#titre {
  width: 99px;
  height: 31px;
  background-image: url('images/titre.gif');
}
#titre span {
  display: none;
}

Vous pouvez trouver l'image :

Bonnes pratiques

La meilleur solution est de se documenter : http://www.mezzoblue.com/tests/revised-image-replacement/

Choisir une méthode est l'appliquer.

Analyse d'une mise en page existante

Mise en Œuvre du TD

Poursuivre l'activité en réalisant par vous-même : Étude d'une mise en page

Activités personnelles

le site Css Zen Garden contiens de nombreuses mises en pages
Ou plus diversifié : FAVEUP

Utiliser le DOM Inspector de FireFox (Shift+Ctrl+I), l'extension Web Developer et surtout FireBug pour découvrir comment sont obtenues ces mises en page

Demander moi pour une démonstration/explication

html/tp1.txt · Dernière modification: 2008/04/24 22:00 (modification externe)