Outils pour utilisateurs

Outils du site


cours2011:concepts_et_outils_pour_internet:initiation_aux_techniques_css

Initiation aux techniques CSS

PS : ne pas oublier de valider les pages !

Configuration :

Installez l'extensions Firebug

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>
<html lang="fr">
  <head>
    <title>Exercice mise en page CSS (initial)</title>
    <link rel="stylesheet" href="css/typo.css">
    <link rel="stylesheet" href="css/page.css">
  </head>
  <body>
    <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>
    <nav>
      <ul>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
    </nav>
  </body>
</html>
  • Enregistrer ce code dans un fichier nommé index.html (vous pouvez le placer ou vous voulez).
  • Dans le même répertoire que index.html, faire dossier css et dedans, 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;
	margin-right: 120px; /* place du menu */
	border: 1px solid black;
	padding: 2em;
}
nav {
	position: absolute; /* le place en absolu */
	top: 30px;
	right: 10px;
	width: 110px; /* 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

Marges et mise en forme du menu

Pour ce faire on va utiliser les propriétés suivantes :

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

Exemples d'usage:

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

Elles sont à utiliser avec les sélecteurs suivant :

nav ul {
 
}
 
nav ul li {
 
}

Le but est d'obtenir :
rendu menu

Colonnes (en tableau CSS)

On peut utiliser la règles CSS suivante :

p {
	display: table-cell;
}

Après avoir ajusté les bords et marge, on doit obtenir :
rendu table CSS

On peut utilise le sélecteur suivant pour ne modifier que les second paragraphe (utile pour le trait central) :

p + p {
 
}

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 :

Utiliser utiliser margin-left: auto; margin-right: auto; width: 99px;

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

Vous pouvez trouver l'image :

La télécharger (titre.gif) et placer dans un sous-dossier de css : css/images-inteface/titre.gif

Essayer le code CSS suivant :

h1 {
	text-indent: -9999px;
	background-image: url(images-inteface/titre.gif);
	background-repeat: no-repeat;
	background-position: center;
}
cours2011/concepts_et_outils_pour_internet/initiation_aux_techniques_css.txt · Dernière modification: 2011/09/11 22:00 (modification externe)