Problème Design
J'ai un problème d'affichage
Discussions Générales
scooby Membre non connecté
Booster Minigun
-
Booster Minigun
- Voir le profil du membre scooby
- Inscrit le : 15/12/2006
- Site internet
je viens de créer mon nouveau design, et j'ai découper le design, j'ai coer le html et le css, mais quand j'affiche la page, sa ne m'affiche pas tout correctement cela me concentre tout dans le header.
Code HTML
Code HTML :
<!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> <title>Mon super site</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" media="screen" type="text/css" title="css" href="css.css" /> </head> <body> <!-- L'en-tête --> <div class="en_tete"> </div> <!-- Les menus --> <div class="menu"> <div class="element_menu"> <h3>Titre menu</h3> <ul> <li>[url=page1.html]Lien[/url]</li> <li>[url=page2.html]Lien[/url]</li> <li>[url=page3.html]Lien[/url]</li> </ul> </div> </div> <!-- Le corps --> <div class="corps"> [p]<center>[b]Bienvenue ![/b]</center> <center>Juste un texte pour un petit teste ^^</center>[/p] </div> </body> </html>
Code CSS
Code CSS :
Body { width: 760px; margin: auto; /* Pour centrer notre page */ margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */ margin-bottom: 20px; /* Idem pour le bas du navigateur */ background-image: url("fond.jpg"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc :p */ } /* L'en-tête */ #en_tete { width: 724px; height: 119px; background-image: url("ban.gif"); background-repeat: no-repeat; margin-bottom: 10px; } #menu { float: height; /* Le menu flottera à droite */ width: 362px; /* Très important : donner une taille au menu */ height: 470px; /* Idem que si dessus ! */ } .element_menu { background-color: #ffffff; background-image: url("menu.gif"); background-repeat: no-repeat; } /* Quelques effets sur les menus */ } .element_menu ul /* Toutes les listes à puces se trouvant dans un menu */ { list-style-image: url("images/puce.png"); /* On change l'apparence des puces */ padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */ padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */ margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */ margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */ } .element_menu a /* Tous les liens se trouvant dans un menu */ { color: #B3B3B3; } .element_menu a:hover /* Quand on pointe sur un lien du menu */ { background-color: #B3B3B3; color: black; } /* Le corps de la page */ #corps { margin-right: 140px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */ width: 462px; /* Très important : donner une taille au menu */ height: 493px; /* Idem que si dessus ! */ padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */ float: left; color: #000000; background-color: #ffffff; /* Une couleur de fond pour le corps */ background-image: url("corps.gif"); background-repeat: no-repeat; }
Pour voir ce que sa affiche, http://mickael1991.free.fr/index.html
Normalement le design devrais ressemblé à cela: http://mickael1991.free.fr/impression.jpg
Merci de votre aide
KONA Membre non connecté
Booster Fusée
-
Booster Fusée
- Voir le profil du membre KONA
- Inscrit le : 21/05/2006
- Site internet
[code=css] float: height; /* Le menu flottera à droite */[/code]
ça devrait être right au lieu de height .
scooby Membre non connecté
Booster Minigun
-
Booster Minigun
- Voir le profil du membre scooby
- Inscrit le : 15/12/2006
- Site internet
KONA Membre non connecté
Booster Fusée
-
Booster Fusée
- Voir le profil du membre KONA
- Inscrit le : 21/05/2006
- Site internet
Post déplacé dans Programmation , aucun rapport avec phpboost .
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie
