Je voudrait faire un site, j'ai fait le design découpes etc...
Mais au dur moment de passer au css je bug
J'ai lu le cour de mateo mais mon design et un peut plus compliquer.
En gros je voudrait mètre en place une image en haut (bannière), deux colonne (bord de la page), et une image en bas de page, et un menu dans le corp de ma page.
Mais je ne sais pas trop comment procédé, car je voudrait que mais colones, une a droite et une a gauche, débute aprés ma bannière et fasse toute la hauteur de ma page j'usqua l'image du bas.
Mais esque je doit mètre mais balise de colones a l'intérieur du corp ou a l'extérieur ?
Ou une avant et une apres le corp ?
body /*corps de la page*/ { width: 1150px; /*longueur associée*/ margin: auto; margin-top: 20px; /*laisse un petit espace en haut et en bas*/ margin-bottom: 20px; background-image: url("fond.jpg"); /*nom de l'image*/ }
#en_tete { width: 1260px; /*longueur associée (ca fait une page ouverte si tu prefere met 100%;*/ height: XXXpx; /*hauteur associée (remplace les XXX par la hauteur de la banniere*/ background-repeat: no-repeat; /*banniere fixe*/ background-image: url("ban.jpg"); }
#menu { background-image: url("menugauche.jpg"); background-repeat: no-repeat; float: left; /*menu à gauche du texte central*/ width: XXXpx; /*longueur du menu*/ height: XXXpx; /*hauteur du menu (remplace les XXX de la meme facon que pour la longueur!! si tu veux la moitié de la page en gros tu met 300px; ou 50%; met tu verras tu auras des ptites merdes ^^)*/ padding-top:20px; /*on laisse 20px despace libre en bas du menu (po obligé de le mettre ca depend de ce que tu veux)*/ padding-bottom: 50px; /*on laisse 50px despace libre en bas du menu*/
margin-left: 10px; /*on laisse 10px despace libre a gauche pour separer du menu de gauche */ }
#menu_gauche { background-image: url("menugauche.jpg"); background-repeat: no-repeat; float: left; /*menu à gauche du texte central*/ width: XXXpx; /*longueur du menu (remplace les XXX soit en % par rapport a la taille totale de ta page soit en px exemple pour faire les 3/4 de la page tu met qq chose du genre 250px; (a verifier))*/ height: XXXpx; /*hauteur du menu (remplace les XXX de la meme facon que pour la longueur)*/ padding-top:20px; /*on laisse 20px despace libre en bas du menu (po obligé de le mettre ca depend de ce que tu veux)*/ padding-bottom: 50px; /*on laisse 50px despace libre en bas du menu*/ }
#menu_droite { background-image: url("bordd.jpg"); float: right; width: XXXpx; /*pareil que pour gauche*/ height: XXXpx; /*pareil que pour gauche*/ padding-bottom: 50px; /*on laisse 50px despace libre en bas du menu*/ background-repeat: no-repeat; /*c'est une petite precision po obligatoire qui peu empecher certains bug sous IE*/ }
#corps /*milieu de ta page*/ { height: 450px; /*ca depend de ce que tu veux , il faut s'adapter a tes menus*/ color: white; /*couleur de l'ecriture*/
margin-left: 330px; /*pour decaler le texte du menu*/ padding: 5px; /*pour eviter que le texte s'approche trop de la bordure*/ padding-top: 20px; /*partt sauf en haut*/ }
#pied_de_page { color: white;
margin-left: 470px; background-attachment: scroll; width: 1260px; /*longueur associée (ca fait une page ouverte si tu prefere met 100%;*/ height: XXXpx; /*hauteur associée (remplace les XXX par la hauteur de la banniere*/ background-image: url("banbas.jpg"); }
bon evidemment ca marchera po du 1er coup mais en fesant qq arrangements je pense que ya moyen d'arriver a ce que tu recherches
apres encore un detail important
dans ton code HTML
tu dois d'abord mettre le <div id de l'en tete puis du menu le plus a gauche puis le Vrai menu puis le menu de droite puis le corps de la page et enfin le pied de page>
si tu ne respecte po cet ordre cela ne marchera po (tu auras un menu qui ne float po du tt ^^)
voili voilou
[CSS] Ordre des balises alignement..
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
