28173 sujets

CSS et mise en forme, CSS3

Overflow:hidden à gauche pour un objet sous IE6 et 7

Bonjour à tous,


J'essaie de mettre en page un site selon les standards , ou ce que j'en ai compris.

Comme il y a encore 6 mois je n'avais aucune connaissance en html, css et php , ce n'est pas simple.

Le site liquide a un "header" qui comprend le module "mainlevel", menu principal, à gauche et une image à droite.
cette image doit changer en fonction du contenu. Comme c'est un site joomla, j'ai utilisé un module joomla "imageheader", dont le style est géré par .moduletable-imageheader, pour gérer ce changement.

css layout:
#header {
clear: both;
}

#mainlevel {
  float: left;
  width: 25%;
} 

#imageheader {
float: right;
width: 74%;
overflow: hidden;
}


css custom:
#header {
height: 196px;
margin: 0 0px 0 0;
/*background: url(../images/header.jpg) right bottom no-repeat;  */
background-color:#c2c1bc;
}

#imageheader {
  height: 196px;
}
.moduletable-imageheader {
 float: right;
margin-right: 0 ;
padding: 0 ;
border: 0;

}


page:
<div id="header">
 <div id="mainlevel">
<?php mosLoadModules ( 'left',-2 ); ?>
</div>
<div id="imageheader">
  <?php mosLoadModules ( 'header',-2 ); ?>
</div>
</div>


Si l'image du header avait été constante, pas de problème, je la place en background du div header et c'est réglé.

mais comme il s'agit d'un module joomla, j'ai eu recours à overflow:hidden pour obtenir le même effet : que la surface visible de l'image se réduise lors du redimensionnement de la fenetre du navigateur.

Or je veux que ce soit la droite de l'image qui reste visible.

j'ai donc cherché sur le web des solutions et ai trouvé celle ci dessus .

Elle ne fonctionne que sous firefox.

Mais ni ie6 ni ie7 ne l'interprètent correctement: l'overflow continue à se faire à droite.

j'ai cherché sur ce forum et chez mon ami google, mais je dois utiliser les mauvais termes pour ma recherche.

Quelqu'un peut il m'éclairer à ce sujet?

Merci

Yann

Ps: bien que mon problème particulier porte sur un site joomla, j'ai posté ici parce que je suppose que cette question d'un overflow hidden à gauche peut se poser pour tout type d'objet quelque soit le type de site.
Modifié par ymalin (06 Jul 2007 - 12:59)
vraiment pas moyen de trouver quelque chose.

j'ai cherché en anglais également mais je ne dois décidément pas utiliser les bons mots clés. (overflow hidden image left ie etc.)

Puisque ça marche avec firefox, ce n'est pas un problème d'interaction avec le module joomla de gestion de l'image, mais bien une question d'interprétation du css par ie, non?

Yann
Modérateur
bonjour,

un probleme similaire avait deja etait en partie resolue sur le forum (pas retrouve le lien du topic).

j'avais a l'époque proposé ceci : http://gcyrillus.free.fr/essai/thieu-no-dtd.html (octobre 2006 je crois).

en reprenant un peu le code , voici un essai a tester si tu peut l'adapter a ta page.




	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html lang="fr">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	
<style type="text/css">
* {
	margin:0;
	padding:0;
}
html {
	width:100%;
	overflow-x:hidden;

}
body {

	direction:rtl;
	unicode-bidi:bidi-override;

	width:100%;
	overflow:hidden;;
}
div {
	margin:0 20% 0 0;/* pour mieux visualiser l'extremité droite de l'image */
}
p
 {
	direction:ltr;/* on reaffiche les textes et ponctuations dans le bon sens */
	
}
p.flowagauche {
	text-align:right; /* !!!  alignement a droite */
	position:relative;
	background:#eee;
	float:right;
}
</style>
</head>
<body dir="rtl">
<div>
<p>test sur le decallage vers la gauche au lieu de la droite;</p>
<p class="flowagauche" >
<img src="http://forum.alsacreations.com/skins/alsacreations/menu.jpg" alt="test overflow disparaissant 

a gauche." />
</p>
</div>
</body>
</html>


l'attribut dans body :dir="rtl" est necessaire pour IE en mode quirk , inutile avec un doctype valide ou le css sera pris en compte.

Mon pc vient (finalement) de rendre l'ame , tout mes outils informatiques me sont pour le moment inaccessible , je n'ai donc pas pu tester ce code ailleurs que dans IE6 .

gcyrilus


<edit> a l'attention des moderateurs , .. je m'aperçois que je prends l'habitude d'incorporer des images du forum dans les bouts de code a copier/coller que je laisse sur le forum , si cela n'est pas une bonne idée je peut en prendre d'autre </>
Modifié par gcyrillus (06 Jul 2007 - 23:08)
Sujet clos
Aller à