Aller au menu - Aller au contenu

Icône Menus latéraux de même hauteur et extensibles

Par Avatar Apocalypse_Lord
Mise à jour : 15/12/2008
79 visites depuis 7 jours, classé 608/786
Salut à tous, les zéros ;) ,
J'écris ce mini-tuto suite à la lecture de celui de Finality sur la création d'un design disposant de colonnes de même taille (ici).

Comme plusieurs personnes l'ont fait remarquer dans les commentaires, sa méthode ne peut s'appliquer qu'aux designs de taille fixe, ce qui peut être assez handicapant pour les designs extensibles !

Je vous propose donc ici la démarche que j'ai suivie afin de réussir cet acte héroïque cette tâche finalement assez simple :) .

Je n'ai ni la prétention que ce soit la meilleure façon, ni que cette solution n'existe pas déjà mais comme nous sommes sur un site (que dis-je, une communauté :D ) où l'information est reine, j'espère que ce tuto sera utile à quelques zéros au moins (ce sera déjà un bon début, je pense :-° ).
Retour en haut
Sommaire du tutoriel :
Icône du chapitre
Retour en haut

Légère introduction

Prérequis



Pour suivre ce tuto, il vous faudra :
  • connaître un minimum le CSS ainsi que le XHTML (par ici les débutants :p ) ;
  • savoir lire, utiliser un ordinateur ainsi qu'un clavier.
Bien, après cette courte liste, j'espère que vous êtes prêts parce qu'on est partis.
À l'abordage :pirate: !!!

Pour commencer



