-
Mise en page CSS
Bonjour a tous,:mrgreen:
Je commence tout juste la creation de mon premier site. J'utilise donc Dreamweaver CS4 et j'ai achete et lu un bouquin pour apprendre a l'utiliser.
Seulement, n'ayant aucune experience, je ne sais pas si ma facon de faire ma mise en page est des plus pertinentes, d'autant plus que je m'heurte deja a des problemes de mises en page.
Voila en gros la structure que je voudrais pour mon site.
En haut :
-Un header
-Une barre de navigation horizontale contenant 6 elements
Au milieu :
-Un menu vertical a gauche dont le contenu change selon ce qui est selectionne dans la barre de navigation
-A droite du menu, le contenu du site proprement dit avec textes/images/videos, etc...
En bas :
-Un footer
Jusqu'ici je pense que tout va bien, mais c'est au niveau de l'utilisation des styles CSS que ca coince. J'utilise des balises div pour creer les zones dont j'ai besoin.
-Une principale qui donne la structure a l'ensemble et qui contient toutes les autres.
-Une pour le header
-Une pour la barre de navigation (contenant elle meme 6 balises div cote a cote)
-Une pour [le menu + zone de texte] (correspondant chacune a une balise div)
-Une pour le footer
Premiere question : Est-ce ainsi qu'il faudrait proceder?
Si oui, j'ai des soucis d'affichages :
-Pourquoi si j'affecte une largeur de 17% aux 5 premiers elements de la barre de navigation et 15% au dernier, ca ne remplit pas toute la largeur de la balise div qui les contient (j'ai un petit vide a droite)?
-Pourquoi si j'affecte une hauteur pour le menu et la zone de texte de 100%, ces deux elements ne prennent pas toutes la place de la barre de navigation jusqu'au footer (toute la hauteur de la balise qui les contient), mais qu'ils ajustent leur hauteur selon leur contenu et independament l'un de l'autre?
Merci d'avance pour vos reponses.;)
-
Bonjour,
Pour tes deux questions je vais avoir la même réponse à savoir que chaque élément de type bloc tel qu'un DIV (ou une balise p par exemple) a par défaut une marge extérieure qu'il faut spécifier à 0. Dans le langage css il s'agit de l'attribut margin.
Pour information il existe aussi une marge intérieure nommé padding
Enfin il faut savoir que la version 6 de Internet Explorer ainsi que la version 7 (à une moindre échelle) ne considère pas ces attributs de la même façon.
Je t'invite à consulter le forum CSS, ici
Bon courage