[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>

**supermanu** · 28/04/2006, 11h13

en fait tu voudrais que le bloc bleu foncé où il y a ton titre soit colé au bloc du dessus, mais qu'il y ait un espace au dessus du titre ?

**Yoshidu62** · 28/04/2006, 11h21

J'ai pas trop compris

donc j'essaie d'expliquer clairement.

Mon titre h3 qui se trouve dans le div "corps", sans css le texte est collé au bord de la boite div, donc moi vu que c'est un titre j'aimerais le centré et le descendre de quelques pixels pour que ce soit plus joli, qu'il ne soit pas collé au bord du div "corps", donc en css :

- text-align pour le centrer
- margin-top pour mettre un petit espace entre le titre et le bord du div dans lequel il se trouve

Mais le probleme c'est que le margin-top que je met sur mon h3, et bien au lieu de faire une marge entre le bord de la div "corps" et le titre h3 à l'intérieur, et bien la marge se met entre ma div corps et les div du dessus (la bannière).

C'est plus clair?

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

Voilà ce que j'obtiens en mettant

Code :

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

1
2
3
4
5
6
7
8
9
10
 
#corps h3 {
  color : #f3a549;
  background-color : #2222a0;
  text-align : center;
  margin : 0px 15% 0 15%;
  padding-top:10px;
  font-family : Helvetica, Tahoma, Arial, Verdana, sans-serif;
  letter-spacing : 2px;
}

ça donne la même chose dans ie et firefox (pour une fois

)
et à la limite tu peux mettre un margin-bottom pour que ton titre sois centré verticalement ?

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

CSS

Discussions similaires

Partager

Partager