CSS

**kiestouk** · 02/09/2006, 15h11

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 :

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

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

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>

**ilood** · 02/09/2006, 15h15

Salut

Ajoute la propriété position: relative à ton selecteur coeur

Code :

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

1
2
3
4
5
.coeur {
   position: relative;
   background-color: blue;
   ....
}

**kiestouk** · 02/09/2006, 15h23

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

**kiestouk** · 03/09/2006, 00h24

bon, ben, j'ai trouvé la réponse aux questions que je me posais.

Au cas où quelqu'un serait confronté aux mêmes pbls que moi
=> menu en position relative
=> corps en float left
avec utilisation des marges (pourcentage) pour le positionnement.

CSS - Incohérence sous IE et Firefox

Discussions similaires

Partager

Partager