Bonjour!
Me voila de retour avec une super question de la mort qui tue, voir même deux!
Alors, aprés avoir un peu tester différentes solutions, je me retrouve devant deux nouveaux problèmes sur le site :
www.lesrobesdekaren.com
Le premier probléme est que, si la résolution de l'écran de l'internaute est assez grande, et qu'il clique sur le bouton "les creations", une barre de scroll a droite apparait, qui ne se trouve pas sur la page contact et acceuil qui entre en entier dans l'écran, et ce scroll donc fait bouger tout mon site vers la gauche car celui ci est centrer en auto, ce qui donne un effet pas terrible
Dondc question : comment éviter cela? est ce que je doit mettre des barres de scroll a lintérieur même de ma div "corps"? est ce quil est possible, dans ce cas de faire une barre scroll jolie et personnalisée?
Ensuite, la deuxiéme question de la mort
J'ai intégrer une lightbox et j'ai mis en fond de mon "corps", une couleur avec opacité réduite, seulement sur firefox (étrange dhab les probléme sont sur IE
) le fond "transparent noir" ne'apparait pas dérriére ma lightbox
Voila si quelqu'un à déja connu ce cas de figure ou si une âme généreuse veut venir à mon secours , ca serait super cool
voila mon code css :
body
{
background-image: url("images/fond2.jpg");
background-color: grey;
}
#conteneur {
background-image: url("images/fond7.jpg");
background-repeat: no-repeat;
width: 750px;
height: auto;
margin-bottom: auto;
margin-left:auto;
margin-right:auto;
}
#header
{
width: 750px;
height:80px;
margin-bottom: 10px;
margin-left: 20px;
text-align: center;
}
#menu
{
float: left;
width: 130px;
margin-left: 10px ;
margin-top:60px;
}
#corps{
margin-left: 250px;
margin-right : 40px;
margin-top: 150px !important;
margin-top: 150px ;
width :450px;
height: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: white;
background-color: #000; /* le fond */
filter:alpha(opacity=50); /* Internet Explorer 6 */
-moz-opacity:0.5; /* Mozilla 1.6 et infér. */
opacity: 0.5; /* CSS3 et Mozilla récents */
}
#footer{
margin-left: 220px;
text-align: center;
margin-top: 5px;
clear:both;
}
.ContactIntitule {
float:left;
width: 150px;
}
.ContactChamp {
float:none;
}
.participerChamp {
float:none;
}
et ma page "créations" (celle qui pose probléme en gros)
<!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>
<title>Les robes de Karen</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="css.css" />
</head>
<body>
<div id ="conteneur">
<div id="header">
<?php
include("header.php");
?>
</div>
<div id="menu">
<?php
include("menu.php");
?>
</div>
<div id="corps">
<div id="texteopaque">
<h1>Les créations de Karen</h1>
En attendant les robes de Karen Vous pouvez toujours jeter un oeil sur les tableaux de surf de notre ami tony [cligne] (ca sert de test aussi [langue])
<?php
error_reporting(0); // Empêche d'afficher les erreurs, en cas de problème, désactiver pour débugger!
/* fonction get_thumb -> Créé la vignette 100x100 si elle n'existe pas, renvoi le chemin vers le fichier vignette de l'image donnée
* string $image_filename -> Nom du fichier image
* array $image_info -> Infos sur l'image (taille et type, renvoyés par la fonction getimagesize)
* string $images_dir -> Chemin vers le dossier des images (doit finir par un /)
* string 'thumbs/' -> Chemin vers le dossier des vignettes (doit finir par un /)
*
* return string -> chemin vers le fichier vignette de l'image donnée
*/
function get_thumb ( $image_filename, $image_info, $images_dir, $thumbs_dir = 'thumbs/' ){
if ( is_file( $images_dir . $thumbs_dir . $image_filename ) ) // Si la vignette existe, on renvoi le chemin vers la vignette et basta...
return $images_dir . $thumbs_dir . $image_filename;
if ( $image_info[0] != 100 && $image_info[1] != 100 && function_exists('gd_info') ) { // Si l'image n'est pas à la bonne taille et que GD est sur le serveur
$srcw = $image_info[0]; // On stocke la largeur, la hauteur et le plus petit coté
$srch = $image_info[1];
$srcx = ( $image_info[0] < $image_info[1] ) ? $image_info[0] : $image_info[1] ;
switch( $image_info[2] ) { // On créé l'image Bitmap que l'on peut modifier, en fonction du format d'origine.
case 1: // Si $image_info[2] == 1
$imageSrc = imagecreatefromgif( $images_dir . $image_filename );// C'est du gif
break;
case 2: // Si $image_info[2] == 2
$imageSrc = imagecreatefromjpeg( $images_dir . $image_filename );// C'est du jpeg
break;
case 3: // Si $image_info[2] == 3
$imageSrc = imagecreatefrompng( $images_dir . $image_filename );// C'est du png
break;
} // fin du switch
if ( ! isset( $imageSrc ) ) // Si l'image n'a pas pu être créée, c'est pas la peine de continuer, on renvoi le chemin vers l'image d'origine
return $images_dir . $image_filename;
if ( ! $imageDest = imagecreatetruecolor( 100, 100 ) ) // Si la création de l'image vide ou l'on va créer la vignette n'est pas possible en millions de couleurs
$imageDest = imagecreate( 100, 100 ); // On la céé en milliers de couleurs *
if ( ! imagecopyresampled( $imageDest, $imageSrc, 0, 0, ( $srcw-$srcx ) / 2 , ( $srch-$srcx ) / 2 , 100, 100, $srcx, $srcx ) ) // Si la création de la vignette n'est pas possible en qualité optimum
imagecopyresized( $imageDest, $imageSrc, 0, 0, ( $srcw-$srcx ) / 2 , ( $srch-$srcx ) / 2, 100, 100, $srcx, $srcx ); // On fait un redimentionnement simple *
// * Les 2 astuces ci-dessus servent à créer la vignette de la meilleur qualité possible en fonction de la version de GD
if ( ! is_dir( $images_dir . $thumbs_dir ) ) // Si le dossier des vignettes n'existe pas, on le créé
mkdir($images_dir . $thumbs_dir, 0755);
$created = imagejpeg( $imageDest, $images_dir . $thumbs_dir . $image_filename ); // On créé le fichier image
imagedestroy( $imageSrc ); // On nettoie la mémoire en supprimant les Bitmaps
imagedestroy( $imageDest );
if ($created ) // Si tout c'est bien passé on renvoi le chemin vers la vignette
return $images_dir . $thumbs_dir . $image_filename;
} // fin du if ( $image_info[0] != 100 ...
// Si on est là c'est qu'il y a eu une merde quelque part... donc par défaut on renvoi le chemin vers l'image d'origine, c'est mieux que rien!
return $images_dir . $image_filename;
}
//Créé l'image medium 600 de haut si elle n'existe pas, renvoi le chemin vers le fichier vignette de l'image donnée
function get_medium ( $image_filename, $image_info, $images_dir, $mediums_dir = 'medium/' ){
if ( is_file( $images_dir . $mediums_dir . $image_filename ) ) // Si la vignette existe, on renvoi le chemin vers la vignette et basta...
return $images_dir . $mediums_dir . $image_filename;
if ( $image_info[1] != 500 && function_exists('gd_info') ) { // Si l'image n'est pas à la bonne taille et que GD est sur le serveur
$srcw = $image_info[0]; // On stocke la largeur et la hauteur, puis on calcule la (nouvelle) largeur proportionnel à 600 de hauteur
$srch = $image_info[1];
$srcx = $srcw / $srch * 500;
switch( $image_info[2] ) { // On créé l'image Bitmap que l'on peut modifier, en fonction du format d'origine.
case 1: // Si $image_info[2] == 1
$imageSrc = imagecreatefromgif( $images_dir . $image_filename );// C'est du gif
break;
case 2: // Si $image_info[2] == 2
$imageSrc = imagecreatefromjpeg( $images_dir . $image_filename );// C'est du jpeg
break;
case 3: // Si $image_info[2] == 3
$imageSrc = imagecreatefrompng( $images_dir . $image_filename );// C'est du png
break;
} // fin du switch
if ( ! isset( $imageSrc ) ) // Si l'image n'a pas pu être créée, c'est pas la peine de continuer, on renvoi le chemin vers l'image d'origine
return $images_dir . $image_filename;
if ( ! $imageDest = imagecreatetruecolor( $srcx, 500 ) ) // Si la création de l'image vide ou l'on va créer la vignette n'est pas possible en millions de couleurs
$imageDest = imagecreate( $srcx, 500 ); // On la céé en milliers de couleurs *
if ( ! imagecopyresampled( $imageDest, $imageSrc, 0, 0, 0 , 0 , $srcx, 500, $srcw, $srch ) ) // Si la création de la vignette n'est pas possible en qualité optimum
imagecopyresized( $imageDest, $imageSrc, 0, 0, 0 , 0, $srcx, 500, $srcw, $srch ); // On fait un redimentionnement simple *
// * Les 2 astuces ci-dessus servent à créer la vignette de la meilleur qualité possible en fonction de la version de GD
if ( ! is_dir( $images_dir . $mediums_dir ) ) // Si le dossier des vignettes n'existe pas, on le créé
mkdir($images_dir . $mediums_dir, 0755);
$created = imagejpeg( $imageDest, $images_dir . $mediums_dir . $image_filename ); // On créé le fichier image
imagedestroy( $imageSrc ); // On nettoie la mémoire en supprimant les Bitmaps
imagedestroy( $imageDest );
if ($created ) // Si tout c'est bien passé on renvoi le chemin vers la vignette
return $images_dir . $mediums_dir . $image_filename;
} // fin du if ( $image_info[1] != 600 ...
// Si on est là c'est qu'il y a eu une merde quelque part... donc par défaut on renvoi le chemin vers l'image d'origine, c'est mieux que rien!
return $images_dir . $image_filename;
}
?>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<style>
div.thumb_wrapper{
float: left;
margin: 5px;
margin-bottom : none;
}
a.thumb, a.thumb:visited{
display: block;
width: 110px;
height: 110px;
border: 1px solid #CCC;
}
a.thumb:hover{
border: 1px solid #333;
}
a.thumb img{
height: 100px;
width: 100px;
border: none;
margin: 5px;
}
a.download{
display: none;
}
</style>
<?php
//On indique quel est le chemin relatif vers les dossiers des images et des vignettes ici, comme ça on pourra:
// toujours changer plus tard ou répéter la boucle avec un autre dossier ou déplacer ce fichier sur le serveur!
$images_dir = 'toiles_tony/';
// La boucle qui permet d'afficher les vignettes:
if ( $handle = opendir( $images_dir ) ) { // On ouvre le dossier images pour le parcourir
$gallery = str_replace ( '/', '', $images_dir ); // On enlève les / du nom du dossier pour avoir un identifiant de la galerie
while ( false !== ( $filename = readdir( $handle ) ) ) // Tant qu'il reste des fichiers à lire, on stocke le nom du fichier en cours dans $file
if ( $image_info = getimagesize( $images_dir . $filename ) ) { // Si ce fichier est une image, on stocke les infos dans $image_info
$name = str_replace ( strchr( $filename, '.' ), '', $filename ); // On enlève l'extention au nom de fichier pour avoir le nom de l'image à afficher
echo '
<div class="thumb_wrapper">
<a href="' . get_medium ( $filename, $image_info, $images_dir ) . '" class="thumb" title="' . $name . '" rel="lightbox[' . $gallery . ']">
<img src="' . get_thumb ( $filename, $image_info, $images_dir ) . '" alt="' . $name . '" />
</a>
<a href="' . $images_dir . $filename . '" class="download" title="Télécharger ' . $name . '">
' . $name . '
</a>
</div>
';
}
closedir($handle); // On ferme le dossier images
} // fin du if ( $handle = ...
?>
</div>
<div id="fondtranslucide">
</div>
</div>
<?php
include("footer.php");
?>
</div>
</body>
</html>
Merci d'avance!
Nico
Modifié par nicoparadise (31 Jul 2008 - 11:53)
mais le code géneré c'est toujours un grand n'importe quoi 
avec de multiples html, head, body etc. avec en plus un code qui débute par <div class=header etc.
Ah oui effectivement j'avais un peu compris de travers l'histoire des includes 
