Bonjour à tous,
pour un site j'utilise une lightbox pour afficher le détail d'une fiche. J'ai donc réglé la taille de celle-ci dans ma feuille css lightbox et mis dans ma page php qui est chargée dans la lightbox une largeur de 100% pour que mon design s'adapte qu'il y ait ou non une scroll-bar selon la longueur effective de ma page d'infos.
Sous FF pas de prob, mais sous IE 6, il prend 100% de la largeur sans scroll bar mais 100% ++ avec scroll bar, j'ai donc une scrollbar horizontale et une petite partie de ma fenêtre rognée.
Que puis-je faire pour y remédier ???
Merci de votre aide,
Aurélia.
Lightbox.css
et ma page formation.php
et enfin ma page css de mise en forme du contenu de formation.php
pour un site j'utilise une lightbox pour afficher le détail d'une fiche. J'ai donc réglé la taille de celle-ci dans ma feuille css lightbox et mis dans ma page php qui est chargée dans la lightbox une largeur de 100% pour que mon design s'adapte qu'il y ait ou non une scroll-bar selon la longueur effective de ma page d'infos.
Sous FF pas de prob, mais sous IE 6, il prend 100% de la largeur sans scroll bar mais 100% ++ avec scroll bar, j'ai donc une scrollbar horizontale et une petite partie de ma fenêtre rognée.
Que puis-je faire pour y remédier ???
Merci de votre aide,
Aurélia.
Lightbox.css
/* - - - - - - - - - - - - - - - - - - - - -
Title : Lightbox CSS
Author : Kevin Hale
URL : http://particletree.com/features/lightbox-gone-wild/
Created : January 13, 2006
Modified : February 1, 2006
- - - - - - - - - - - - - - - - - - - - - */
#lightbox{
display:none;
position: absolute;
top:30%;
left:50%;
z-index:9999;
width:555px !important;
width:565px;
height:400px;
margin:-100px 0 0 -320px;
border:3px solid #999;
background:#FFFFFF;
text-align:left;
}
#lightbox[id]{
position:fixed;
}
#overlay{
display:none;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:5000;
background-color:#000;
-moz-opacity: 0.5;
opacity:.50;
filter: alpha(opacity=50);
}
#overlay[id]{
position:fixed;
}
#lightbox.done #lbLoadMessage{
display:none;
}
#lightbox.done #lbContent{
display:block;
}
#lightbox.loading #lbContent{
display:none;
}
#lightbox.loading #lbLoadMessage{
display:block;
}
/*
#lightbox.done img{
width:100%;
height:100%;
}
*/
et ma page formation.php
<div style="width:100%; background-color:#FFF; min-height:365px;">
<div class="forma_close" style="width:70px;"><span class="close_txt"><a href="#" class="lbAction" rel="deactivate">Fermer</a></span></div><div class="forma_close" style="width:70px;"><a href="#" onclick="window.print();" /><img src="layout/img/picto_divers/picto_imprimer.gif" style="margin-top:3px;" /></a></div>
<div class="forma_sep" style="width:100%;"></div>
<div id="forma_titre">
<h1><?php echo $recup -> getNom(); ?></h1>
</div>
<div id="forma_spec"><span class="adresse"><?php echo $recup -> getLibelleChamp(); ?> / <?php echo $recup -> getLibelleSecteur(); ?> / <?php echo $recup -> getLibelleThematique(); ?></span></div>
<div id="forma_public"><h4><span>Public</span> <?php echo $recup -> getPublic(); ?>r</h4>
<h4><span>Intervenant</span> <?php echo $recup -> getIntervenant(); ?></h4></div>
<div id="forma_obj">
<div style="margin:0 10px 0 0; padding:0;float:left;display:inline;"><img src="layout/img/fleche/forma_fleche.gif" /></div><h2 style="margin-top:7px !important; margin-top:6px;">OBJECTIFS</h2>
<div class="forma_para"><?php echo $recup -> getObjectif(); ?></div>
</div>
<div id="forma_dispo" style="margin-bottom:10px;">
<div style="margin:0 10px 0 0; padding:0;float:left; display:inline;"><img src="layout/img/fleche/forma_fleche.gif" /></div><h2 style="margin-top:7px !important; margin-top:5px;">DISPOSITIF</h2>
<div class="forma_para">
<h4>Nombre de jours</h4><?php echo $recup -> getNbrJour(); ?>
<?php if($recup -> getInter() <> "")
echo'<h4 style="margin-top:10px;">INTER</h4>';
?>
<?php echo $recup -> getInter(); ?>
<h4 style="margin-top:10px;">INTRA</h4> <?php echo $recup -> getIntra(); ?>
</div>
</div>
<div class="clear"></div>
</div>
et enfin ma page css de mise en forme du contenu de formation.php
/*----------- FORMATION FICHE -----------*/
.forma_close{
border-left:1px solid #999;
height:20px;
float:right;
margin:0;
display:inline;
text-align:center;
}
.forma_sep{
border-bottom:1px solid #999;
float:left;
margin-bottom:10px;
line-height:0;
}
#forma_titre{
float:left;
width:500px;
margin:0 20px;
text-align:center;
}
#forma_spec{
float:left;
width:500px;
margin:5px 20px;
text-align:right;
}
#forma_public{
width:510px;
margin:0 0 0 10px;
float:left;
border:1px dotted #999;
padding:5px;
}
#forma_dispo{
width:520px;
margin:10px 0 10px 10px;
float:left;
}
#forma_obj{
width:480px;
margin:10px 0 10px 10px;
float:left;
}