Alors voyons, pour débuter votre petit travail (bah oui quoi, j'vous tiens, alors autant vous faire travailler :diable: ), on va d'abord regarder un petit schéma pour se mettre en appétit ^^ .

aperçu


Bon bien sûr, on ne va pas arriver à ce résultat en un claquement de doigts :p .

Tout comme l'a fait (et dit) Finality, il faut un peu tricher pour y arriver mais tant que tout reste correct, c'est l'essentiel.

Des façons de créer des designs extensibles, il en existe tout un tas, mais ici, je vous propose de combiner :
  • une extensibilité au niveau de la largeur (pour s'adapter aux résolutions) ;
  • une extensibilité en hauteur qui permette la répétition d'une image de fond ;
  • une compatibilité quasi-totale entre IE et FF (grâce au CSS) ;
  • une astuce permettant que la répétition des images de fond en hauteur (du style colonne) se fasse uniformément.

Allez hop, au travail :-° .
Retour en haut

Et un code HTML, un !

Dernière chose...



Bon voilà : depuis le temps que vous lisez (pour ceux qui ont encore les yeux ouverts :-° ), vous avez mérité d'arriver à cette section où le sérieux du travail commence.

Toutefois, je tiens à insister sur une dernière petite chose : réaliser ce genre de chose est simplissime dans le cas où les colonnes qui encadrent la page sont une seule et même image qui se répète verticalement.
Or, dans notre cas, il s'agit bien de 2 images différentes afin que la largeur de la page soit fonction de la résolution du visiteur, et non de la taille d'une image servant de fond !


C'est parti...



Nous allons donc commencer par faire un récapitulatif de nos besoins (une sorte de cahier des charges, disons ^^ ).

Pas à pas...



Bon, nous y voilà : comme vous pouvez le voir sur le schéma fourni en miniature plus haut, les numéros 1 et 2 sont nos 2 colonnes qui encadrent toute notre page et qui doivent donc être de la même hauteur, à savoir : la hauteur totale occupée par la page et son contenu.

La question qui survient donc est : comment faire pour que 2 colonnes changent de hauteur en fonction de la taille du contenu de la page (qui sera donc compris entre ces deux colonnes) ?

La réponse : en imbriquant le tout pour faire dépendre les blocs les uns des autres.

Pour les div suivantes, rien de compliqué, il suffira de tout mettre dans le même panier :D .

Allez, voici un bout de code pour clarifier ceci :

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <title>Ma Page</title>
    <link href="../css/design.css" rel="stylesheet" type="text/css" media="screen" />
  </head>
  <body>
    <div id="page">
      <div id="page_bis">
        <div id="contenu">
          <div id="banniere">bannière</div>
          <div id="menu_barre">Accueil - barre de menu</div>
          <div id="menu_colonne">
            <div class="menu_section">menu 1</div>
            <div class="menu_section">menu 2</div>
            <div class="menu_section">menu 3</div>
          </div>
          <div id="navigation_rapide">barre de navigation rapide</div>
          <div id="corps">
            corps<br />
            <br /><br /><br /><br /><br /><br /><br />
          </div>
          <div id="copyright">copyright</div>
        </div>
      </div>
    </div>
  </body>
</html>

Explications



Comme promis, vous voyez qu'il y a une bonne dose de div imbriquées, mais je me suis permis de tout mettre car c'est tout ce dont nous aurons besoin :) (du moins d'un point de vue HTML).

La répétition des <br /> ne sert qu'à étendre le cadre représentant le corps pour notre exemple. Il est évident que par la suite, c'est le contenu de la page qui remplacera ces lignes ^^ .


Alors, tout d'abord, TOUTE ma page est contenue dans une div ayant pour id page.
Cette div contient ensuite une seconde div ayant pour id page bis.

Ces deux div, a priori totalement inutiles, servent à insérer (via le CSS) les images répétées verticalement et qui servent de colonnes d'encadrement à gauche et à droite.

Une fois que le cadre formé par les deux colonnes est fixé, on peut continuer à construire normalement notre page avec les autres div que vous pouvez voir dans le code (l'utilisation de la div contenu a pour seul but la mise en forme de la page par rapport aux colonnes fraîchement créées).

Tout le code HTML se trouvant dans la div contenu est entièrement modifiable selon les envies de chacun, je ne fournis ce code que pour donner la source du schéma exposé au début.

Je ne pense pas avoir à fournir de quelconques informations sur ce code en dehors de celles que j'ai déjà données (sinon faites-le moi savoir en commentaires ou en MP ;) ).
Retour en haut

Et un peu de CSS également

CSS pour la mise en forme...



Commencement...



Voici (cette fois petit à petit) le code CSS utilisé pour la mise en forme de ce que nous venons de créer.

Code : CSS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
body {
  width:100%;
  margin:0px auto;
  font:10pt, "Trebuchet MS", serif;
  color:#696969;
}

div#page {
  background:url("../images/gauche.png") repeat-y;
}

div#page_bis {
  background:url("../images/droite.png") repeat-y top right;
}


Ce code ne nécessite (j'espère :p ) aucune explication mise à part ce point :
pour ma div page_bis, j'affiche mon image de fond en haut à droite de ma div.

Si je n'avais pas précisé ce positionnement, la répétition de mon image de fond serait superposée à celle de gauche !

Passons maintenant au contenu de la page avec... la div contenu :p .

Code : CSS
1
2
3
div#contenu {
  margin:0px 18px;
}


Comme je l'avais précisé précédemment, cette div ne sert qu'à une mise en page.
J'applique des marges latérales équivalentes à la largeur de mes images d'encadrement.

Pour ceux qui ne sauraient pas (ou ne se souviendraient plus ^^ ), l'utilisation de la propriété margin associée à 2 valeurs sert à définir les marges extérieures haute / basse (première valeur fournie : ici 0px) et ensuite les marges latérales (seconde valeur, donc). Il est bien sûr possible d'être encore plus précis selon nos besoins en utilisant jusqu'à 4 valeurs, mais ce n'est pas l'objet de ce mini-tuto, pour cela jetez donc un oeil à la liste des propriétés CSS créée par M@teo21, très utile, je trouve (cliquez ici pour voir la liste).

Bien : nous avons donc terminé avec nos div de contenu, nous allons maintenant pouvoir aborder le contenu lui-même :) .

Bannière et menu...



Voici à présent le code CSS lié aux div structurant la page : banniere, menu, corps...

Code : CSS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
div#banniere {
  padding:20px;
  text-align:center;
  background-color:#87CEFA;
}

div#menu_barre {
  margin-bottom:10px;
  padding:2px;
  height:26px;
  text-align:center;
  background:url("../images/barre.png") repeat-x;
}


Ces 2 éléments ont une largeur équivalente à la largeur totale de la page moins les marges précisées par la div contenu.

Concernant la div banniere, rien à dire, j'ose espérer que vous comprenez tout :) .

Même chose pour la div menu_barre, rien de bien compliqué.

Menu vertical...



Les 3 cadres marqués menu 1, 2 et 3 sont contenus dans une div nommée menu_colonne ; ainsi, le positionnement d'un menu par rapport à son environnement ne se fera qu'une seule et unique fois à travers cette div :) .

Code : CSS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
div#menu_colonne {
  width:14%;
  float:left;
  margin-left:10px;
}

div.menu_section {
  margin-bottom:10px;
  padding-left:10px;
  background-color:#F5F5F5;
  border:1px solid #DCDCDC;
}


Bien, passons aux explications (vous commencez à être habitués, je sais :p ).

Je définis sur ma div menu_colonne un flottant pour qu'elle se positionne à gauche (nous verrons par la suite pourquoi).

Une fois ces précisions apportées, je suis libre de me créer autant de div de menu que j'ai besoin à l'intérieur ^^ .

Concernant à présent chaque "sous-menu" en lui-même, tout n'est que mise en forme.
Notez tout de même la marge inférieure servant à espacer chaque menu du suivant :) .

Attends une seconde, pourquoi tu utilises un padding-left alors qu'un text-indent aurait suffi o_O ?

Ah ! On voit ceux qui font attention à ce que je dis :D . Eh bien tout simplement parce que le text-indent n'agit que sur la première ligne, et que les suivantes reviennent ensuite se coller contre le bord gauche. C'est pourquoi avec le padding-left, je décale TOUT le contenu et non pas seulement la première ligne ^^ .

Le corps...



Nous voici arrivés au corps de la page (courage, la fin est proche ;) ). Sans plus tarder, voici le code :

Code : CSS
1
2
3
4
5
6
7
8
div#corps {
  width:80.5%;
  margin:0px 10px 10px 10px;
  padding-left:10px;
  float:right;
  background-color:#F5F5F5;
  border:1px solid #DCDCDC;
}


À part les "réglages de base" que je n'expliquerai pas, la seule chose à noter est que mon corps est placé en flottant à droite.

Et pourquoi tu mets un flottant, dis ? :euh:

La réponse est simple : je veux que le corps de ma page commence en dessous de ma barre de menu (sous la bannière) et à droite de ma "colonne de menus". Comme nous utilisons des div, la seule façon pour que deux div puissent se situer à une même hauteur (ici, la colonne de menus et le corps), est de leur appliquer un flottant.

Je précise pour ceux qui le souhaiteraient qu'une div étant un élément de type block, la création de plusieurs div les place successivement les unes sous les autres (je n'aborderais pas la possibilité de rendre mes div de type inline car je trouve cela inutile dans notre cas).

Attention !
L'utilisation des flottants implique que leurs tailles respectives soient suffisamment basses pour leur permettre de se tenir "côte à côte", sans quoi la seconde div sera effectivement placée sous la première malgré le flottant !


Et la barre de navigation rapide, tu l'oublies là, j'te signale ! :o

Pas tout à fait, non ^^ .
En fait, si vous regardez bien mon image de départ, vous constaterez que la barre de navigation rapide et le corps sont en tous points identiques, si ce n'est la hauteur du corps qui a été étendue avec plusieurs sauts de ligne.
Je vous informe donc que le code CSS est rigoureusement le même pour ces deux div :) .

On touche au but : la barre de copyright



Ainsi, nous sommes arrivés au bout du code CSS avec ce dernier extrait :

