[résolu] <div> au dessus de <ul> sous IE7

Question

michtouariv

5 Apr 2007 à 12:00

Bonjour à tous,

Voilà je suis en train de programmer un site web...
Malheuresement, sous IE7, ca passe pas terrible Smiley biggol

(la css marche parfaitement comme je veux sous firefox, ... ).

J'ai fait une feuille de style spécifique à IE7.

J'ai un menu en <ul> du genre


<ul id="menu">
<li>...</li>
<li>...</li>
</ul>

Ensuite, j'ai une <div> du genre


<div id="contenu>
...
<div id="cadre">
...
</div>
...
</div>

Cette <div> contenu passe au dessus de mon menu <ul> sous IE7 (le background aussi)

Ma css dit en gros :


ul#menu {
	list-style-type: none;
	height: 20px;
	/* decale le menu */
	margin-left: 50px;
}

div#contenu {
	/* marge en haut pour laisser la place au cadre_haut.png */
	padding-top: 40px;
	/* partie haut du cadre en haut du contenu */
	background: url(./images/cadre_haut.png) left top no-repeat;
}

J'ai essayé quelque trucs avec ls z-index mais rien n'y fait Smiley decu

Si quelqu'un sait comment je pourrais regler ce probleme (à part faire une révolution contre MS pour interdire ses logiciels à la vente Smiley lol

)

Merci à ceux qui m'aideront Smiley cligne

Modifié par michtouariv (04 Jun 2007 - 17:52)

Mikachu

5 Apr 2007 à 12:18

Salut,

Le z-index ne marche que sur des éléments positionnés en absolu, mais il ne faut pas abuser de ce positionnement malgré tout.

Pour constater un peu plus précisément ton problème et être en mesure de t'aider, il serait bien que tu nous fournisse dans l'idéal une page en ligne, ou au moins l'intégralité de ton code, et/ou des images explicatives si nécessaire, comme le recommande la règle 13 du forum. Smiley cligne

michtouariv

5 Apr 2007 à 14:09

merci pour ta reponse et dsl pour la regle 13 omis Smiley smile

voici mon code simplifié html :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1"/>
<title></title>
<!--[if !IE]><-->
	<style type="text/css">
	@import url(./style.css);
	</style>
<!--><![endif]-->
<!--[if gt IE 6]>
	<style type="text/css">
	@import url (./styleIE7.css);
	</style>
<![endif]-->
<!--[if lte IE 6]>
	<style type="text/css">
	@import url (./styleIE6.css);
	</style>
<![endif]-->
</head>
<body>

<div id="conteneur">
	
	<h1 id="header">
		<a href="index.php" title=""><img src="./images/logo.gif" alt="logo" title="Accueil"/></a>
	</h1>
	<hr/>
	
	<ul id="menu">
		<li><a href="./index.php" id="ici">Accueil</a></li>
		<li><a href="#">lien</a></li>
		<li><a href="#">lien</a></li>
		<li><a href="#">lien</a></li>
		<li><a href="#">lien</a></li>
		<li><a href="#">lien</a></li>
		<li><a href="#">lien</a></li>
	</ul>
	
	<div id="contenu">
		<div id="cadre">
			<h2>titre deux</h2>
			<p>texte</p>			
		</div>
		<div id="cadre_bas">
		</div>
	</div>
	
	<p id="footer">contact</p>
	
</div>

</body>
</html>

et voici ma css :


/********** elements générals **********/
body {
	/* fond */
	background: url(./images/fond.png) repeat-x;
	background-color: #ffffff;
}

a img {
	/* enleve les bordures sur les images servant de liens */
	border: none;
}

h1#header {
	margin-left: 50px;
	padding-top: 30px;
}

/********** gestion du menu  **********/
ul#menu {
	list-style-type: none;
	height: 20px;
	/* decale le menu pour le centrer sur la page */
	margin-left: 50px;
}

ul#menu li {
	/* pour pouvoir afficher horizontalement */
	float: left;
	text-align: center;
}

ul#menu li a {
	width: 95px;
	/* permet de donner une taille */
	display: block;
	text-decoration: none;
	background: url(./images/onglet.png) no-repeat;
	color: #ffffff;
}

ul#menu li a:visited {
	color: #ffffff;
}

ul#menu li a:hover {
	background: url(./images/onglet_down_evolu.gif) no-repeat;
	color: #0054A4;
}

ul#menu li a#ici {
	background: url(./images/onglet_down.png) no-repeat;
	color: #0054A4;
}

/********** page principale **********/
div#conteneur {
	/* centrer la page */
	margin-left: auto;
	margin-right: auto;
	/* taille de l'image */
	width: 781px;
	/* pour retablir l'alignement normal du texte à cause de IE5- */
	/*text-align: left;*/
}

/********** cadre principal **********/
div#contenu {
	/* test pour remonter le contenu jusqu'au menu */
	margin-top: -25px;	
	/* marge en haut pour laisser la place au cadre_haut.png */
	padding-top: 40px;
	/* partie haut du cadre en haut du contenu */
	background: url(./images/cadre_haut.png) left top no-repeat;
}

div#cadre {
	/* partie centrale du cadre repetée */
	background: url(./images/cadre_repeat.png) left bottom repeat;
}

div#cadre h2,h3,h4,h5,p,img {
	margin: 0 50px 0 70px;
}

div#cadre_bas {
	/* marge en bas pour laisser la place au cadre_bas.png */
	padding-bottom: 40px;
	/* partie bas du cadre */
	background: url(./images/cadre_bas.png) left bottom no-repeat;
}

