18041 sujets

Questions générales et questions de débutants

[Résolu] Probèmes d'affichage sous IE (original hein?)

Bonjour à tous,

Je viens de passer l'après midi à mettre ce site en page : Futur webavocat

Ci dessous le code HTML : 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Webavocat.fr</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<link href="style2.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('ssmenu'+i)) {document.getElementById('ssmenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>

</head>

<body>
<div id="conteneur">
<div id="header">
	<h1>Webavocat.fr</h1>
	<dl>
		<dt onmouseover="javascript:montre();"><a href="#" ><img src="images/tuile1.jpg" alt="accueil" /></a></dt>
	</dl>
	<dl>
		<dt onmouseover="javascript:montre('ssmenu1');"><img src="images/tuile2.jpg" alt="Vos interlocuteurs" /></dt>
		<dd id="ssmenu1">
			<ul>
				<li><a href="#">Notre métier</a></li>
				<li><a href="#">Nos compétences</a></li>
				<li><a href="#">Notre philosophie</a></li>
			</ul>
		</dd>
	</dl>
	<dl>
		<dt onmouseover="javascript:montre('ssmenu2');"><img src="images/tuile3.jpg" alt="Nos services" /></dt>
		<dd id="ssmenu2">
			<ul>
				<li><a href="#">Droit du travail</a></li>
				<li><a href="#">Droit de la famille</a></li>
				<li><a href="#">Droit pénal</a></li>
			</ul>
		</dd>
	</dl>
	<dl>
		<dt onmouseover="javascript:montre('ssmenu3');"><img src="images/tuile4.jpg" alt="Nos honoraires" /></dt>
		<dd id="ssmenu3">
			<ul>
				<li><a href="#">?</a></li>
				<li><a href="#">?</a></li>
				<li><a href="#">?</a></li>
			</ul>
		</dd>
	</dl>
	<dl>
		<dt onmouseover="javascript:montre();"><a href="#" ><img src="images/tuile5.jpg" alt="Contact" /></a></dt>
	</dl>
</div><!-- fin du header -->

<div id="contenu">
	<div id="gauche">
		<img src="images/gauche.jpg" alt="Cabinet" />
		<img src="images/adresse.jpg" alt="Adresse" />
	</div>
	<div id="centre">
		<h2>Lorem ipsum</h2>
		<h3>dolor sit amet, consectetuer adipiscing</h3>
		<p>elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore (...) aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat </p>
	</div>
</div><!-- fin du contenu -->
<p id="footer">Informations légales - Crédits</p>
</div>
</body>
</html>


Et le CCS : 


body {
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #75737A;
}
h2{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #F3B06C;
	font-weight: bold;
}
h3{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #CB8164;
}
img{
	border: 0;
}
#header {
	height: 78px;
	position:absolute;
	top:0;
}
#header h1, dl, dt, dd, ul, li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#header h1{
	float:left;
	width: 300px;
	height:100%;
	background: url(images/logo.png) no-repeat left top;
	text-indent: -5000px ;
}
#header dl{
	float :left;
	width: 120px;
	height:100%;
}
#header dt {
	text-align:center;
	width: 120px;
}
#header dd {
	text-align:center;
}

#header dd li a, #header dt a{
	color: #FFF;
	text-decoration: none;
	font-weight: bold;
	font-family:"Times New Roman", Times, serif;
	font-size: 14px;
	display: block;
	border-style: solid;
	border-color:  #F3B06C;
	border-width: 1px 0px 0px 0px;
}
#ssmenu1 {
	border: 1px solid #F3B06C;
	background-color:#F9D7B4;
}
#ssmenu2 {
	border: 1px solid #e5a069;
	background-color:#F2CEB4;
}#ssmenu3 {
	border: 1px solid #D68E66;
	background-color:#EBC6B3;
}
#conteneur {
	width: 900px;
	padding-top:78px; /* laisser de la place au menu horizontal*/
	margin: 0 auto; /* permet de centrer sur la page*/
	background-color:#99FF00;
}
#contenu div{
	float:left; /* divs gauche et droite placés l'un à coté de l'autre.*/
}

#gauche {
	width: 242px;
	height:366px;
	background-color:#00CC99;
	background: url(images/vertexte1.png) no-repeat right top;
	padding :0 80px 0 0;
}
#centre{
	width:578px;
	height:320px;
	text-align:justify;
	background: url(images/horiligne.jpg) no-repeat top;
	background-color:#FFFFFF;
	padding-top : 46px;
	overflow:auto;
}
#footer {
	text-align:center;
	background-color: #E1D7D5;
}


Seulement j'ai de gros soucis d'affichage sous IE : la div conteneur semble prendre une height que je ne lui ai absolment pas spécifié... Du moins je pense pas.

Un autre soucis est la hauteur des sous menu : chaque lien a une hauteur deux fois trop importante... Est-ce que je dosi obligatoirement préciser une valeur height pour IE?

J'ai également l'image en background du dive "centre" qui... se carapate avec le texte lorsqu'on scroll...

A la base je voulais que ça passe sous la barre horizontale, mais comme ça semblait faire trop de divs dans tous les sens, j'avais voulu simplifier...

Quelqu'un arrive à voir les erreurs que j'ai commis?
Modifié par Fenris (14 Oct 2006 - 23:07)
Heum navré de vous re-embeter avec mon site, mais personne n'a d'idée sur la question?

J'aimerais vraiment faire un truc propre et net, et pas un amas de tableaux...
Bonjour fenris,
Fenris a écrit :
Heum navré de vous re-embeter avec mon site, mais personne n'a d'idée sur la question?

Ben si Smiley confus , tu es victime de syndrome du "haslayout" .
ajoute
#header li {display:inline}
et tout rentrera dans l'ordre
Modifié par chmel (06 Oct 2006 - 23:14)
Merci beaucoup pour ta réponse. Smiley smile

Même si ton lien ne fonctionne pas chez moi, la ligne ajoutée a bien corrigé les menus déroulants.

Par contre... J'ai toujours ce gros décalage entre le pied de page et le reste du site, sans compter l'espace entre les deux images de la div "gauche".

Edit : ha tiens si le lien fonctionne maintenant...
Modifié par Fenris (08 Oct 2006 - 21:26)
Bonjour/soir,

J'ai réussi à me dépatouiller seul. Voilà les changements apportés par rapport à au dessus :


Code HTML :
<p id="footer">Informations légales - Crédits</p>

remplacé par :
<div id="footer">Informations légales - Crédits</div>

Fichier CSS :
img{
	border: 0;
	display:block; /* Evite l'apparition de "marges" au bas des images du div gauche*/
}

(...)

#contenu {
	height: 1%; /* Holy hack : à mort le haslayout sous IE...*/
}

Merci beaucoup à toi chmel pour m'avoir mis sur la bonne voie. Smiley cligne Même si je n'ai pas forcément tout compris pour le footer, l'aspect est très bien sous IE comme sous Firefox.

Et heu... Désolé je crois bien que mon sujet a largement débordé le cadre du tuto original. Je posterais dans la bonne section la prochaine fois.
Sujet clos
Aller à