Tom's Guide > Forum > Programmation > le corp de la page web est endessou du menu.

le corp de la page web est endessou du menu.

Forum Programmation : le corp de la page web est endessou du menu.

TomsGuide.com : 800 000 inscrits répondent à toutes vos questions high-tech et informatique. Pour obtenir de l'aide, inscrivez-vous gratuitement !
Créer un nouveau sujet Répondre
Mot :    Pseudo :           
 
held@IDN   21-07-2006 à 10:44:37

bonjour,
voila mon probleme est le suivant :
je suis dans la création d'un site web de disingn fixe.
Le corp de la page de mon site web est endessou du menu. je voudrai avoir comment placer le corp de la page au milieu de cette page.Ou si c'est un probleme de codage merci de me le dire.

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  3.   <head>
  4.       <title>Bienvenue sur mon site !</title>
  5.       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6.   </head>
  7.   <body>
  8.       <div id="en_tete">
  9.   <img src="images/banniere_one_piece09.jpg"/>
  10. </div>
  11.     <div id="menu">
  12. </div>     
  13.           <div class="element_menu">
  14.               <h3>Titre menu</h3>
  15.               <ul>
  16.                   <li><a href="page1.html">Lien</a></li>
  17.                   <li><a href="page2.html">Lien</a></li>
  18.                   <li><a href="page3.html">Lien</a></li>
  19.               </ul>
  20.           </div>
  22.   <div class="element_menu">
  23.       <h2>One piece </h2>
  24.         <h4>histoir</h4>
  25.       <ul>
  26.           <li><a href="page1.html">Lien</a></li>
  27.           <li><a href="onepiece.html">Lien</a></li>
  28.       </ul>
  29.   </div>
  31.   <div class="element_menu">
  32.       <h2>Naruto</h2>
  33.         <h4>Histoire</h4>
  34.       <ul>
  35.           <li><a href="liens.html">Lien</a></li>
  36.           <li><a href="naruto.html">Lien</a></li>
  37.       </ul>
  38.   </div>
  39.             <div id="corps">
  40.   <h1>Mon super site</h1>
  42.   <p>
  43.       Bienvenue sur mon super site !
  45.       salut sa va !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  47.   <h2>A qui s'adresse ce site ?</h2> 
  48.   <p>
  49.       A tout le monde ! Si je commence à privilégier certaines personnes, on va m'accuser de discrimination ;o)
  51.       Que vous soyez fans de fusils à pulsion plasma ou de Barbie et Ken, ce site est fait pour vous ! Si si !
  52.   </p>
  53.  
  54.   <h2>L'auteur</h2> 
  55.   <p>
  56.       Je vais essayer de faire le meilleur site du monde (ça doit pas être bien compliqué). Mon objectif est d'attirer un maximum de visiteurs, de les rendre accros à mon site, puis de les mettre en mon pouvoir.
  58.       Je prendrai ensuite le contrôle du Monde. Une fois que ce sera fait, j'irai explorer les confins de l'Univers à la recherche de nouveaux peuples à soumettre à ma terrible puissance. MooUUuUuuUAhahHaaAhAAaaah !!! (rire diabolique).
  59.   </p>
  60. <div id="pied_de_page">
  61.   <img src="images/mugiwara.png"/>
  62. </div>
  63. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  64.       <style type="text/css">
  65.           body
  66. {
  67.   width: 760px;
  68.   margin: auto;
  69.   margin-top: 20px;
  70.   margin-bottom: 20px; 
  71. }
  73. <title>Exemple de CSS dans le header</title>
  75. #en_tete
  76. {
  77.   width: 760px;
  78.   height: 100px;
  79.   background-image: url("images/banniere_one_piece09.jpg" );
  80.   background-repeat: no-repeat;
  81.   margin-bottom: 10px;
  82. }
  84.           #menu
  85. {
  86.   float: left;
  87.   width: 120px;
  88. }
  90. .element_menu
  91. {
  92.   background-color: #626262;
  93.  
  94.   border: 2px solid black;
  95.  
  96.   margin-bottom: 20px;
  97. }
  98. #corps
  99. {
  100.   margin-left: 100px;
  101.   margin-bottom: 20px;
  102.   padding: 5px;
  103.  
  104.   color: #B3B3B3;
  105.   background-color: #626262;
  106.  
  107.   border: 2px solid black;
  108. }
  109. </style>
  110.   </body>
  111. </html>


merci. :-D :-D :-D

