Prérequis
Pour suivre ce tuto, il vous faudra :
- connaître un minimum le CSS ainsi que le XHTML (par ici les débutants
) ;
- 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
!!!
Pour commencer
Alors voyons, pour débuter votre petit travail (bah oui quoi, j'vous tiens, alors autant vous faire travailler
), on va d'abord regarder un petit schéma pour se mettre en appétit
.
Bon bien sûr, on ne va pas arriver à ce résultat en un claquement de doigts
.
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
.
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
.
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).
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
).
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
) 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 .
Code : CSS1
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.
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
).
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
?
Ah ! On voit ceux qui font attention à ce que je dis
. 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 : CSS1
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 ?
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 !
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 : CSS1
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
).
Néanmoins, je ne vous lâche pas comme ça dans la nature (qui a soupiré
?) : je vous incite fortement à lire la section suivante concernant la compatibilité entre IE et FF.
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 ?
Eh bien il s'agit simplement de remettre le nez dans le CSS (eh oui, encore
) 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
?
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 : CSS1
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 : CSS1
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
.
Flux RSS News
Twitter
Facebook