Sujets similaires

Bonjour
Alors j'ai installé, un accueil slide sauf que à certains moment, la taille des images change, alors que sa ne devrait pas..
Bon ces pas très explicite alors je montre un capture :
Sa ces bon :

Spoiler:

Mais la sa bug (l'image dépasse en dessous de la bande noir) :

Spoiler:

Je vous donne mon CSS au cas ou :

Code:: /* EST LE CONTENEUR PRINCIPAL, TU PLACES ICI L IMAGE DE FOND DU SLIDE */

#slider-wrapper {
background-color : #000000;
width:420px; /* LARGEUR DU FOND */
height:150px; /* HAUTEUR DU FOND */
margin: auto; /* MARGE */
margin-top: 0px; /* MARGE EXTÉRIEUR EN HAUT POUR QUE LE SLIDE NE COLLE PAS A D'AUTRES ELEMENTS */
}

/* CORRESPOND AU BLOC CONTENANT LES IMAGES */

#slider {
position:relative;
width:420px; /* LARGEUR (sera la largeur de tes images */
height:150px; /* HAUTEUR (sera la hauteur de tes images) */
/* CETTE IMAGE CORRESPOND AU GIF 'LOADING' (attente) */
background:url(http://i65.servimg.com/u/f65/11/95/30/70/loadin10.gif) no-repeat 50% 50%;
}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
#slider a {
border:0;
display:block;
}

.nivo-controlNav {
text-align: center;
padding: 20px 0;
padding-left: 160px;
}

/* Control nav styles (e.g. 1,2,3...) */

.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(http://i65.servimg.com/u/f65/11/95/30/70/bullet10.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
position:relative;
z-index:9;
cursor:pointer;
}

.nivo-controlNav a.active {
font-weight:bold;
background-position:0 -22px;
}

.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(http://i65.servimg.com/u/f65/11/95/30/70/arrows10.png) no-repeat;
text-indent:-9999px;
border:0;
}

a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left:15px;
}

/* Caption styles */

.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.8; /* Overridden by captionOpacity setting */
width:100%;
z-index:8;
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
color:#efe9d1;
text-decoration:underline;
}
.nivo-html-caption {
display:none;
}
.nivo-caption {
text-shadow:none;
font-family: Helvetica, Arial, sans-serif;
}

/* The Nivo Slider styles */
.nivoSlider {
position:relative;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
}

/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}

Voici mon forum au cas ou : http://art-graphique.forumsactifs.com/

Si vous pouvez m'aider ce serais super Smile

Merci

Bonjour !

Je pense que pour pouvoir déterminer d'où vient le problème, nous aurions aussi besoin du code javascript et du code HTML associé !

Pour commencer, ma question sera simple : le problème ne viendrait-il pas simplement du fait que tu n'utilises pas des images de la bonne dimension ? Parce que là je vois que la largeur "imposée" par ton script est apparemment de 420px, pour 150px de large. Tu peux vérifier, aucune des images ne respecte ce format '_'

Sinon une méthode "rapide" sera simplement de cacher tout ce qui dépasse du bloc qui contient le slider ! Du coup, dans ton CSS, tu cherches le sélecteur #slider et dans les propriétés qu'il contient tu rajoutes overflow:hidden;

Et hop, plus de problème '_'

salut !

essaye ce que 'Christa te propose comme solution, si sa marche pas essaye d'ajouter ce code css

Code:: #slider img{
height: 150px !important;
}

Désolée pour le temps de réponce ^^'
J'ai essayer ce que Christa à dit, et sa fonctionne Smile

Merci beaucoup !
Merci aussi à toi Iowan ^^

Le sujet étant résolu, je le déplace. Merci de penser à l'indiquer dans le titre du sujet la prochaine fois

Aide accueil Slide

Aide accueil Slide

Sujets similaires

Sujets similaires

Partenaires Or