28173 sujets

CSS et mise en forme, CSS3

Problème d'ascenseurs sous IE

Bonjour,

[EDIT]
¤ problème de positionnement réglé grâce à position:absolute;
¤ reste le NON affichage des ascenseurs sous IE !!! Smiley fache
[/EDIT]

cela fait quelques temps que je cherche désespérément une solution pour positionner 2 div.
Donc voici un résumé de ma structure html :
<html>
<head>
<title>Document sans nom</title>
<style type="text/css">
<!--
* {
	margin: 0px;
	padding: 0px;
}
html {
	height:100%;
}
body {
	height:100%;
}
#menu {
	position: fixed;
	float: left;
	width: 15em;
	font-family:Arial, Helvetica, sans-serif;
	border: 2px outset #017671;
	/* pour IE7 */
	left: 0px;
}
#contenu {
	height:100%;
	margin-left: 16em;
	border: 2px outset #017671;
	overflow: auto;
}
-->
</style>


</head>
<body>

<div id="menu">
	<ul>
	<li>menu 1</li>
	<li>menu 2</li>
	<li>menu 3</li>
	<li>menu 4</li>
	</ul>
</div>

<div id="contenu">
	<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>

</body>
</html>


Contexte :
C'est donc un menu fixé en haut à gauche avec un contenu à droite qui peut prendre n'importe quelle taille.... donc il faut un scroll horizontal (non pas juste en dessous du contenu mais tout en bas de page...)

Problème :
Mon problème est le positionnement et le scroll de #contenu. En effet, alors que Firefox m'affiche correctement #contenu avec son propre scroll et le top bien en haut, IE propose un scroll horizontal pour toute la fenêtre et aaaaaaaaa....aaaaaaaa se retrouve en dessous (mais bien à droite) de #menu.

J'ai remarqué que si le contenu de #contenu est court, #contenu est bien en haut de la fenêtre... (mauvaise gestion des grandes lignes d' IE ???)

En tout cas, je n'ai pas trouvé de solution....
Comment faire pour régler ce problème ?
Merci d'avance. Smiley cligne
Modifié par Tchupacabra (19 Jan 2007 - 07:46)
Bonjour à toi ...

Je ne sais pas si ton problème provient de là, mais il me semble que ça pourrait être une bonne explication : Smiley langue
IE ne supporte pas la valeur fixed de la propriété position Smiley cligne
ah bah d'accord... Smiley fache

ok alors la seule méthode valable serait l'utilisation de position:absolute > donc problème de positionnement fixe réglé.

Sauf que le résultat souhaité n'est toujours pas au rendez-vous...
J'ai bien regardé / comparé par rapport au modèle 14.

IE ne m'affiche pas les ascenseurs lorsque mon contenu est grand et large.
<html>
<head>
<title>test</title>
<style type="text/css">
* {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}
html {
	height: 100%;
	overflow: hidden;
}
body {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	height: 100%;
	overflow: hidden;
}
#menu {
	position: absolute;
	left: 0px;
	/*height: 100%;*/
	width: 200px;
	background-color: #99CCCC;	
}
#contenu {
	margin-left: 200px;
	background-color: #9999CC;
	height: 100%;
	overflow: auto;
}
</style>
</head>

<body>

<div id="menu">
	<ul>
	<li>menu 1</li>
	<li>menu 2</li>
	<li>menu 3</li>
	<li>menu 4</li>
	</ul>
</div>

<div id="contenu">
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	a<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	b<br />
	contenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenu---fin---<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	c<br />
	----fin----<br />
</div>

</body>
</html>


Une idée ? Smiley ohwell

HELP... Smiley bawling
Bonjour.

En fait tu as découvert une faiblesse de ce modèle css qui quand on lui applique un texte trop long non découpable allonge la page sous IE 6 et crée une barre de défilement horizontale.

Je te conseille d'enlever le overflow: hidden; de html et body pour que le contenu soit tout de même affiché si il y a un mot insécable.

Ensuite il faudrait éventuellement voir pour une solution côté serveur pour empêcher les mots trop longs ou alors faire un design fluide en pourcentage pour IE 6 via commentaires conditionnels.
Sujet clos
Aller à