Outils pour utilisateurs

Outils du site


cours2012:concepts_et_outils_pour_internet:palais-des-thes

Palais des thés

L'archive de départ. Les images sont en niveau de gris pour vous encourager à faire l'export.

La maquette sous PhotoShop : Au minium faire l'export du logo.

  • Compléter le code HTML
  • Mettre en place les CSS.
    • Commencer par le premier article.
    • Faire partie par partie.

Quand vous avez fini TOUT le code HTML et CSS :

Gérer la profondeur

le code suivant permet de remplacer l'image de fond (bas du header) par un élément dont on peut gérer la profondeur (z-index)

article.contenu-promotion:before {
	content: " ";
	top: -22px;
	left: 0;
	width: 100%;
	height: 22px;
	position: absolute;
	z-index: 1;
	background-image: url(img-interface/bord-fonce-sup.png) ;
	background-position: left top;
	background-repeat: repeat-x;
	background-color: transparent;
}

Avec des modifications sur la navigation et le logo, vous devez pouvoir faire passer la navigation sous le bord.

Fond des éléments sur toute la largeur de la page

La stratégie consiste à placer les éléments dans une DIV parent qui recevra les images de fonds.

Ensuite on centre le contenu.

  <body>
    <div class="outer-header">
      <header>
        ...
      </header>
     </div>
     ...
  </body>
body {
    /* ... */
    /* margin: 0 auto;*/ /*ne plus centrer body */
    width: 100%; /* mettre sa largeur à 100% */
    /* ... */
}
 
/* placer les images de fonds sur div.outer-header */
body div.outer-header {
    background-image:  /*...*/;	
    /* ... */
}
 
/* centrer header à l'interieur */
body div.outer-header > header {
    width: 960px;
    margin: 0 auto;
    /* ... */
}
cours2012/concepts_et_outils_pour_internet/palais-des-thes.txt · Dernière modification: 2012/11/05 23:00 (modification externe)