Code : CSS
1
2
3
4
5
6
7
8
div#copyright {
  margin:0px 10px;
  text-align:center;
  padding:5px 0px;
  background-color:#F5F5F5;
  border:1px solid #DCDCDC;
  clear:both;
}


Une fois de plus, rien de bien palpitant à part la dernière ligne.
Je mets en place un clear : both afin de bien placer ma div sous la colonne de menus ET sous le corps.
Ainsi, nous voilà au bout du voyage :) .

Eh bien voilà : je vous informe que nous avons abordé tout ce que je souhaitais vous faire partager dans ce mini-tuto (qui commence à être long :D ).
Néanmoins, je ne vous lâche pas comme ça dans la nature (qui a soupiré :lol: ?) : je vous incite fortement à lire la section suivante concernant la compatibilité entre IE et FF.
Retour en haut

La compatibilité ? Un fléau ? Pas tant que ça !

Un rêve à portée de main...



Dans cette dernière partie que je vais essayer de faire la plus courte possible, nous allons parler de la compatibilité d'un tel design selon les différents navigateurs.

Vous n'êtes pas sans savoir que IE gère les bordures à sa manière, ce qui donne parfois des résultats assez... surprenants, comparé aux autres navigateurs.

C'est pourquoi je vous propose ici d'utiliser une petite astuce pour adapter votre design au navigateur :) .

Eh c'est quoi, dis ? :o

Eh bien il s'agit simplement de remettre le nez dans le CSS (eh oui, encore :p ) pour en faire 2 versions différentes.
Il est donc possible :
  • soit de découper le fichier CSS en 3 parties : design général, design IE, design FF ;
  • soit de créer 3 fichiers CSS différents.
Pour ma part, je me contente simplement de diviser le fichier en 3.

Ainsi, dans mon fichier CSS (je crée virtuellement les parties avec des commentaires), je sépare les choses comme suit :
  • body, div#page, div#page_bis, div#contenu, div#banniere, div#menu_barre, div.menu_section : ces éléments restent fixes quel que soit le navigateur, j'ai donc choisi de les mettre dans la section design général ;
  • tout le reste (du moins pour ma part) varie selon les navigateurs.
La répartition est une chose mais l'astuce en est une autre, arrête de tourner autour du pot !

Minute papillon, y a pas le feu, si :p ?

IE alias Internet Explorer



Bien, avant toute chose, je tiens à préciser que ce qui suit n'est valable que pour les versions d'IE inférieures à la 7e (la version 7 ayant apporté un vent de "mise à niveau" assez convenable).

Sachez donc, qu'IE ne gère pas ce qu'on appelle, en CSS, l'héritage, on va donc retourner cette lacune à notre avantage ^^ .

Si vous souhaitez définir une div qui soit d'une couleur pour IE et d'une autre pour FF, voici comment procéder :

Code : CSS
1
2
3
html div#couleur {
  background-color:blue;
}

Rien de bien compliqué, il suffit d'utiliser un code CSS ordinaire en ajoutant simplement html devant la balise, la classe ou l'id à mettre en forme.

FF alias Firefox



Sous Firefox (ou la grande majorité des navigateurs autres que IE), l'héritage est une notion reconnue et appliquée, voici donc comment la mettre en place.
Reprenons le même exemple de la div colorée mais cette fois, pour FF :

Code : CSS
1
2
3
html > body div#couleur {
  background-color:red;
}


De cette manière, FF recherchera la div voulue dans le body pour la colorier en rouge, et non en bleu ce coup-ci :) .

Pour en revenir à notre problème



J'ai volontairement utilisé un exemple basique axé sur une simple couleur pour en clarifier le fonctionnement.
Il vous suffit désormais de reprendre vos bouts de code qui doivent varier d'un navigateur à l'autre (surtout au niveau de la largeur et des bordures) et de leur appliquer cette méthode de distinction.

