[CSS]Positionnement d'éléments

dmo95

Membre actif
24 Mai 2007
584
14
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 :

site.png


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 -->
Mon code css :
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 */
}
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.
 
Bon tout ceci c'est bien mais quel est ton souci ?

Le bouton de droite était à 180 px du top, tu l'as mis à 25 et c'est bon ?

Cette construction est classique, les boutons étant placés par le script ça devrait marcher... mais par contre tu dois enlever (AMHA) le positionnement relative et float des positionnements des boutons (ça n'a rien à faire là), soit :
Bloc de code:
.stripNavL a {
    background : url(img/scroll_left.png);
    left : -20px;
    top : 25px;
}  
.stripNavR a { 
    background: url(img/scroll_right.png);
    right : -20px;
    top : 25px;
}

A essayer...
 
Oula, non le fait d'enlever les floats me décale tous les éléments... Bon j'ai opter pour la solution de remonter les éléments, a priori Safari et FF l'acceptent.

Je vais mettre résolu, bien que je n'en sois pas convaincu...