28173 sujets

CSS et mise en forme, CSS3

[Résolu] IE6 Décalage div

Yop Smiley lol

Alors pour commencer, le lien et les codes :

LE LIEN

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
background-image:url('imgs/global/header.png');
background-repeat:repeat-x;
}
#banniere {
height: 207px;
width:716px;
background-color: #000000;
background-image:url('imgs/global/header2.png');
}
#conteneur {
position: relative;
width: 716px;
margin: 0 auto; 
margin-top:21px;
margin-bottom:20px;
background-color:#ededed;
background-image:url('imgs/global/bg.png');
background-repeat:repeat-y;
padding:0;
}

#haut {
position:relative;
height: 49px;
margin:0;
padding:0;
background-color:#000000;
background-image:url('imgs/global/bg_menu.png');
background-repeat:no-repeat;
background-position:right;
}

#centre {
background-color:#ffffff;
margin-left:13px;
margin-right:243px;
}

#droite {
position:absolute;
right:8px;
width: 234px;
background:#ededed;
border-left:1px #a5a5a5;
}
#pied {
height: 33px;
background-image:url('imgs/global/footer.png');
background-repeat:no-repeat;
margin-bottom:20px;
}








<?php include('admin/config/connect.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" xml:lang="fr" lang="fr">
<head>
<title>Japan Ride : L'automobile japonaise | Drift, Super GT, voitures sportives</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta content="mshtml 6.00.2900.2912" name="generator"/>


<link rel="stylesheet" media="screen" type="text/css" title="Style" href="divs.css"/>
<link rel="stylesheet" media="screen" type="text/css" title="Style" href="css/style.css"/>

</head>

<body>

<div id="conteneur">

	  <div id="banniere"></div>

	   <div id="haut">
	   <img class="logo" src="imgs/global/logo.png" alt="Logo Japan Ride - Le sport automobile japonais" />
	  
	   </div>

<?php
		include ('includes/functions.php');
?>

		<div id="header">
				<div id="search">
				<form method="post" action="search.php">
					<input type="text" value="Rechercher une news" name="requete" onfocus="this.value=''" />
					<input type="submit" value="Ok" />
				</form>
			</div>
		</div>

		<div id="navigation">

			<ul id="localisation">
				<li>Vous êtes ici :</li>
				<li><a href="index.php">Accueil</a></li>
				<li><a href="#">|</a></li>
				<li><a href="archive.php">Voir les archives</a></li>
			    </ul>
		
			<div id="right">
			</div>


			<div id="left">
			
						
				<?php klonews('afficher_news'); ?>
			</div>


		</div>
<?php
	mysql_close();
?>

<div id="pied"></div>

</div>
	  

</body>
</html>







Voilà, sous FFX tout s'affiche bien, par contre sous IE, j'ai une sorte de décalage dans ma barre de menu, comme si les images étaient "mangées" dans les coin.

Autre problème sous IE (je suis toujours sous IE6), le footer : il a bien la marge que je lui demande, mais le #conteneur dépasse en dessous, et arrive tout en bas de page ...

Si vous pouviez m'aider .. Smiley biggrin


Merci d'avance, tchouss Smiley biggol
Modifié par antonin.design (09 Sep 2007 - 00:00)
C'est quoi que t'apelle une "barre de menu", je vois rien qui pourrait y correspondre, je ne comprend pas ce qui bug.

Par contre pour le bloc conteneur décalé, sache qu'IE 6 supporte très très mal les position:relative imbriqué, plutot que de bidouiller un coup relative un coup static, jte conseille de passer tes deux colones en float, c'est beaucoup plus simple et si ta colonne de droite est plus grande que ton contenu ca sera pas tout moche. Smiley cligne
Le div du menu c'est #haut

Les colonnes je les ai prises sur le modèle alsacréations, mais j'essairai, merci du conseil Smiley cligne

Au passage, j'adore ce que tu fais ! Smiley biggrin
Un petit up, j'ai réussi à régler le problème venant du footer, mais celui venant de la barre de menu n'est pas réglé :

Mon site

Le menu n'est pas encore créé mais on voit que c'est là où est le logo Smiley cligne

Donc le problème est une sorte de décalage du background sous IE, je comprends pas vraiment le problème en fait ..

Mes codes :






body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding-bottom:20px;
background-image:url('imgs/global/header.png');
background-repeat:repeat-x;
}
#banniere {
height: 207px;
width:716px;
background-color: #000000;
background-image:url('imgs/global/header2.png');
}
#conteneur {
position: relative;
width: 716px;
margin: 0 auto; 
margin-top:21px;
background-color:#ededed;
background-image:url('imgs/global/bg.png');
background-repeat:repeat-y;
padding:0;
}

#haut {
height: 49px;
background-color:#000000;
background-image:url('imgs/global/bg_menu.png');
background-repeat:no-repeat;
background-position:right;
}

#aleatoire {
position:relative;
height:304px;
width:224px;
margin-left:4px;
margin-top:0;
background-color:#e1e1e1;
border:1px solid #cccccc;
}

#centre {
float:left;
background-color:#ffffff;
margin-left:13px;
margin-right:243px;
margin-top:0;
}

#droite {
float:right;
right:8px;
width: 234px;
background:#ededed;
border-left:1px #a5a5a5;
margin-top:0;
}
#pied {
height: 33px;
background-image:url('imgs/global/footer.png');
background-repeat:no-repeat;
}






<div id="conteneur">

	  <div id="banniere"></div>

	   <div id="haut">
	   <img class="logo" src="imgs/global/logo.png" alt="Logo Japan Ride - Le sport automobile japonais" />
	  
	   </div>

<?php
	include ('includes/functions.php');
?>

		

		<div id="navigation">

			<ul id="localisation">
				<li>Vous êtes ici :</li>
				<li><a href="index.php">Accueil</a></li>
				<li><a href="#">|</a></li>
				<li><a href="archive.php">Voir les archives</a></li>
			    </ul>
		
			<div id="right">
			<div id="aleatoire"></div>
			</div>


			<div id="left">
			
						
				<?php klonews('afficher_news'); ?>
			</div>


		</div>
<?php
	mysql_close();
?>

<div id="pied"></div>

</div>




Donc l'id du div contenant le menu est #haut


Merci d'avance Smiley cligne
Modifié par antonin.design (09 Sep 2007 - 00:00)
Salut,

C'est un petit problème d'IE6 concernant les espaces indésirables sous les images ... (voir FAQ)

Essaye : 
#haut img {
display: block;
}


Bonne continuation
Sujet clos
Aller à