menu et corps qui se décollent lors d'un ajout de balise <p> ou <h/1/2/etc>

**xmetal-nicox** · 11/07/2012, 11h23

Bonjour à vous ! Voila je suis débutant, je suis en train de crée mon 1er site et je suis confronter au "decollement" de mon menu et de mon corps lorsque je rajoute une/des balises <p> ou <h1/2/3...>

Voici les images : http://cjoint.com/?BGllgGKCE3D

http://cjoint.com/?BGllhQlemes

Comme vous pouvez le constatez lorsque j'écrit directement dans la <div> du corps il n'y a aucun probleme, je trouve sa totalement bizarre et je fait appelle a vous pour m'aider (j'espere ! :p)

Sinon mon 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
<!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>Thymep</title>
	  <meta http-esquiv="Content-Type" content="text/html; charset=iso-8859-1" />
	  <meta name="keywords" content="thymep","tyhmep","timep","thimep","tihmep","enseigne","enseignes","facade","façade","facades","façades","store","stores","ligny","ligny-en-cis","59191","bache","baches","bâche","bâche,"réparation","reparation","réparations","reparations","0327850080" />
	  <link rel="stylesheet" media="screen" type="text/css" href="styles/main.css" />	  
   </head>
   <body>
        <div id="conteneur">
	    <div id="header"></div>
		<div id="menu">
		             <a href="index.html" href='index.html'>Accueil</a> 
					 <a href="Qui sommes-nous .html" href='index.html'>Qui sommes-nous ?</a> 
					 <a href="Nos produits.html" href='index.html'>Nos produits</a> 
					 <a href="Nos réalisations.html" href='index.html'>Nos réalisations</a>
					 <a href="Contact.html" href='index.html'>Contact</a>
					 </div>
		 <div id="corps">
		    <h1>Thymep : Le site !</h1>
		            <p>BLABLABLABLABLABLABLAB<br />LABLABLABLABLABLABLABLABLA
					BLABALBLABLABALBALBALABLABLABLABLABKLABLABLABLAA<br />njnhhbnn
					ujhhbjhbhnhbjnjhnjhbhbhujbihbhbbhhbbibhibhibhibhbhibhibhibhnonnjn
					ghvhjkgukyuggvbhhyghhuhhnjijikijinj,i,ijjunujhyhughhubgtgfcrdessxsds</p>
			<h2>Et sa c moins important</h2>
					<img src="images/terre.jpg" width="300" height="309" alt="la terre">
					<img src="images/terre.jpg" width="300" height="309" alt="la tere">
					<a href="Contact.html"><IMG class=image0R title="terre" alt="" src="images/terre.jpg" border=0></a>
<MARQUEE>
<IMG src="images/walla thymep.jpg">
<IMG src="images/rainuré.jpg">
<a href="Contact.html"><IMG class=image0R title="terre" alt="" src="images/walla thymep.jpg" border=0></a>
</MARQUEE>
				</div>
		 <div id="footer">Thymep Copyright - Tous droits réservés © 2008-2009</div>	
	  </div>
   </body>
</html>

Et mon 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
#header
{
   background-image: url("../images/header.jpg");
   width: 1024px;
   height: 310px;
   }
 
 
#menu
{
   background-image: url("../images/menu.jpg");
   width: 1024px;
   height: 50px;
   text-align: center;
   font-size: 16px;
   padding-top: 26px;
   clear: padding;
   color: white;
}
 
#menu a
{
   color: white;
   text-decoration: none;
   margin-left: 10px;
   margin-right: 10px;
   font-family: "Verdana", sans-serif;
}
 
#menu a:hover
{
   text-decoration: underline;
   font-family: arial, verdana, sans-serif; font-weight: bold;
   text-shadow:  0.1em 0.1em 0.2em white
}
 
#footer
{
   background-image: url("../images/corps-bas.jpg");
   width: 1024px;
   height: 26px;
   color: #757674;
   font-size: 15px;
   text-align: center;
   padding-top: 27px;
   font-family: arial, verdana, sans-serif;
}
 
#corps
{
   background-image: url("../images/corps-milieu.jpg");
   background-repeat: repeat-y;
   width: 912px;
   padding-left: 56px;
   padding-right: 56px;
   color: white;
   max-width: 3000px;
   clear: both;
   }
 
body
{
   background-color: #030303;
}
 
#conteneur
{
   margin: auto;
   border: 1px solid black;
}
 
#conteneur
{
   margin: auto;
   width: 1024px;
}

Ne faite pas attention aux écritures et aux images, elle me sert juste de test !
J'espere avoir une reponse rapide

...:HELP ME PLS!:

**Muchos** · 11/07/2012, 11h51

Ahh ! Les nineties

C'est normal ! Certains éléments en bloc ont des mises en forme interprétées automatiquement par les navigateurs. Par ex., <h1> apparaît généralement en large et gras, avec de légers padding et margin. À vous de le corriger en css, avec un reset css par exemple...

**xmetal-nicox** · 11/07/2012, 14h03

C'est a dire que je doit juste améliorer le margin et le padding o.o dsl mais je vois pas trop là...:p

**xmetal-nicox** · 11/07/2012, 17h13

Merci beaucoup Muchos !

J'ai fait des recherches sur le reset CSS et j'ai reussi a réglé mon problèmes juste en rentrant:

Code :

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

1
2
3
4
5
6
 
* 
{
    margin: 0;
    padding: 0;
}

Encore merci !

menu et corps qui se décollent lors d'un ajout de balise <p> ou <h/1/2/etc>

HTML

Vue hybride

Discussions similaires

Partager

Partager