Aujourd’hui on attaque la mise en page.

La forme de notre page a été définie dans un article précédent, mais voici pour rappel ce que nous allons faire.

Thème de base complet

Nous allons décrire la page de l’extérieur vers l’intérieur puis du haut vers le bas.

Avant attaquer, je vous conseille de télécharger le document ci-joint qui vous permettra de connaître les commandes de base du CSS.

CSS Help Sheet

On commence donc par le body en intégrant le scripte suivant :

1 – Le Body :

body {
font-family: "Segoe UI", verdana, sans-serif;
font-size: 0.9em;
text-align: left;
background: #c0c0c0;
color: #000000;
width: 1024px;
margin-left: auto;
margin-right: auto;
}

En synthèse:
Font-family : défini la police de caractère à utiliser soit le Segoe UI, police du thème Windows Seven. Si celle-ci n’est pas installé on passe à verdana et ainsi de suite.
Font-size : La taille de la police de caractère.
Text-align : alignement texte Droite-Gauche-Centre
Background : couleur du fond écran c0c0c0 correspondant à un gris assez sobre
Color : correspond à la couleur du texte.
Width : largeur de la fenêtre body. Pour cet élément, je tiens compte de la résolution d’écran mini que la plupart des gens utilise. La résolution mini étant 1024×768.
margin-left et right : marge auto à droite et à gauche pour que le body soit au centre de l’écran dans le sens de la largeur.

2 – La page :

#page {
background:#c0c0c0;
width: auto;
}

width: auto la page s’adapte à la largeur de ce qu’il y aura en dehors et en dedans de cette fenêtre.

3 – Le header :

#header {
height : 150px;
}

4 – Le content :

#content {
background-color: transparent;
float: left;
width: 684px;
padding: 0 10px 0 10px;
}

float: informe comment doit se situer le texte. Choix : left-right-none
margin-bottom: marge inférieure extérieure de 20px

padding : marge intérieur à prendre dans le sens des aiguilles d’une montre haut droite bas gauche exprimé ici en px.

5 – La sidebar :

#sidebar {
float: right;
width: 280px;
padding: 0 10px 0 10px;
}

6 – Le footer :

#footer {
clear: both;
width: 1024;
font-size: 1em;
padding: 5px 10px 10px 10px;
height: 100px;
}

clear: associé à both saute le module ( correspond à un passe à la ligne ) sans cela le footer serait sous la sidebar à droite du content.

Maintenant nous allons créer une image qui représentera le fond et que nous allons découper en 4 morceaux :

wrapper

wrapper-decoupe

La zone header_footer sera utilisée comme sont nom l’indique pour le menu et le footer.
La zone wrapper_haut sera utilisé en début de la balise wrapper pour arrondir les coins de nos fenêtres.
La zone wrapper_centre sera utilisé pour tout le content et sidebar en la répétant autant de fois que nécessaire.
La zone wrapper_bas sera utilisé en début de la balise wrapper pour arrondir les coins de nos fenêtres.
Enregistrer 4 fichiers, et modifier les paragraphes CSS comme suit :

#header
{
background-image: url(images/oeil-arc-en-ciel.png);
background-repeat: no-repeat;
height : 150px;
}

La commande background-image permet d’ajouter une image en fond que vous vous irez chercher à l’url défini.
Background-repeat permet de préciser si cette image devra apparaître une fois ou si elle sera répétée sur toute la hauteur du header.

#footer {
background-image: url(images/Header_Footer.png);
background-repeat: no-repeat;
clear: both;
width: 1024;
font-size: 1em;
padding: 5px 10px 10px 10px;
height: 100px;
}

7 – Le Wrapper ( l’enveloppe autour du content ) :

#wrapperhaut
{
background-image: url(images/wrapper_haut.png);
background-repeat: no-repeat;
float: left;
height: 20px;
width: 1024px;
margin: 20px 0 0 0;
}
#wrapper
{
background-image: url(images/wrapper_centre.png);
background-repeat: repeat-y;
float: left;
width: 1024px;
}

Dans ce cas le background-repeat est renseigné en repeat-y ce qui rappelera cette même image sur toute la hauteur du wrapper.

#wrapperbas
{
background-image: url(images/wrapper_bas.png);
background-repeat: no-repeat;
float: right;
height: 20px;
width: 1024px;
margin: 0 0 20px 0;
}

8 – Le Menu :

Nous allons décrire le menu sous le header dans lequel nous allons créer une liste horizontale en utilisant des images de boutons pré-défini. Pour cela utilisons le scripte suivant :

#menu
{
background-image: url(images/Header_Footer.png);
background-repeat: no-repeat;
clear: both;
width: 1024px;
height : 100px;
}

Cette première partie nous permet d’ajouter l’image de fond.

.listmenu ul
{
list-style-type:none;
}

Cette nouvelle partie nous permet de supprimer les points présent devant chaque élément d’une liste.

.listmenu li
{
float:left;
margin-top: 19px;
}

Celle-ci défini la position de notre liste horizontale.

.listmenu ul li a
{
display:block;
float:left;
width:100px;
line-height:30px;
background:url(images/bouton.png) repeat-x;
color:#000000;
text-decoration:none;
text-align:center;
}

Ces lignes nous permettent :

  • D’appeler le bouton que nous avons réalisé préalablement sous photoshop ou Gimp
  • De définir la taille des boutons
  • De spécifier qu’il sera répéter en X ( horizontale ) autant de fois qu’il y aura d’élément dans la liste
  • De définir la couleur du texte
  • Voici le bouton que nous avons défini :

    bouton

    .listmenu ul li a:hover
    {
    background:url(images/bouton_hover.png) repeat-x;
    }
    

    Et le deuxième bouton :

    bouton_hover

    Enfin ces lignes rappelent une autre image bouton qui permettra de changer la couleur de celui-ci lorsque la souris sera positionnée dessus.

    Voir aussi :

    Articles Créer son thème WordPress : 12345678910 – 11

    Télécharger le thème : Mistipi

    En attendant bon blog.
    @ plus

    Articles similaires :