Css7

Dernière modification

Résumé : Une feuille de style rassemblant le header et et le footer dans une seule colonne apparente à gauche, permettant de voir simultanément le formulaire de recherche, la barre de liens, le menu d'édition.

Modifié(e) :

< border-right: dashed 1px #080;

à

> border-right: dashed 1px #800;


/*

Une feuille de style rassemblant le header et et le footer dans une seule colonne apparente à gauche, permettant de voir simultanément le formulaire de recherche, la barre de liens, le menu d'édition.

Appliquer: [1]

Retour au style par défaut: [2]

*/

  @media screen {
    body {  margin: 0;
      padding: 0;
      background-color: #fff;
      color: black;
      font-family: sans-serif;
    }
    div.header {
      border-right: dashed 1px #800;
      position: relative;
      margin-top: 20px;
      margin-left: 20px;
      width: 150px;
      z-index: 5;
    }
    div.footer {
      border-right: dashed 1px #800;
      position: relative;
      top: -20px;
      margin-left: 20px;
      width: 150px;
      z-index: 0;
    }  
    div.header h1 {
      position: absolute;
      top: -20px;
      left: 180px;
      width: 800px;
      font-size: 36px;
    }
    div.wrapper    h1,h2 {
      font-size: 26px;
    }
    div.wrapper    h3,h4 {
      font-size: 22px;
    }
    div.wrapper {
      position: absolute;
      top: 80px;
      left: 200px;
      padding: 0;
    }
    /* les éléments du header sont alignés de haut en bas comme une */
    /* liste, mais sans puces                                       */
    .header .gotobar.bar a {
      display: list-item;
      list-style-type: none;
      margin: 10px 0 10px 0;
      text-decoration: none; 
    }
    .footer .edit.bar a {
      display: list-item;
      list-style-type: none;
      margin: 10px 0 10px 0;
      text-decoration: none; 
    }
    .header .gotobar.bar a:hover, .footer .edit.bar a:hover { 
      text-decoration: underline; 
    }
    .footer .gotobar.bar, hr {
      display: none;
    }
    .footer .time  {
      display: block;
      font-size: 75%;
    }
    a {
      text-decoration:none;
      font-weight:bold;
      color:#800;
    }
    a:hover {
      text-decoration: underline;
    }
    a:visited { 
      color:#888; 
    }
    /*  le cas des images uploadées dans une page avec la syntaxe    */
    /*  [[image:nom_de_page]] qui deviennent des liens, où j'élimine */
    /*  les bordures et la couleur de fond au survol.                */     
    a.image, a.image:visited, a.image:hover {
       border: none;
       background-color: #fff;
       color: #fff;
    }
    a.image image.upload {
       border: none;
    }
    .logo {
       border: none;
    }
        #search {
      font-size: 100%;
      width: 130px;
    }
    input {
      font-size: 100%;
    }
  }