28172 sujets

CSS et mise en forme, CSS3

Probleme de surperposition sous Ie7

Bonjour,

J'ai un problème d'affichage sous IE7, je crée un site coportant un logo en superposition sur deux div. Sous Firefox cela s'affiche comme il faut.

http://pik_0fr.hebergement-pro.org/IMG/bug/mts_firefox.jpg

Voila le resultat sous Firefox et que je desire.

http://pik_0fr.hebergement-pro.org/IMG/bug/mts_ie7.jpg

Voila ce que j'ai sous IE7

Mon Css

body {
	width : 990px;
	padding:0px;
	margin: 0px auto;
	background-color:grey;
}

#menu {
	float:left;
	width:200px;
	height:760px;
	background: url(img_site/font_menu3.jpg) no-repeat black;
	color:white;
}

#logo {
	position: relative;
	z-index: 25;
	float:left;
	margin-left:-110px;
	margin-top: 25px;
}

dl.menu_lat {
	margin-top:300px;
}

#content {
	position: relative;
	height:760px;
	top: 0px;
	background-color:pink;
	margin-left:200px;
}

#pied_page {
	text-align:center;
}

h1 {
font-size: 18px;
}

span.copyright {
	font-size:8px;
	font-style:italic;
	color: white;
	
}


Mon index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>Miss.Tick.Shop - Miss.Tick Cr&eacute;ation</title>
	<link rel="stylesheet" type="text/css" href="style_mt.css" />
	<script language="Javascript" type="text/javascript">
       <!--
        monrollover= new Image( );
        monrollover.src="image-subsitution.gif";
       //-->
    </script>
</head>

<body>
<?php $page=$_GET[page]; ?>
	<div id="menu">
		<?php include ('menu_lat.php'); ?>
	</div>
	<div id="logo">
		<img src="img_site/logo_miss_tick_200.gif">
	</div>

	<div id="content">
		<?php
			include ('introduction.php');
		?>
	</div>
	
	<div id="pied_page">
		<?php include ('pied_page.php'); ?>
	</div>
	
</body>
</html>


Merci, pour l'aide que vous pourrez m'apporter.

Pik_0fr, skull squadron ace
salut,

bah mets ton body en relative et place ton div logo en absolute par rapport au top left de ce dernier . non?
perso, j'aurais plutot crée un container en relative ...
Merci en jouant avec les hacks CSS j'ai réussi a avoir le même résultat.

J'en suis qu'au début du site, il faut en faite que je fasse le reste mais comme ma webdesigner me demande la taille des zones, je fais déja un masque.

Merci encore de ta reponse.

PS : je garde encore ma lettre d'insulte pour microsoft de coté.

Pik_0fr, skull squadron ace
Bonjour,

Pour information, c'est un problème de HasLayout. Le bloc div#content qui a une hauteur fixe (height: 760px) a le layout dans Internet Explorer, et donc sera repoussé par div#logo qui est flottant.

Comme zincou, je te suggère d'utiliser le positionnement absolu pour ce logo. Et de ne pas utiliser le positionnement relatif inutilement, au passage.

En fait, je ne ferais pas reposer le dessin des colonnes noires et roses sur les éléments div#menu et div#content, mais plutôt sur une couleur de fond (rose) et une image de fond (noire et répétée en hauteur) directement sur le BODY. Il s'agit d'appliquer la technique dite des colonnes factices.

Pour référence:
- HasLayout: voir la FAQ du forum;
- Positionnement absolu: voir l'article correspondant sur Openweb;
- Positionnement relatif: voir l'article correspondant sur Openweb;
- Utilisation correcte de z-index: voir la FAQ du forum;
- Colonnes factices: voir l'article correspondant sur Pompage.net.
Sujet clos
Aller à