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 :


    • Pingback: Créer son thème Wordpress – 4 – Initier les templates Header / Index / Style « Mistipi()

    • Pingback: Créer son thème Wordpress – 3 – Fonctionnement Wordpress | Mistipi()

    • Pingback: Créer son thème Wordpress – 8 – Footer | Mistipi()

    • Pingback: Créer son thème Wordpress – 10 – Comments / 404 | Mistipi()

    • taylor

      bonjour,
      je ne comprend pas le moment la ou vous dite :
      « 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 : »
      pouvez vous m’expliquer par mail ?
      merci de votre réponse.
      Taylor

    • Jeft

      Bonsoir, en fait la zone header_footer est simplement une image d’un cadre blanc avec les bords arrondis qui sera utiliser pour le menu en haut de page et pour le pied de page ( footer ). Ensuite pour le contenu ( content ) ainsi que la barre latérale (side bare ) j’ai créé une image de 2 rectangles avec les bords arrondis et des largeurs souhaitées. J’ai ensuite couper cette image en 3 morceaux à l’horizontal. Le morceau supérieur ( avec les bords arrondis supérieur ) sera appelé une fois dans la zone wrapper_haut. Le deuxième morceau ( bords droits ) appelé wrapper_centre sera repèté tant qu’il y aura du contenu. Enfin le morceau inférieur ( bords arrondis inférieur ) sera appelé une seule fois dans la zone wrapper_bas. Il est vrai que dans mon développement j’ai utilisé une image nommée header_footer.png, qui peut faire penser qu’on l’utilise pour le header mais ce n’est pas le cas. D’ailleurs j’ai modifié cela dans mon thème en le nommant menu_footer.png. Il faudrait que je prenne le temps de mettre à jour l’article.
      En espérant avoir été clair.
      @ plus