28173 sujets

CSS et mise en forme, CSS3

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
/* - - - - - - - - - - - - - - - - - - - - -

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>&nbsp;&nbsp;<?php echo $recup -> getPublic(); ?>r</h4>
<h4><span>Intervenant</span>&nbsp;&nbsp;<?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;
}