salut tout le monde,

j'ai un petit soucis au niveau de mon style css pour placer deux flêches,sur firefox ca se met bien en place et sous chrome et safari non

Sous firefox:
ICI

Sous chrome/safari:
ICI

J'ai essayé avec les hack pour chrome mais rien ne bouge, si quelqu'un a une idée, elle est la bienvenue

MERCI

8 réponses


Des images c'est bien mais un bout de code c'est mieux !

Ciao

oui c'est vrai le voici,j'utilise aussi le plugin caroufredsel en jquery. Peut-etre qu'il y a un conflit quelque part ?

HTML

<div class="list_carousel" id="slideShow">
                <div id="foo2">

                    <div class="album_shop">
                        <div class="album_shop_photo">
                            <img src="http://lorempixel.com/600/400/fashion/2" width="242" height="242">
                        </div>
                        <a href="#">
                        <div class="album_shop_titre" width='242' height='102'>
                            <h6></h6>
                            <p id="titre_album"><br/></p>
                        </div>
                        </a>
                    </div>
                    <div class="album_shop">
                        <div class="album_shop_photo">
                            <img src="http://lorempixel.com/600/400/fashion/2" width="242" height="242">
                        </div>
                        <a href="#">
                        <div class="album_shop_titre" width='242' height='102'>
                            <h6></h6>
                            <p id="titre_album"><br/></p>
                        </div>
                        </a>
                    </div>
                </div>
                <a id="prev2" class="prev" href="#"><span><img src="images/op_png/flrche_nav_g.png"></span></a>
                <a id="next2" class="next" href="#"><span><img src="images/op_png/fleche_nav_d.png"></span></a>
            </div>

CSS

/*-------- slideShow -------*/
#slideShow{
    height:192px;
}
#slideShow span{
    display: none;
}
#slideShow:hover span{
    display: inline;
}
.prev {
    width:100%;
    position:relative;
    bottom:75%;
    left:2%;
    z-index:auto;
}
.next {
    width:100%;
    position:relative;
    bottom:75%;
    left:88%;
    z-index:auto;
}

Salut,

Attention avec les valeurs en pourcentage: les navigateurs ne l’interprètent pas de la même façon.
Chrome et safari prennent n% de l’élément alors que Firefox et Opera prennent n% de la page.
Le mieux c'est de mettre des valeurs en pixel.

Cordialement,
TWIK.

Merci pour le conseil, je vais changer ça car on m'a dit que pour rendre le site extensible, je devais mettre en %.

Pour rendre un site extensible, mieux vaut ne pas mettre de width et jouer avec les margin et les position mais ce n'est pas facile et cela reduit les possibilités de design.

C'est faux, cela réduit en rien les possibilités de design (sauf quand on sait pas si prendre).

Utiliser des %age est un très bon réflexe !

Sinon, première remarque :

Les <div> et autres blocs n'ont rien a faire dans un <a> (surtout que les liens ne mènent nul part)

2e remarque :

Ne mélange pas le français et l'anglais ex: album_shop_titre , choisis-en une et cantonne toi à celle là.

3e remarque (en cours de rédaction ^^)

"Utiliser des %age est un très bon réflexe !" ? Peux-tu justifier cette remarque car a mon avis les %age n'ont rien de pratique car on ne sait pas n% de quoi il s'agit (et cela change en fonction des navigateurs).
Pour ce qui est des site extensible, les pourcentage ne sont souvent pas approprier car un site en %age va mettre a l’échelle tout les élément du site, autant faire un zoom sur tout le site alors que le plus souvent on veut agrandir la zone de contenu uniquement (mais inutile d'avoir un gros menu, un gros header, etc.).

ok ok je vais bien arranger mon code pour que ce soit clair et moins brouillon niveau des balises et des nom des attributs :)