Afficher Simple Slider dans un float: left...

[Yvan]

#~~~~~ NE PAS SUPPRIMER CE BLOC ~~~~~
#~ Version du CMS: ?
#~ Nom de l'hébergeur : Infomaniak
#~ Informations Système :
#~ ----------------------------------------------
#~ Cms Version: 1.8.1
#~ Installed Modules:
#~ * CMSMailer: 2.0
#~ * FileManager: 1.0.2
#~ * MenuManager: 1.6.5
#~ * ModuleManager: 1.4
#~ * News: 2.10.6
#~ * nuSOAP: 1.0.1
#~ * ThemeManager: 1.1.1
#~ * TinyMCE: 2.7.2
#~ * FrontEndUsers: 1.9.3
#~ * CustomContent: 1.5.3
#~ * CGExtensions: 1.18.8
#~ * CGCalendar: 1.5.2
#~ * SimpleSlider: 0.3
#~ Config Information:
#~ * php_memory_limit:
#~ * process_whole_template: false
#~ * output_compression: false
#~ * max_upload_size: 48000000
#~ * default_upload_permission: 664
#~ * url_rewriting: mod_rewrite
#~ * page_extension: /
#~ * query_var: page
#~ * image_manipulation_prog: GD
#~ * auto_alias_content: true
#~ * locale:
#~ * default_encoding: utf-8
#~ * admin_encoding: utf-8
#~ * set_names: true
#~ Php Information:
#~ * phpversion: 5.2.13
#~ * md5_function: On (Vrai)
#~ * gd_version: 2
#~ * tempnam_function: On (Vrai)
#~ * magic_quotes_runtime: Off (Faux)
#~ * E_STRICT: 0
#~ * memory_limit: 64M
#~ * max_execution_time: 10
#~ * output_buffering: 20480
#~ * safe_mode: Off (Faux)
#~ * file_uploads: On (Vrai)
#~ * post_max_size: 300M
#~ * upload_max_filesize: 300M
#~ * session_save_path: Aucune vérification à cause de la restriction spécifiée par PHP open_basedir
#~ * session_use_cookies: On (Vrai)
#~ * xml_function: On (Vrai)
#~ Server Information:
#~ * Server Api: apache2handler
#~ * Server Db Type: MySQL (mysql)
#~ * Server Db Version: 5.0.84
#~ ----------------------------------------------
#~~~~~ NE PAS SUPPRIMER CE BLOC ~~~~~

Bonjour,

Je me suis décidé à utiliser Simple Slider et j'ai été farfouillé dans le code pour l'adapter un peu à mon site. Je veux le mettre en float:left; mais il se décale un peu sur la droite et l'image semble alors coupée sur la gauche.
J'ai un peu de peine à savoir si j'ai mis les bonnes valeurs pour "position" et j'aimerais savoir votre avis: http://www.coord21.ch/test_cmsms/

Code php/html/js:

<?php

@error_reporting(E_ERROR);

if (!isset($gCms)) exit;

$db = $this->cms->db;

if(isset($params['show'])){
$showname=mysql_real_escape_string($params['show']);

$sql='SELECT * FROM '.cms_db_prefix().'module_simpleslider_shows WHERE `showname`="'.$showname.'";';
$result=$db->Execute($sql);
$fields=$result->fields;
$showid=$fields['showid'];
$width=$fields['width'];
$height=$fields['height'];
$fadetime=$fields['fadetime'];
$sql='SELECT * FROM '.cms_db_prefix().'module_simpleslider_images, '.cms_db_prefix().'module_simpleslider_showimages WHERE `id`=`imageid` AND `showid`="'.$showid.'";';
}
else{
$width=$this->getPreference('defwidth');
$height=$this->getPreference('defheight');
$fadetime=$this->getPreference('deffadetime');
$sql='SELECT * FROM '.cms_db_prefix().'module_simpleslider_images WHERE 1;';
}
$result=$db->Execute($sql);
if($this->debug){
echo $db->ErrorMsg();
}
$flds=$result->fields;
?>

<script src="lib/jquery.js" type="text/javascript"></script>
<script src="lib/s3Slider.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#simpleslider').s3Slider({
timeOut: <?=$fadetime?>
});
});
</script>
<div id="simpleslider" style="width: <?=$width?>px; height: <?=$height?>px;">
<ul id="simplesliderContent">

<?
while(!$result->EOF()){
$fields=$result->fields;
$result->MoveNext();
?>

<li class="simplesliderImage">
<img src="uploads/sliderimages/img<?=$fields['id']?>.jpg" width="<?=$width?>" height="<?=$height?>" <? if($fields['imagelink']!=''){ ?> onClick="javascript:location.href='<?=$fields['imagelink']?>';" style="cursor:pointer;" <? } ?> />
<span class="bottom">
<div class="title"><?=$fields['title']?></div>
<? if($fields['imagelink'] != ''){ ?>
<a href="<?=$fields['imagelink']?>" class="slidelink">
<? } ?>
<?=$fields['description']?>
<? if($fields['imagelink']!=''){ ?>
</a>
<? } ?>
</span>
</li>
<? } ?>

</ul>
</div>

<? $result->Close(); ?>


Code CSS:

#simpleslider {
float: left;
position: relative;
overflow: hidden;
padding: 5px 10px 5px 0px;
}
#simplesliderContent{
width: 100%;
position: absolute;
top: 0;
margin-left: 0;
}
.simplesliderImage{
position: relative;
display: none;
}
.simplesliderImage span.bottom {
position: absolute;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 100%;
background-color: #FFF;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #333;
display: none;
bottom: 0;
left: 0;
}
ul#simplesliderContent,
li.simplesliderImage {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
ul#simplesliderContent {
list-style: none;
}
li.simplesliderImage div.title {
font-weight:bold;
font-size:14px;
}


Merci !