Je précise à toutes fins utiles que les deux versions de la mise en forme doivent figurer dans votre CSS pour que le navigateur puisse "faire son choix" sur celle qu'il comprend et peut interpréter !


La sortie du tunnel est droit devant, il ne nous reste plus qu'un misérable petit questionnaire à remplir ;) .
Retour en haut

Q.C.M.

Quelle est l'astuce proposée dans ce mini-tuto pour réussir à faire des div extensibles et de même hauteur que le corps de la page ?
À quoi servent les 2 div page et page_bis ?
Que se passerait-il si on ne précisait pas le top right dans le code suivant (par rapport à ce qu'on a vu) ?
Code : CSS
1
2
3
div#page_bis {
  background:url("../images/droite.png") repeat-y top right;
}
Quelle div possède le même code CSS que la div corps ?
Que se passerait-il si la hauteur de la div copyright n'était pas spécifiée ?
Comment faire varier certaines propriétés CSS selon le navigateur ?

Statistiques de réponses au QCM

Retour en haut
Voilà, ce tuto (qui, je me permets de le préciser, est mon premier :p ) est maintenant terminé.
J'espère qu'il vous aura été utile (ne serait-ce qu'un tout petit peu :-° ).
Pour toute question (dans la limite de mes compétences) n'hésitez pas à m'envoyer un MP et / ou laisser un commentaire.
@+ amis zéros ;) .
Retour en haut

Partager

Retour en haut
35 commentaires pour "Menus latéraux de même hauteur et extensibles"
Note moyenne : 3.10 / 4 (10 votes)
Pseudo Commentaire
Hors ligne hum^n # Posté le 17/02/2010 à 04:25:51

Je n'ai rien compris à ton tuto en le lisant ! :D Ce n'est qu'à la fin dans le questionnaire que j'ai compris que l'imbrication ne sert en fait qu'a former un bloc. . .
C'est pas vraiment expliquer .
T'aurais aussi pus utiliser des images menu fixé en position absolute pour les menu afin de ciblé plus de possibilités comme le souligne Almaju .
Effort à faire ! 10/20 Car c'est un des rare tuto du net à traiter de concaténation de div :p
Hors ligne anonyme # Posté le 04/04/2010 à 19:58:41

Bof bof, je trouve :(
Pas assez de clarté !
Hors ligne Kail-Ra # Posté le 13/08/2010 à 03:21:26

Du point de vue du résultat recherché la démarche est sympa, simple et concise mais pourrais-tu aborder l'incidence que peux avoir cette imbrication de div sur la façon dont les moteurs de recherche vont percevoir le site.
Hors ligne Escalquinou # Posté le 04/11/2010 à 11:46:04

Contrairement aux précédent post, je trouve ce tutorial bien fait, c'est le premier sur lequel je tombe qui explique un peu comment faire un site extensible (même si ce n'est pas forcément clair en lisant le titre du tuto, j'y suis tombé dessus en regardant les différentes manières de faire un menu).

Comme remarques, je pense qu'un petit zip à télécharger au début du tuto pour avoir les mêmes images serait un plus (j'ai fait des imprim écran de chaque partie mais ca simplifierait les choses).
J'ai pas vraiment tout saisi sur la dernière partie, à savoir comment gérer les affichages différents sous IE ou FF, quelques explications ou exemples en plus m'auraient surement aidé.
Enfin, j'ai eu un souci avec le QCM, je ne comprends pas l'avant dernière question sur le copyright : "Que se passerait-il si la hauteur de la div copyright n'était pas spécifiée ?" alors que la hauteur n'est pas spécifié et que ça marche nickel. J'ai du rater quelque chose.
Hors ligne WSJ # Posté le 07/01/2012 à 23:23:22
Bay Harbor Butcher, i presume.
Avatar

 Je trouve qu'il faudrait mettre des liens "Essayer" ;)
Programmeur C, HTML5, CSS3, PHP.
Image utilisateur
Trucs et astuces - Langage C
 

Voir tous les commentaires
Ce tutoriel a été corrigé par les zCorrecteurs.