Outils pour utilisateurs

Outils du site


cours2012:concepts_et_outils_pour_internet:techniques_css_-_exemples

Techniques CSS - Exemples

De simples exemples que vous pouvez télécharger.

Blocs en colonnes

Utilisation de {display:table-cell;} Pour mettre des blocs en colonnes.

HTML

<!DOCTYPE HTML>
<html lang="fr-FR">
<head>
  <meta charset="UTF-8">
  <title>Blocs en colonnes</title>
  <link rel="stylesheet" href="css/styles-mise-en-page.css">
</head>
<body>
  <h1>Blocs en colonnes</h1>
  <div class="colonne col1">
    <h2>Colonne un :</h2>
    <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
    </p>
  </div>
  <div class="colonne col2">
    <h2>Colonne deux :</h2>
    <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
    </p>
  </div>
</body>
</html>


CSS

/* les deux "colonnes" ont la classe CSS : colonne */
.colonne {
  /* mettre en colonne */
  display:table-cell;
  /* pour éviter les problémes */
  vertical-align:top;
 
  /* Pour mieux voir */
  border:1px solid red;
  width:200px;
}
 
/* Mettre en fome la 1re qui à la classe CSS : col1 */
.col1 {
  /* Les margin ne fonctionne pas avec display:table-cell;
     Donc on utilise padding */
  padding-right: 20px;
}

Colonnes en CSS

Utilisation de {column-count: ???;} Pour mettre du texte en colonnes.

HTML

<!DOCTYPE HTML>
<html lang="fr-FR">
<head>
  <meta charset="UTF-8">
  <title>Blocs en colonnes</title>
  <link rel="stylesheet" href="css/styles-mise-en-page.css">
</head>
<body>
  <h1>Blocs en colonnes</h1>
  <div class="colonnes">
    <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.
    </p>
    <p>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
    </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
    </p>
  </div>
  <h1>Blocs en colonnes sans saut de colonne (des paragraphes)</h1>
  <div class="colonnes sans-saut-de-colonne-des-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.
    </p>
    <p>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
    </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
    </p>
  </div>
</body>
</html>


CSS

/* mettre en colonnes le contenu de la DIV de classe CSS colonnes */
.colonnes {
  /* Sur deux colonnes */
  column-count: 2;
  /* Avec un espace de 15px entre elles */
  column-gap: 15px;
  /* un trait de séparation entre les colonnes */
  column-rule: solid 1px red;
 
  /* Version avec préfixe pour tous les navigateurs
     http://caniuse.com/#feat=multicolumn */
  -webkit-column-count: 2;
  -webkit-column-gap: 15px;
  -webkit-column-rule: solid 1px red;
  -moz-column-count: 2;
  -moz-column-gap: 15px;
  -moz-column-rule: solid 1px red;
}
 
/* pour les P qui sont dans les colonnes où on ne veut pas des sauts */
.colonnes.sans-saut-de-colonne-des-p p {
  /* On transforme les p en "bloc solidaire" avec inline-bloc
     Cette technique fonctionne avec tous les navigateurs
     Firefox n'a pas de support des sauts de colonnes */
  display:inline-block;
  /* Attention aux marges */
}

Blocs en ligne

Utilisation de {display:inline-block;} Pour mettre des blocs en ligne.

HTML

<!DOCTYPE HTML>
<html lang="fr-FR">
<head>
  <meta charset="UTF-8">
  <title>Tous en lignes</title>
  <link rel="stylesheet" href="css/styles-graphiques.css" type="text/css">
</head>
<body>
  <header>
    <h1>Tous en lignes</h1>
    <nav>
      <ul>
        <li><a href="#">Lien un</a></li>
        <li><a href="#">Lien deux</a></li>
        <li><a href="#">Lien trois</a></li>
        <li><a href="#">Lien quatre</a></li>
      </ul>
    </nav>
  </header>
</body>
</html>


CSS

/* UL utilisé pour des raisons sémantiques
   Pensez à retirer les marges par défaut */
body>header>nav>ul {
  margin:0;
  padding:0;
  /* Et les puces */
  list-style-type:none;
}
 
/* Tous les liens du menu sur une ligne */
body>header>nav>ul>li {
  display:inline-block;
  vertical-align: top;
}
 
/* Au passage, si un lien est un élément interactif :
   Le mettre en "block" ou "inline-block" */
body>header>nav>ul>li>a {
  display:inline-block;
  vertical-align: top;
 
  /* pour le rendre visible */
  margin: 0 2px;
  border: 1px solid red;
  padding: 5px;
}

Texte autour d'image

Utilisation de {float:left;} Pour qu'une image soit “contourné” par le texte.

HTML

<!DOCTYPE HTML>
<html lang="fr-FR">
<head>
  <meta charset="UTF-8">
  <title>Les Floats</title>
  <link rel="stylesheet" href="css/styles-graphiques.css">
</head>
<body>
  <h1>Les Floats</h1>
  <p>
    <img class="aligne-a-gauche" 
         src="images-contenu/toto.png" width="50" height="50" alt="Toto">
     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>
  <p>
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
     <img class="aligne-a-droite" 
          src="images-contenu/toto.png" width="50" height="50" alt="Toto">
          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>
</body>
</html>


CSS

