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).
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 :) .
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 ^^ .
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.
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.
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 :
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.
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 ;) ).
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.
Passons maintenant au contenu de la page avec... la div contenu :p .
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...
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 :) .
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 :
À 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).
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 :
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.
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 :
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 :
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.
La sortie du tunnel est droit devant, il ne nous reste plus qu'un misérable petit questionnaire à remplir ;) .
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 ;) .
