Bonjour à tous,
Je suis actuellement en train de mettre en place un slider sur mon site, or je rencontre un petit problème pour la mise en forme des éléments. Une belle image vaux mieux qu'un long discours :
Mon code html :
Mon code css :
En réalité, certains éléments sont crée à l'aide du script JS, c'est la raison pour laquelle ils apparaissent dans le css mais pas dans le HTML... Je pense que juste le css et l'image sera nécessaire.
Une solution serait de remonter les éléments comme je l'ai précisé en commentaire, mais je doute que cela soit une bonne solution, et que chaque navigateur interpretera le tout de la même manière.
J'ai testé sous FF cela fonctionne... Mais je souhaite faire quelque chose de propre... et également comprendre le pourquoi du comment ?!?
Merci à vous.
Je suis actuellement en train de mettre en place un slider sur mon site, or je rencontre un petit problème pour la mise en forme des éléments. Une belle image vaux mieux qu'un long discours :
Mon code html :
Bloc de code:
<div id="panel">
<div id="slider">
<div class="panelContainer">
<div class="panel" title="Panel 1">
<div class="wrapper">
Panel 1
</div> <!-- Fin Panel 1 -->
</div>
<div class="panel" title="Panel 2">
<div class="wrapper">
Panel 2
</div>
</div> <!-- Fin Panel 2 -->
</div> <!-- Fin PanelContainer -->
</div> <!-- Fin slider -->
</div> <!-- Fin Panel -->
Bloc de code:
/* Panel + Slider*/
#panel {
background : url(img/back_panel.png) left no-repeat;
width : 869px;
height : 265px;
margin : auto;
}
#slider {
width : 849px;
height : 247px;
position : relative;
top : 8px; /* valeur -180px comportement correcte */
left : 10px;
background : url(img/scroll_back.png) center repeat-x;
}
.stripViewer { position: relative; overflow: hidden; clear: both; }
.stripViewer .panelContainer { position: relative; top: 20px; }
.stripViewer .panelContainer .panel {
float : left;
width : 849px;
height : 247px;
position : relative;
}
/* Button Slider Left L & Right R */
.stripNav {
display : none;
}
.stripNavL a, .stripNavR a {
display: block;
position: absolute;
width: 27px;
height: 57px;
text-indent: -9999px;
}
.stripNavL a {
background : url(img/scroll_left.png);
float : left;
position : relative;
left : -20px;
top : 25px;
}
.stripNavR a {
background: url(img/scroll_right.png);
float : right;
position : relative;
right : -20px;
top : 25px; /* valeur -180px comportement correcte */
}
Une solution serait de remonter les éléments comme je l'ai précisé en commentaire, mais je doute que cela soit une bonne solution, et que chaque navigateur interpretera le tout de la même manière.
J'ai testé sous FF cela fonctionne... Mais je souhaite faire quelque chose de propre... et également comprendre le pourquoi du comment ?!?
Merci à vous.