28173 sujets

CSS et mise en forme, CSS3

Overflow non fonctionnel avec Opera [Résolu]

Bonjour

Le problème est le suivant :

Sous IE6, IE5, Firefox, l'utilisation de la propriété overflow:scroll; fonctionnne bien (!!). Mais sous Opera elle semble totalement ignorée !!!

Voici la structure HTML :

<body>
<div id="conteneur">

	<div id="entete">

	</div><!--Fin div entete -->
	
	<div id="gauche">

	</div><!--Fin div gauche -->
	
	<div id="droite">
		
		<div id="offre">
		</div>	<!--Fin div offre -->


	</div><!--Fin div droite -->

	<div id="centre">
 		<a name="top" id="top"></a>

		<!--contenu--!

		
	</div><!--Fin div centre -->
	
	<div id="pied">

	</div><!--Fin div pied -->

</div><!--Fin div conteneur -->
</body>


Voici le CSS :

/* Balises générales */

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	margin: 0;
	padding: 0;
	background-image:url(../z_img/fond_body2.jpg);
	background-repeat:repeat-x;
}



/* Div Conteneur*/

#conteneur {
	position: absolute;
	left: 50%;
	/*top: 50%;*/
	width: 970px;
	height: 680px;
	/*margin-top: -305px; /* moitié de la hauteur */
	margin-top: 10px;
	margin-left: -485px; /* moitié de la largeur */
	border: 1px solid #D50020; /*background-color:#84666F;*/
	border-bottom: solid;
	border-bottom-color: #D50020;
	border-bottom-width: 1px;
}


/*Div entete */

#entete {
	height: 73px;
/*background-color: #84666F;
margin-top:10px;*/
}

/* Div Centre*/

#centre {
/*background-color:#84666F;*/
	margin-left: 160px;
	margin-right: 160px;
	height:550px;
	overflow-y:scroll;
}



/* Div gauche*/

#gauche {
	position: absolute;
	left: 0;
	width: 160px;
	height: 550px;
}

/* Div Droite*/

#droite {
	position: absolute;
	right:0;
	width: 160px;
	height:550px;
}


#offre {
	margin-top: 15px;
	margin-bottom: 10px;
	margin-left: 8px;
	text-align: center;
	height: 147px;
	width: 147px;
	background-image: url(../z_img/fond_offre.gif);
	background-position: top left;
	background-repeat: no-repeat;
	color: #ACACAF;
	font-weight: bold;
}


/* Div Pied*/

#pied {
	height: 30px;
/*background-color: #84666F;*/
}


Si quelqu'un a une idée je suis preneur... J'aimerais bien optimiser au maximum la page pour qu'elle soit visible par le plus de navigateur possible.

Merci de toute aide !
Modifié par Blue James (22 May 2007 - 17:06)
à mince...

en fait overflow-y n'est compris que par IE6, 7 et Firefox mais pas Opéra...

en mettant overflow:auto; ça marche partout..

le défaut : cela me rajoute en grisé, la barre de défilement horizontale...

je dois faire un hack css pour mettre overflow-y dans IE6, 7 et Firefox et overflow:auto; dans tous les autres ??

Mais je ne suis pas sur de connaitre la syntaxe pour le faire....

Merci du coup de main !!
Blue James a écrit :
le défaut : cela me rajoute en grisé, la barre de défilement horizontale...

Bizarre. Normalement, c'est overflow: scroll qui fait ça...

Quoi qu'il en soit, à tester :
overflow: auto;
overflow-y: auto;
overflow-x: hidden;

Tester aussi avec un overflow-x: visible.

Attention, c'est de l'expérimental, jamais testé moi-même...
Oups !
Au temps pour moi...
j'avais une version bis de mon css relié à la page avec un overflow: scroll; et non pas un overflow: auto; !!
D'où le bug !!!
Merci beaucoup, ça marche à présent !
Smiley biggrin
Sujet clos
Aller à