CSS - Incohérence sous IE et Firefox
Bonjour,
Je suis actuellement en train de mettre en place un site Web basé sur CSS.
Je ne comprends pas le problême que je rencontre.
Rapide explication du rendu visuel de mon site.
Définition de la "page", qui contiendra tout le contenu de mon site => .page
En haut : un header (contenant un logo) => .logo
puis vient un lien (dans une box) => #yoyo
ensuite, une boîte (=> .coeur) qui me sert de conteneur afin de placer un menu (=> .menu) à gauche et une zone de texte (=> .corps) à droite.
Pour finir, un pied de page => .bottom
Code CSS de ma page :
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
|
body {
background-color: red;
text-align: center;
}
.page {
display: block;
background-color: black;
width: 786px;
height: auto;
color: white;
border: 1px solid White;
margin: 20px auto auto auto;
text-align: left;
}
.logo {
display: block;
background-color : navy;
height: 212px;
width: auto;
border: 3px double white;
padding: 0px;
margin: 0px;
color : white;
}
#yoyo {
display: block;
background-color : green;
color : white;
height: 10px;
padding: 10px 20px 10px 30px;
width: auto;
border: 3px double white;
}
.coeur {
background-color: blue;
text-align: left;
margin: 20px 0px 10px 0px;
}
.menu {
position: absolute;
top: 295px;
left: 80px;
background-color: gray;
color: black;
width: 150px;
height: auto;
border: 1px white;
padding: 5px;
margin: 0 0 0 30px;
}
.corps {
background-color: black;
color: white;
width: 66%;
height: auto;
border: 3px double white;
margin: 20px 2% auto 27%;
padding: 10px;
} |
Le souci que je rencontre, c'est que lorsque je mets la ligne "position: absolute" au niveau de .menu, le bloc menu prends comme référence la fenêtre du navigateur et non la boîte coeur.
J'ai beau me triturer les méninges, je n'arrive pas à comprendre le pourquoi, ni comment faire pour que .menu se base sur coeur, afin que je puisse le positionner correctement.
Si quelqu'un à déjà rencontré ce problème ou aurait une idée, je suis plus que preneur.
Par avance, merci
PS : voici le code HTML
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<body>
<div class="page">
<div class="logo"><img src="/home/minou/images/calimero.jpg" border="0" alt="Calimero" align="middle"></div>
<div id="yoyo">zoum-zoum !! patapoum</div>
<div class="coeur">
<div class="menu">mon p'tit menu à moi</div>
<div class="corps">mon p'iti corps à moi</div>
</div>
<div class="bottom">une petite bierre ??</div>
</div>
</body>
</html> |
en voilà une idée qu'elle est bonne !! et fonctionne !!
Merci pour l'info, je viens de tester, ça marche très bien.
Seulement maintenant, j'ai un autre hic (que j'avais avant et que je n'arrive pas non plus à comprendre).
Sous Firefox, nickel, les boîtes sont bien placées.
Sous IE6, pas bien !!! Les boîtes menu et corps se retrouvent centrer et se chevauchent dans coeur !!!
Je ne comprends pas sur quoi se base IE6 pour centrer automatiquement mes 2 boîtes !!!
Est ce que c'est le "text-align: center" de body qui entre en ligne de compte ??
Ou bien, est ce autre chose ??
