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

Version imprimable

28/04/2006, 10h24
Yoshidu62

[HTML & CSS] Une marge sur un titre déplace le div
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:

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.
28/04/2006, 10h31
supermanu

Peut-être en mettant padding-top au lieu de margin-top
28/04/2006, 10h32
marsupix

tu as mis quoi comme code css?
28/04/2006, 10h35
Yoshidu62

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 8O

Voici un extrait de mon css :

Tout d'abord la div gauche de ma banniere :

Code:

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:

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:

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.

28/04/2006, 10h50
supermanu

Tu peux nous donner le squelette de ta page html ?

Alors voici un partie du squelette :

Code:

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>

28/04/2006, 11h13
supermanu

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 ?
28/04/2006, 11h21
Yoshidu62

J'ai pas trop compris :mrgreen: 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? :aie:

Voilà ce que j'obtiens en mettant
Code:

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 ?

http://img81.imageshack.us/img81/2299/test9jq.jpg