Répondre
Liens sponsorisés
Inscrivez-vous ou connectez-vous pour masquer ceci.
Kymic@IDN   21-07-2006 à 11:59:57
- 0 +

Tu as mis une largeur de 120 pixels à ton menu,

Hors tu mets une marge de 100 pixels à gauche ( comme ton menu est flottant celui ce base par rapport au bord de l'écran enfin du navigateur ) , donc c'est normal qu'il passe en dessous.

Essaye de lui mettre une marge à gauche de 130 pixels par exemple....


Mais ce qui me fait peur c'est que tu poste dans ce forum juste pour ce problème !!! Les css on apprend en bidouillant !!! Tu ne t'es pas dit tient je vais essayer d'augmenter telle ou telle marge pour voir si ca va mieux....

Répondre à Kymic@IDN
held@IDN   21-07-2006 à 12:30:12
- 0 +

merci,
Mais ce que tu me dit la je les deja fai est sa ne change rien j'ai essayer plusieur longeur mais sa ne fonctionne pas.
Mais merci de m'avoir répondu. Mais si tu as une autre solution merci de me prevenir.

Répondre à held@IDN
Kurtis   21-07-2006 à 12:39:43
- 0 +

Ben déjà j'arrive pas à voir ou il a iuntégrer son CSS ... Je reregarde mais je dois avoir de sproblème de vue.
Maintenant si c'est tout le corp (avec menu et tout) que tu vas centrer dans ta page un bon vieux <div align="center"> et c'est bon.

Répondre à Kurtis
Kurtis   21-07-2006 à 12:40:53
- 0 +

Oups je viens de le voir le CSS désolé !!!

J'ai l'habitude qu'on le mette avant !

Répondre à Kurtis
mongos@IDN   21-07-2006 à 12:47:22
- 0 +

tu n'as mis que des marges ! il n'y a pas de position ! tu dois rajouter des atributs "position:absolute; top: Xpx; left:Ypx;" ! (ou X et Y représentrent un nombre réel.)

Répondre à mongos@IDN
Kymic@IDN   21-07-2006 à 12:48:45
- 0 +

nan Mongos tu n'as pas besoin de faire ca normalement !!!

Répondre à Kymic@IDN
held@IDN   21-07-2006 à 14:19:56
- 0 +

re bonjour,
voila le corp de ma pag

e ne veu toujour pas aller au centre il reste endessou du menu.
on ma dit que si j'avai essayer toutes les longeur sa ne povait etre qu'une faute de codage, mais moi je ne trouve pas de faute.
SI vous en trouver une merci de me le dire.

Répondre à held@IDN
candygirl@idn   21-07-2006 à 17:26:12
- 0 +

ya plus d'un truc bizarre dans ton code.

Déjà tu devrais remonter depuis ta balise méta et, par la même occasion tes styles en haut de page (au-dessous de tes autres balises meta), soit depuis

Code :
  1. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


...

jusqu'à

Code :
  1. </style>



Tu vires aussi accessoirement la balise title qui n'a rien à faire au milieu de ton css:

Code :
  1. <title>Exemple de CSS dans le header</title>



Après, on constate que ton div censé contenir le menu, ne contient... rien du tout ;-) :

Code :
  1. <div id="menu">
  2. </div>



donc tu déplace le </div> de fermeture jusqu'à après ton dernier menu, soit juste avant:

Code :
  1. <div id="corps">



ça devrait déjà améliorer un peu les choses

Répondre à candygirl@idn
Kymic@IDN   21-07-2006 à 17:39:26
- 0 +

En théorie, en faisant un float left sur ton menu, tu n'aura meme pas besoin de faire de margin... Au pire ton corps va se placer à coté ou par dessus (tout dépend de ce que contient ton menu ).

Suit les conseils de Candygirl ...

SI apres sa sa ne marche toujours pas, bha essaye en repartant de zéro. Un menu tout simple et un corps de page tout simple.

Répondre à Kymic@IDN
Créer un nouveau sujet Répondre
Tom's Guide > Forum > Programmation > le corp de la page web est endessou du menu.
Aller à :

Il y a 2545 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.

Plan du forum
Forum Bestofmedia ©
2000-2009 Bestofmedia Group
Page générée en 0,385 secondes
Attention

Vous allez répondre sur un sujet resté inactif pendant plus de 6 mois.
Assurez-vous d'apporter des éléments nouveaux à la discussion avant de poursuivre.

Répondre Annuler
Liens