/* À gauche */
.aligne-a-gauche {
  float:left;
}
/* À droite*/
.aligne-a-droite {
  float:right;
}
 
/* Pour le rendre plus visble */
body {
  width:300px;
}

Positionnement absolu

Utilisation de {postition:absolute;} Pour placer un élément sur un “padding”.

HTML

<!DOCTYPE HTML>
<html lang="fr-FR">
<head>
  <meta charset="UTF-8">
  <title>Test de positionnement absolu</title>
  <link rel="stylesheet" href="css/styles-mise-en-page.css" type="text/css">
</head>
<body>
  <h1>Test de positionnement absolu</h1>
  <article class="avec-menu-a-gauche">
    <header>
      <h2>Un Article avec menu</h2>
      <nav>
        <ul>
          <li><a href="#">Lien un</a></li>
          <li><a href="#">Lien deux</a></li>
          <li><a href="#">Lien trois</a></li>
          <li><a href="#">Lien quatre</a></li>
        </ul>
      </nav>
    </header>
    <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>
  </article>
</body>
</html>


CSS

article.avec-menu-a-gauche {
  /* En position relative pour qu'il soit le "parent"
     du menu positionné en absolu */
  position:relative;
  /* réserve la place pour le menu */
  padding-left:100px;
}
 
article.avec-menu-a-gauche > header > nav {
  /* En position absolue */
  position:absolute;
  /* toujours avec des coordonnées */
  top:5px;
  left:5px;
  /*fixe une taille qui tient compte de la place réservée */
  width: 90px;
}
 
/* le restant pour la mise ne forme */
 
article.avec-menu-a-gauche {
  /* Pour le voir */
  border:1px solid blue;
  width:300px;
}
 
/* UL utilisé pour des raisons sémantiques
   Pensez à retirer les marges par défaut */
article.avec-menu-a-gauche > header>nav>ul {
  margin:0;
  padding:0;
  /* Et les puces */
  list-style-type:none;
  /* pour le voir */
  border:1px solid green;
}
 
/* Au passage, si un lien est un élément interactif :
   Le mettre en "block" ou "inline-block" */
article.avec-menu-a-gauche > header>nav>ul>li>a {
  display:block;
  vertical-align: top;
 
  /* pour le rendre visible */
  margin: 2px;
  border: 1px solid red;
  padding: 5px;
}

Ajout de contenu texte par CSS

Utilisation de :after { content:"text"; } Pour ajouter du texte à la fin de l'élément.

HTML

<!DOCTYPE HTML>
<html lang="fr-FR">
<head>
  <meta charset="UTF-8">
  <title>Ajouts de texte</title>
  <link rel="stylesheet" href="css/styles-graphiques.css" type="text/css">
</head>
<body>
  <h1>Ajouts de texte après</h1>
  <nav>
    <ul class="apres">
      <li><a href="#">Lien un</a></li>
      <li><a href="#">Lien deux</a></li>
      <li><a href="#">Lien trois</a></li>
      <li><a href="#">Lien quatre</a></li>
    </ul>
  </nav>
  <h1>Ajouts de texte avant</h1>
  <nav>
    <ul class="avant">
      <li><a href="#">Lien un</a></li>
      <li><a href="#">Lien deux</a></li>
      <li><a href="#">Lien trois</a></li>
      <li><a href="#">Lien quatre</a></li>
    </ul>
  </nav>
</body>
</html>


CSS

.apres li:after {
  font-family:arial;
  content:" ⬅"
}
 
.avant li:before {
  font-family:arial;
  content:"➭ "
}
 
/* UL utilisé pour des raisons sémantiques
   Pensez à retirer les marges par défaut */
nav>ul {
  margin:0;
  padding:0;
  /* Et les puces */
  list-style-type:none;
}

Ajout d'image par CSS

Utilisation de :after { content:url(); } Pour ajouter une image à la fin de l'élément.

HTML

<!DOCTYPE HTML>
<html lang="fr-FR">
<head>
  <meta charset="UTF-8">
  <title>Ajouts d'images par CSS</title>
  <link rel="stylesheet" href="css/styles-graphiques.css" type="text/css">
</head>
<body>
  <h1 class="apres">Image après</h1>
  <h1 class="avant">Image avant</h1>
</body>
</html>


CSS

.apres:after {
  content:url('images-inteface/toto.png');
}
 
.avant:before {
  content:url('images-inteface/toto.png');
}

Remplacement de texte par une image

Rendre le texte invisible et afficher une image (plusieurs solutions).

HTML

<!DOCTYPE HTML>
<html lang="fr-FR">
<head>
  <meta charset="UTF-8">
  <title>Remplace du texte par une image en CSS</title>
  <link rel="stylesheet" href="css/styles-graphiques.css" type="text/css">
</head>
<body>
  <h1>Remplace du texte par une image en CSS</h1>
  <a class="recherche-toto"
     href="http://google.fr/search?q=TOTO">
     Rechercher TOTO sur Google
  </a>
</body>
</html>


CSS

.recherche-toto {
  display: block;
  width: 50px;
  height: 50px;
  background: url('images-inteface/toto.png');
  text-indent:-9999px;
}
cours2012/concepts_et_outils_pour_internet/techniques_css_-_exemples.txt · Dernière modification: 2012/11/10 23:00 (modification externe)