[Resolu] Probleme tailles relatives

bonjour!

Je construis un site avec Joomla, et je rencontre un gros problème au niveau de la structure du site. Je vais essayer d'expliquer clairement le problème.

En fait, j'ai dû travailler avec un template déjà acheté, avec un header, une colonne à gauche, un espace central, mais pas de colonne à droite. J'ai donc essayé de rajouter cette colonne en créant un div "column right", en position "right". Je précise que tous mes largeur sont en taille relative.
Si avec firefox et IE 7, la page d'accueil s'affiche correctement, le problème se pose avec IE 6 (et versions antérieures), mais seulement pour les écrans de largeur 800 et 640, pour lesquels, la colonne de droite file en dessous de l'espace central

Je me suis rendu compte que ce problème venait en fait des modules en position user 1, dans l'espace central, qui, eux n'étaient pas en taille relative, et dont la taille était trop grande quand l'écran était de taille 800, ce qui faisait passer la colonne de droite en dessous.
MAIS:un des module est un lecteur de flux rss inséré dans un module par un iframe, et dont la taille peut être ajustée mais pas mise en taille relative. En revanche, le deuxième module placé à sa droite peut s'ajuster automatiquement. J'ai donc mis le lecteur rss en taille minimale et le 2eme module en taille relative.

Probleme:
1èrement, le résultat n'est pas très joli, car lorsque l'écran se réduit, le module devient vraiment trop petit par rapport à l'autre.
2èmement, les modules placés en dessous (user 2 ou user3), et situés également dans l'espace central, sont maintenant séparés de user 1 par un grand espace, ce qui n'était pas le cas quand les largeurs étaient fixes, car l'espace est prévu pour que le module dans user 1 qui se rétrécit puisse s'étaler en hauteur.
Bref, le résultat n'est pas très joli à voir.

Que faire?
- est-ce un problème de hauteur variable?
- comme la proportion d'utilisateurs ayant des écrans de 800 ET utilisant IE 6 ne doit pas être très importante, j'avais pensé laisser les 2 modules dans user1 en taille fixe, et faire en sorte que l'un des 2 passe en dessous de l'autre en cas de réduction de la taille de l'écran. Mais comment faire? avec .spacer {
clear: both;
} Mais j'ai peur de m'embrouiller,comment faire? Ne faut-il pas que la colonne de droite soit de largeur fixe?

-j'ai essayé de mettre les colonnes de droite et de gauche en position absolute et taille fixe, et l'espace central en taille variable mais ma colonne de droite disparait aussi en dessous. Ai-je fait une erreur dans le script php?
-est-il possible de faire un script spécial pour les écrans de taille 800 et moins?

JE vous remercie beaucoup, car voilà plus d'un mois que je planche sur ce problème!!

Les deux modules en position "user 1" sont:

 }
.moduletable-rss {  
text-align: left;
padding: 0px;
float: left; 
       
	 	 
}

.moduletable-actualite {  
background-image: url(../images/orange.gif);  
background-position: top left;
background-repeat: no-repeat;
text-align: right;
width: auto;
padding: 0px;
border :1px double #fc9404;
float: left; 
     

}

Les div:

}

#body {
width: 100%;

}

#footer {	
float: none;
width: 750px;
text-align: left;
height: 50px;
padding-top: 25px;
font-size: 10px;
color: #666;
padding-left: 150px;
}

#footerwrap {
width: 100%;
height: 100px;
float: left;
background-color: #F4F8FB;
border-top: 1px solid #ededed;
1background-image: url(../images/foot.gif);
background-position: top;
background-repeat: repeat-x;	

}

#leftcolumn {
float: left;	
width: 18%; 

}

#leftspacer {
float: left;	
width: 5%; 
height: 450px;
background-image: url(../images/leftspace.gif);
background-position: top left;
background-repeat: no-repeat;


}

#rightcolumn {
float: right;	
width: 20%; 
height: 147px;
margin-left:2%;


}

#mainbody {		
	float: left;	
        background-color : #fafafa;
	text-align: left;
	width: 50%;
        margin-left: 0px; 
}

#mainbody li {
	list-style: square;	
}

#bodywrap {
width: 100%;
z-index: 0;
background-color: #ffffff;
overflow: auto;
margin-top: 0px;
background-image: url(../images/fresh.gif);
background-position: top left;
background-repeat: no-repeat;	
padding-bottom: 30px;
}



#headerwrap {
background-color: #D1E3EF;
height: 116px;
width: 100%;
background-image: url(../images/headerbg.gif);
background-position: bottom;
background-repeat: repeat-x;	
}


#header {	
height: 116px;
width: 900px;
background-image: url(../images/header.jpg);
background-position: bottom left;
background-repeat: no-repeat;	
}


#menuwrap {
height: 35px;
width: 100%;
text-align: left;
background-image: url(../images/headerbg.gif);
background-position: top;
background-repeat: repeat-x;	
}

