Retour
Notre but est de reproduire avec Kompozer les codes XHTML / CSS du tuto d'Alsacréations pour réaliser un design complet en 5 étapes. Nous ne nous occuperons pas ici des navigateurs anciens.
Etape 1 - La structure HTML
La structure du site comprend 5 blocs:
- un div conteneur centré qui englobe le tout
- un div header
- un bloc ul identifiant menu (horizontal)
- un div contenu
- un div footer
Etape 2 - Mise en place des principaux éléments
- La feuille de style est interne, nous n'avons qu'une seule page.
body
- marges haute et basse 10px
div#conteneur
- largeur 770px ce qui permet de voir la page en entier sur un écran 800x600.
- marges latérales : auto pour le centrer
div#header
- hauteur 258px comme l'image de fond
Etape 3 - Couleurs et images de fond
body
- Police Arial, taille 0.8em
- couleur de l'arrière plan vert clair #dea
div#conteneur
- Bordure vert foncé sur les 4 côtés de 2px de large pour donner du relief
- Arrière-plan blanc
#header h1
- marge haute nulle
#contenu
- padding droit 30px, padding gauche 100px
- Ajout d'une image d'arrière-plan décorative qui ne se répète pas et calée à 15px de la gauche et vers le bas
#contenu h2
- Hauteur de ligne 25px, taille des caractères 1.4em, texte couleur vert foncé
- image d'arrière-plan 25x25px qui ne se répète pas, calé en haut à gauche
- padding gauche 25px;
- Bordure basse 1px
#contenu h3
- Texte couleur vert foncé
- Bordure basse 1 px, vert foncé
- Bordure gauche 3px avec un margin de 15px et un padding de 5px
#contenu p
- Hauteur de ligne augmentée à 1.7em
- texte justifié et indenté à 2em
#contenu a
- Couleur des liens vert foncé et vert clair à l'état survolé
#footer
- marges à zéro
- Hauteur de ligne 30px
- Texte vert foncé, aligné à droite avec un padding droit de 10px
- Bordure haute 1px
Etape 4 - Le titre
Pour le titre, le texte "Colored Design" est remplacé par une image cliquable (display:bloc pour le lien) et le texte lui-même est caché par une indentation négative de 5000px#header h1 a
- width: 400px ; height: 70px ;
- display: block ;
- background: url(title.gif) no-repeat ; position: relative ; left: 350px ; top: 15px ;
- text-indent: -5000px ;
Etape 5 - Le menu
Pour le menu nous utiliserons le système de l'image coulissante verticalement. Cette image mesure 25 x 60 pxul#menu
- margin et padding zéro partout
- height: 35px;
- pas de puce
- L'image d'arrière plan se répète horizontalement. Elle est positionnée à gauche et -25px vers en haut pour qu'on puisse voir la partie basse uniquement.
- les list-items sont flottants à gauche et le texte est centré
ul#menu li a
- width: 130px ; line-height: 25px ; font-size: 1.2em ; font-weight: bold ; letter-spacing: 2px ; color: #fff ;
- display: block ; text-decoration: none ;
- border-right: 2px solid #dea ;
ul#menu li a:hover
A l'état survolé nous affichons la même image de fond mais non décalée pour que la partie haute verte remplace la partie verte basse. Tout en bas, la partie ombrée 10px de l'arrière-plan #menu subsiste.- background: url(bg_menu.gif) repeat-x 0 0 ;