/********** pied de page **********/
p#footer {
	text-align: center;
	color: gray;
	font-family: monospace;
	font-size: 0.8em;
	margin-left: auto;
	margin-right: auto;
}

Voilà (au moins Smiley langue

) l'integralité de ce qui nous interresse...

BIEN >

PAS BIEN >

Merci si vous prenez le temps de lire
Smiley biggrin

edit : d'ailleurs comme on peut le voir, il y a aussi le bord du bas (cadre_bas.png) qui est zappé, ca doit être le même genre de faute (de mal compréhension plutôt)
Modifié par michtouariv (05 Apr 2007 - 14:30)

ghost

5 Apr 2007 à 14:37

Bonjour,

Pour régler ce probléme:

ul#menu {
	list-style-type: none;
	height: 20px;
	position: relative;
	margin-left: 50px;
}

Devrait faire l'affaire, mais le positionnement en marge négative n'est pas trop top !!, une solution avec ton menu en absolute sera peut être plus robuste.

michtouariv

5 Apr 2007 à 14:49

Merci beaucoup !
Ca fait l'affaire....c'était pas bien compliqué Smiley lol

Pour la marge négative c'était juste pour tester...je vais surement revenir à quelque chose du plus "correct".

Peut etre le temps que j'y suis (et toi aussi Smiley smile

)...t'as peut etre une solution pour mon cadre du bas (la fermeture du cadre) qui ne s'affiche pas ou qui est masqué par je ne sais quel bloc (en bougeant les marges j'ai chercher mais je n'ai pas trouver)

Remerci !

ghost

5 Apr 2007 à 14:57

Re,

Ben pour ton cadre bas, je ne vois pas trop ce que tu veux faire sans avoir une page en ligne ... A part que ce bloc ne contient rien et n'a pas de hauteur de définie donc risque d'avoir des problèmes à l'affichage !!

michtouariv

5 Apr 2007 à 15:04

merci pour ta rapidité...

pour repondre franchement,

deja je vais par la suite surement inserer du texte à l'interieur...
mais à la base je l'avais fais juste pour avoir mon image en bas (cadre_bas.png) parce que je peux pas mettre deux background-image dans un même bloc

mais sous firefox ca marche comme je l'esperais, alors que IE le cadre fermant disparait...
je sais pas si je suis totalement clair... Smiley confus

michtouariv

5 Apr 2007 à 15:17

ghost a écrit :
mais le positionnement en marge négative n'est pas trop top !!, une solution avec ton menu en absolute sera peut être plus robuste.

Je viens d'essayer en absolute mais quand, par exemple, le logo n'est as affiché (texte à la place), le menu se retrouve sur le logo (comme pour la marge négative remarque...)

merci pour le temps que vous prenez (enfin que tu prends pour l'instant)

ghost

5 Apr 2007 à 15:22

Re,

tente de lui mettre un height:1%; à l'aveuglette ce n'est pas évident


ul#menu {
	list-style-type: none;
	height: 20px;
	position: absolute;
	right: 0px;
	top: -10px;
	margin: 0;
	padding: 0;
}

div#contenu {
	position: relative;
	padding-top: 40px;
	background: red;

}

	<div id="contenu">
	<ul id="menu">
		<li><a href="./index.php" id="ici">Accueil</a></li>
		<li><a href="#">lien</a></li>
		<li><a href="#">lien</a></li>
		<li><a href="#">lien</a></li>
		<li><a href="#">lien</a></li>
		<li><a href="#">lien</a></li>
		<li><a href="#">lien</a></li>
	</ul>
		<div id="cadre">
			<h2>titre deux</h2>
			<p>texte</p>			
		</div>
		<div id="cadre_bas">
		</div>
	</div>

Modifié par ghost (05 Apr 2007 - 15:38)

michtouariv

5 Apr 2007 à 15:25

je suppose que tu parlais du cadre en bas...malheuresement ca ne marche pas Smiley decu

mais quand je t'ai lu, j'y ai cru, je me suis dis tiens c'est pas bete Smiley ravi

merci mais que pourrais je faire pour que tu ai plus de simplicité à m'aider ?

michtouariv

5 Apr 2007 à 15:31

STOP !

quel c.., j'avais mis 1% au lieu de 1px, je sais pas pourquoi.. Smiley lol

ca marche bien mais c'est considéré comme du bidouillage ou pas ça ?

sinon, je m'attaque à IE6 et moins..

MERCI BEAUCOUP pour ton coup de main Smiley cligne

edit : ha ba oui c'est toi qui avait mis 1%...mais 1px ca marche Smiley ravi

Modifié par michtouariv (05 Apr 2007 - 15:37)

michtouariv

5 Apr 2007 à 16:52

J'ai plus aucun problème...

Je voulais juste préciser que, pour ceux qui lirais ce sujet, en position absolute, comme me l'as conseillé ghost, il existe un petit problème...
En effet, certains hebergeur ajoute un code dans le source pour afficher de la pub (comme webzaninne) et là tout le graphisme se trouve décaler à cause des bloc en absolute...

Alors, je garde mes marges négative pour le moment, mais si quelqu'un connaît une solution alternative, je suis preneur Smiley cligne

merci (surtout à toi gosth pour ton coup de main)

Sujet clos

CSS et mise en forme, CSS3

[résolu] <div> au dessus de <ul> sous IE7