Discussion :

[Tamus]

Bonjour,

Je suis ennuyé par IE et Opéra qui ne prennent pas en compte un {float: left;} contrairement à Firefox.


J'ai un second probleme, le menu à gauche fait une certaine taille, et le contenu en fait une autre. Je souhaiterais que le fond du menu se répète quand la taille du contenu dépasse celle du menu, pour éviter le "trou" entre le menu et le footer.


Je laisse les différents liens : Le site et le css

Merci d'avance pour votre aide

[gorgonite]

Je suis ennuyé par IE et Opéra qui ne prennent pas en compte un {float: left;} contrairement à Firefox.

Au fait, tu connais cela
http://dean.edwards.name/IE7/

[gorgonite]

J'ai un second probleme, le menu à gauche fait une certaine taille, et le contenu en fait une autre. Je souhaiterais que le fond du menu se répète quand la taille du contenu dépasse celle du menu, pour éviter le "trou" entre le menu et le footer.

vu toutes tes tailles sont définies de manière fixe... pour quoi tu ne fixe pas aussi la hauteur du menu ???

[Tamus]

Au fait, tu connais cela
http://dean.edwards.name/IE7/

Heu ... peux tu être plus explicite

Et au sujet de fixer la hauteur du menu, non car la hauteur du contenu est ammenée à changée suivant la page.

[gorgonite]

Heu ... peux tu être plus explicite Embarassed

Ben c'est juste un truc qui permet de faire du css2 sous ie...
donc pour ton float

Et au sujet de fixer la hauteur du menu, non car la hauteur du contenu est ammenée à changée suivant la page.

tu peux faire un truc du genre:
ton menu est beaucoup plus grand, (height: xxx%), et ensuite tu places l'image avec position: absolute


mais c'est moche...

[ilood]

Salut

Ben c'est juste un truc qui permet de faire du css2 sous ie...
donc pour ton float

Oula doucement doucement... IE 6 gère une partie du css 2. Et connait la propriété float, tout comme Opera. Il faut arrêter un peu de mettre Firefox sur un piédestal. Sans vouloir lancer de troll, il est loin d'être parfait.

Avant de proposer des solutions abracadabrantesques, il faudrait se pencher sur le code html et css du site qui pose problème.

[Tamus]

Oula doucement doucement... IE 6 gère une partie du css 2. Et connait la propriété float, tout comme Opera. Il faut arrêter un peu de mettre Firefox sur un piédestal. Sans vouloir lancer de troll, il est loin d'être parfait.

Avant de proposer des solutions abracadabrantesques, il faudrait se pencher sur le code html et css du site qui pose problème.

Je n'ai en aucun cas voulu lancer de débat interminable sur les navigateurs, j'ai juste fais un constat sur cette situation bien précise.

Donc si quelqu'un pouvait examiner le css et la source html, cela m'aiderais pas mal.

merci d'avance

[Tamus]

up

[_dranece_]

Il n'y a pas de probleme de float sur IE, pour eviter que ton div "contenu" s'affiche en dessous du menu, ne lui spécifie pas de largeur, un div prend automatique la largeur restante :

Code :

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

1
2
3
4
5
6
 
.contenu {
	margin-left: 185px;
	background-image: url('images/fond_contenu.jpg');
	background-position: right;
}

Pour que le fond s'affiche quelles que soient les hauteurs des contenus, ajoutes un 2 eme div "global" à l'intérieur de ton div "centrer" et appliques ces styles (j'ai juste mis ceux qui ont changé ou été ajoutés):

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
 
.menu {
	width: 185px;
	float: left;
}
 
.contenu {
	margin-left: 185px;
	background-position: right;
}
#centrer {
	background: url('images/fond_menu.jpg') repeat-y left top;
	margin: auto;
	width: 770px;
}
#centrer_decoration {
	background: url('images/fond_contenu.jpg') repeat-y right top;
}
.footer {
	width: 770px;
	height: 124px;
	background: #FFFFFF url('images/footer.jpg');
	background-repeat: no-repeat;
	padding-top: 110px;
	margin-top: auto;
	text-align: center;
}
.clear {
	clear: both;
	font-size: 0;
	line-height:0;
}

Et voilà la structure globale:

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
 
<body>
 
<div id="centrer">
	<div id="centrer_decoration">
		<div class="header">
		</div>
		<div id="gauche">
			...
		</div>
		<div class="contenu">
			...
		</div>
		<div class="clear"></div>
		<div class="footer">
			...
		</div>
	</div>
</div>
</body>
</html>

[Tamus]

Je vais essayer

merci beaucoup !

Edit : Ca marche parfaitement !! Merci