#menu {
width: 900px;
text-align: left;
height: 35px;
background-image: url(../images/header.jpg);
background-position: top;
background-repeat: no-repeat;


}

img{ 
border: 0px;
}

Le script php:

<?php defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' ); ?>
<?php $iso = split( '=', _ISO );
echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';
?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<?php mosShowHead(); ?>
<?php 
if ( $my->id ) {
	initEditor();
}
?>
<meta http-equiv="Content-Type" content="text/html; charset=" />
<link rel="stylesheet" type="text/css" href="<?php echo $mosConfig_live_site; ?>/templates/joomlajet14/css/template_css.css" />
<script type="text/javascript" src="modules/kwick_menu/js/mootools.js"></script>
<script type="text/javascript" src="modules/kwick_menu/js/imageMenu.js"></script>
</head>
<body>
<div class="menuwrap" id="menuwrap"><div class="menu" id="menu"><?php mosLoadModules ( 'top', -2 ); ?></div></div>
<div class="headerwrap" id="headerwrap"><div class="header" id="header"></div><div class="icone" id="icone"></div></div>
  <div class="bodywrap" id="bodywrap"><div class="body" id="body"><div class="leftspacer" id="leftspacer"></div><div class="leftcolumn" id="leftcolumn"><?php mosLoadModules ( 'left', -2 ); ?></div>
      <div class="mainbody" id="mainbody">: <?php mosPathWay(); ?><?php mosLoadModules ( 'user5', 1 ); ?>
<?php mosMainBody(); ?><?php mosLoadModules ( 'user1', 1 ); ?><?php mosLoadModules ( 'user2', 1 ); ?><?php mosLoadModules ( 'user3', 1 ); ?></div><div class="rightcolumn" id="rightcolumn"><?php mosLoadModules ( 'right', -2 ); ?></div></div></div>
<div class="footerwrap" id="footerwrap">
   <div class="footer" id="footer"><?php mosLoadModules ( 'footer', -2 ); ?><br />
    <?php mosLoadModules ( 'bottom', -2 ); ?> </div></div>  
</body>
</html>

Modifié par mim20 (29 Feb 2008 - 09:51)

Salut,

Je dis peut être une ânerie, pourquoi ne pas englober ta page dans un conteneur auquel tu aurais donné la propriété min-width: yyypx; Au pire les utilisateurs de 800x600 auraient une barre de scroll horizontale.

Ps: min-width ne passe pas sous ie6 mais on peut contourner ce problème

<edit> sous FF, j'ai une double barre de scroll verticale ? </edit>
Modifié par ghost (24 Feb 2008 - 15:59)

Oui, pourquoi pas. Je vais mettre un peu de temps à l'appliquer car je suis vraiment débutante et j'apprends pasà pas. J'ai vu quelque chose comme ça dans la FAQ:
<!--[if lt IE 7]>
<style type="text/css">
div {
width:770px;
width:expression(document.body.clientWidth <= 600? "600px": "auto" );
}
</style>
<![endif]-->

JE vais tester.

Mais je voudrais que la propriété min-width soit valable SEULEMENT pour les utilisateurs de IE6 (car si j'inclus aussi les utilisateurs de Firefox, etc..., ca va commencer à faire pas mal de monde: en effet, ce site va surtout être consulté dans des cybers, parfois dans des pays où les ordis ne sont pas forcément tous neufs, donc peut etre pas mal de gens en 800!!)
J'ai peur de m'embrouiller un peu dans les formules.??


Pour la barre de scroll verticale, je ne sais pas encore d'où ça vient, j'essaye de prendre les choses les unes après les autres, mais sans doute un problème parce que je n'ai pas encore réglé les hauteurs (j'attends que la hauteur définitive, avec tous les modules soit déterminée)
Modifié par mim20 (24 Feb 2008 - 16:11)

Autant pour moi,je viens de comprendre, le script

<!--[if lt IE 7]>
<style type="text/css">
div {
width:770px;
width:expression(document.body.clientWidth <= 600? "600px": "auto" );
}
</style>
<![endif]-->

n'est valable QUE pour les versions antérieures à IE 7, donc, normalement, si je rajoute uniquement ça, ca devrait marcher.
je vais essayer

Ma page est enveloppée dans bodywrap, qui elle même est enveloppée dans "Body"
Est-il correct d'écrire ça?

#body {
<!--[if lt IE 7]>
<style type="text/css">
div {
width:100%;
width:expression(document.body.clientWidth <= 960? "960px": "auto" );
}
</style>
<![endif]-->
}

En tous cas, merci beaucoup pour cette idée tout simple

Pour l'instant ca ne semble pas marcher, mais peut etre ai-je mis des valeurs fixes trop grandes pour les 2 modules en user 1.(ou peut etre le script n'est-il pas correct?). Je fais les tests avec browsershot (captures d'écrans), car je ne peux pas installer IE6. Je ferai les réglages demain sur un autre ordi.

Merci!!

Ca marche, problème réglé.
Merci