problème de mise en page

**badr** · 24/10/2007, 12h21

Bonjour tout le monde,
j'essai de développer un petit site perso et j'ai utilisé des DIV mais il y avait des erreurs dans la mise en page c'est pour ca j'ai encadrer une de mes DIV (DIV de la partie corps) avec un tableau, ca marche et mon premier problème c'est résolu mais maintenent il y a un petit décalage la patie corps est inferieur au en-tête. quelqu'un a une idée? dois-je encadrer toutes mes DIV avec des tableaux? une solution SVP

le site en question est celui là , il est toujours vide puisqu'il est toujours en construction.

aidez moi SVP.

merci d'avance

Cordialement
Badr

**cadoudal56** · 24/10/2007, 16h48

Hello,

As tu remarquer que tu avais deux balises vides avant ton texte dans ta DIV corps ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
<p>&nbsp;</p>
<p>&nbsp;</p>

@+
cadou

**badr** · 24/10/2007, 17h29

oui j'ai déà remarqué mais ca viens pas de là

**jeje13009** · 24/10/2007, 18h27

slt,

ce n'est pas normal que tu aies besoin d'encadrer ton div dans un <table>... et le décalage viens d'ailleurs de là...

envoie nous le code de ta page (ainsi que le CSS s'il est externe) avant l'ajout du <table>...

**badr** · 25/10/2007, 00h21

voila le code html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>badrgb</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	    <META NAME="Author" LANG="fr" CONTENT="Badr GRAR">
  <META NAME="Description" CONTENT="Ce site est destin&eacute; pour vous chers internautes pour vous aider, et pour am&eacute;liorer vos connaissances">
  <META NAME="keywords" content="html, algorithme, faq, ethernet, sgml, faq xp, câble réseau, rj45, réseau, asp, cours, cour, totorial, totoriaux, informatique, badr, badrgb">
  <META NAME="ROBOTS" CONTENT="follow all">
	<link href="css/styles.css" rel="stylesheet" type="text/css" />
   </head>
 
   <body>
 
       <!-- L'en-tête -->
 
       <div id="en_tete">
 
       </div>
 
       <!-- Les menus -->
 
       <div id="menu">       
           <div class="element_menu">
 
               <ul>
                   <p>&nbsp;</p>
                   <li><a href="index.html">Accueil</a></li>
                   <li><a href="Cours.html">Cours</a></li>
                   <li><a href="Faq.html">Faq</a></li>
				   <li><a href="Mon CV.html">Mon CV</a></li>
				   <li><a href="Totoriaux.html">Tutoriaux</a></li>
				   <li><a href="Contact.html">Contact</a></li>
                   <p>&nbsp;</p>
               </ul>
           </div>
 
           <div class="element_menu">
               <h3>&nbsp;</h3>
               <p align="center"></p>
           </div> 
		   <div class="element_menu">
               <h3>&nbsp;</h3>
               <p>&nbsp;</p>
		   </div>      
       </div>
 
 
 
       <!-- Le corps -->
 
   <div id="corps">
 
 
         <p>&nbsp;         </p>
           <p>&nbsp;</p>
           <p>Bienvenue sur mon  site <br />
             Vous allez adorer ici, c'est un site génial qui va parler d'informatique en g&eacute;n&eacute;ral. </p>
           <h2>A qui s'adresse ce site ?</h2>   
           <p>
           A tout le monde ! <br />
           Je veux partager mon savoir avec vous chers internautes c'est pour &ccedil;a que j'ai  
            cr&eacute;&eacute; ce site.<br />
           je vous dis bonne navigation et vous pouvez m'envoyer vos commentaires, vos  suggestions, ... dans la  section contact.
           <h2>L'auteur</h2>   
           <p>
               L'auteur du site ?<br />
		   Jeune marocain &acirc;g&eacute; de 23ans, j'essai de cr&eacute;er  un bon site o&ugrave; tout le monde apprend des nouveaux trucs, et des nouvelles  informations qui pourrant leurs &ecirc;tre utiles.</p>
           <p>&nbsp; </p>
           <p>&nbsp;</p>
           <p>&nbsp;</p>
           <p>&nbsp;</p>
           <p>&nbsp;</p>
           <p>&nbsp;</p>
           <p>&nbsp;</p>
           <p>&nbsp;</p>
           <p>&nbsp;</p>
   </div>
 
       <!-- Le pied de page -->
 
       <div id="pied_de_page">
           <p>Copyright &copy;2007 badrgb, tous droits réservés</p>
   </div>
 
   </body>
</html>

et le code CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
 
body
{
 
   width: 90%;
   margin: auto;
   margin-top: 20px;
   margin-bottom: 20px;   
 
}
 
/* L'en-tête */
 
#en_tete
{
   width: 100%;
   height: 100px;
   background:#000 url("../images/badrgb.gif") no-repeat;
   margin-bottom: 10px;
 
}
 
 
/* Le menu */
 
#menu
{
   float: left;
   width: 130px;
}
 
.element_menu
{
   background-color: #CCCCCC;
   background-image: url("images/motif.png");
   background-repeat: repeat-x;
   border: 2px solid black;
   margin-bottom: 20px;
}
 
 
/* Quelques effets sur les menus */
 
 
.element_menu h3
{   
   color: #000000;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   text-align: center;
}
 
.element_menu ul
{
   list-style-image: url("images/puce.png");
   padding: 0px;
   padding-left: 20px;
   margin: 0px;
   margin-bottom: 5px;
}
 
.element_menu a
{
   color: #000000;
}
 
.element_menu a:hover
{
   background-color: #CCCCCC;
   color: black;
}
 
 
/* Le corps de la page */
 
#corps
{
   margin-left: 140px;
   margin-bottom: 20px;
   padding: 5px;
 
   color: #000000;
   background-color: #E2E2E2;
   border: 2px solid black;
}
 
#corps h1
{
 
   color: #000000;
   text-align: center;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}
 
#corps h2
{
   height: 30px;
   padding-left: 30px;
   color: #000000;
   text-align: left;
}
 
 
/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */
 
#pied_de_page
{
   padding: 5px;
   clear: left;
   text-align: center;
   clear : both;
   color: #000000;
   background-color: #CCCCCC;
   border: 2px solid black;
}

**jeje13009** · 25/10/2007, 13h16

slt,

j'ai trouvé ! tes div ne sont absolument pas positionnés dans ta page, autrement dit, ton navigateur les affiche au fur et à mesure qu'il les rencontre, si tant est qu'il est la place... tu n'as donc aucune mise en page CSS d'effectuée !

pour positionner tes balises, utilises :
position:absolute; => il existe d'autre valeurs possibles...
top

?px;
left

?px;

problème de mise en page

HTML

Vue hybride

Discussions similaires

Partager

Partager