[HTML & CSS] Une marge sur un titre déplace le div

**Yoshidu62** · 28/04/2006, 10h24

Bonjour, voici mon petit problème, j'ai deux div l'une en dessous de l'autre, dans la seconde j'insère un titre h3, et je lui met un margin-top de 10px pour qu'il ne soit pas collé au bord, mais le problème c'est que au lieu d'avoir mon h3 qui descend de 10px, et bien la div descende également, ce qui fait que mon h3 est toujours collé à ma div, et il y un espace de 10 px entre les 2 div, en gros le code :

Code :

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

1
2
3
4
 
 
<div></div>
<div><h3>Titre</h3></div>

Moi je voudrais mettre une marge à mon titre pour le descendre de 10px, mais la div descend également

Une idée?

Merci.

**supermanu** · 28/04/2006, 10h31

Peut-être en mettant padding-top au lieu de margin-top

**marsupix** · 28/04/2006, 10h32

tu as mis quoi comme code css?

**Yoshidu62** · 28/04/2006, 10h35

je ne peux pas utiliser le padding-top car :

- ie et firefox ne l'interprète pas de la même façon
- je met le background du h3 en couleur donc avec le padding ça fait trop gros

Pour être pls précis au niveau du code et du squelette de la page, voilà comment ça se présente :

Une bannière composée de 2 div, une float à gauche et l'autre à coté à droite
Le corps composé d'une div situé en-dessous de la bannière

Mon titre h3 se trouve dans le corps, et donc quand j'applique le margin-top et bien j'ai ma balise div de mon corps qui se sépare de ma bannière, en fait c'est comme ci j'appliquais le margin-top à ma div au lieu de mon h3, le résultat est le même

**Yoshidu62** · 28/04/2006, 10h40

Voici un extrait de mon css :

Tout d'abord la div gauche de ma banniere :

Code :

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

1
2
3
4
5
6
7
8
 
#bangauche {
width : 500px;
height : 150px;
position : absolute;
float : left;
background-image : url(images/bangauche.png);
}

Ensuite la div se situant à droite de celle-ci :

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
 
#bandroite {
  width : 280px;
  height : 150px;
}
 
ul {
  margin : 0;
  padding : 0;
}
 
li {
  list-style-type : none;
}
 
li a {
  display : block;
  width : 280px;
  height : 30px;
  margin-left : 500px;
  line-height : 30px;
  text-decoration : none;
  color : white;
  background-color : blue;
  font-size : 14px;
  font-family : Helvetica, Tahoma, Arial, Verdana, sans-serif;
  letter-spacing : 2px;
}

Et maintenant la div du corps avec le h3 problematique :

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
 
#corps {
  width : 780px;
  height : 600px;
  background-color : white;
  color : gray;
}
 
#corps h3 {
  color : #f3a549;
  background-color : #2222a0;
  text-align : center;
  margin : 10px 15% 0 15%;
  font-family : Helvetica, Tahoma, Arial, Verdana, sans-serif;
  letter-spacing : 2px;
}

Voilà j'espère que vous pourrez trouver le souci.

D'avance merci.

**supermanu** · 28/04/2006, 10h50

Tu peux nous donner le squelette de ta page html ?

**Yoshidu62** · 28/04/2006, 10h56

Alors voici un partie du squelette :

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>
      Page contact
    </title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="shortcut icon" href="images/favicon.ico">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
 
 
 
  <!-- Debut du site -->
  <body>
 
    <!-- Prechargement des images du menu -->
    <div id="cache">
      <img src="images/banorg1.png" alt="">
      <img src="images/banorg2.png" alt="">
      <img src="images/banorg3.png" alt="">
      <img src="images/banorg4.png" alt="">
      <img src="images/banorg5.png" alt="">
    </div>
    <!-- Fin Prechargement des images du menu -->
 
    <!-- Debut Banniere -->
 
    <!-- Partie gauche de la banniere -->
    <div id="bangauche">
    </div>
    <!-- Fin Partie gauche de la banniere -->
 
    <!-- Partie droite de la banniere -->
    <div id="bandroite">
      <ul id="menu">
    <li id="presentation"><a href="presentation.html">Presentation</a></li>
    <li id="formation"><a href="formation.html">Formation</a></li>
    <li id="recrutement"><a href="recrutement.html">Recrutement</a></li>
    <li id="espace_client"><a href="espace_client.html">Espace Client</a></li>
    <li id="contact_page"><a href="contact.html">Contact</a></li>
      </ul>
    </div>
    <!-- Fin Partie droite de la banniere -->
 
    <!-- Fin Banniere -->
 
    <!-- Debut Corps du site -->
    <div id="corps">
      <h3>Contact</h3>
    </div>
    <!-- Fin Corps du site -->
 
    <!-- Debut pied de page -->
    <div id="pied">
    </div>
    <!-- Fin pied de page -->
 
  </body>
  <!-- Fin du site -->
 
 
 
 
</html>

[HTML & CSS] Une marge sur un titre déplace le div

CSS

Vue hybride

Discussions similaires

Partager

Partager