11499 sujets

JavaScript, DOM et API Web HTML5

Carroussel Nivo-slider problème sur firefox

Bonjour,

je suis aller chercher le caroussel de nivo slider ( dev7studios.com ). Je trouve qu'il est top car il est responsive, mais j'ai beaucoup de problèmes avec lui et je ne veux pas en utiliser un autre et devoir tout recommencer.

Bref, pour faire une histoire courte, tous les éléments après mon carrousel ne s'affichent pas sous firefox. Sur les autres navigateurs, tout fonctionnent à merveille! Je ne comprend pas.

De plus, sous firefox et IE, les flèches de navigations n'apparaissent pas ou ne fonctionnent tout simplement pas.

<!--début du caroussel-->
<div id="wrapper">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
    <img src="images/image1.jpg" data-thumb="images/image1.jpg"  />
    <img src="images/image2.jpg" data-thumb="images/image2.jpg"   />
    <img src="images/image3.jpg" data-thumb="images/image3.jpg"  />
    <img src="images/image4.jpg" data-thumb="images/image4.jpg"  />
    <img src="images/image5.jpg" data-thumb="images/image5.jpg"  />
</div>
            <div id="htmlcaption" class="nivo-html-caption">
                <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. 
            </div>
        </div>

    </div>
<!--fin du caroussel-->

<div class="nonflottant"><!--nonflottant--></div>
</div><!--fin header-->

<div id="contenu">
<div id="listemenu">
tous le reste de mes éléments ici
</div>
</div>
...



*{ padding:0px; margin:0px; }
html{
	height: 100%;
}
body{ background:#D5DEE7;  height:100%; background:url(../img/bg.jpg) fixed repeat; font-family:Arial, Helvetica, sans-serif; border:none; }

.nonflottant {clear:both;}

@font-face {
    font-family: 'typewriterscribbledregular';
    src: url('../font/typewriterscribbled-webfont.eot');
    src: url('../font/typewriterscribbled-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/typewriterscribbled-webfont.woff') format('woff'),
         url('../font/typewriterscribbled-webfont.ttf') format('truetype'),
         url('../font/typewriterscribbled-webfont.svg#typewriterscribbledregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/*--------supermain-----*/
#supermain{
	position : relative;
	min-height: 100%;
	
}


/*------main------*/
#main{
	position: relative;
	min-height:95%;
	margin: 0 auto;
	padding-bottom: 70px;
	width: 100%;
	
}

/*---menu---*/

#menu {
	width:100%;
	height:auto; min-height:145px;
	background:url(../img/bg.jpg) repeat;
	position:relative; z-index:100;
	
	
overflow: hidden;
top:0px;
left:0px;
margin:0px auto; 
text-align:center;	
	
}
#menu img {width:auto;	margin:10px auto;
vertical-align:middle;
 display:inline-block;
overflow: hidden; 
position: relative;
text-align:left;}


#menu ul {
	width:75%;
	

	list-style-type:none;
	
	margin:10px auto;
vertical-align:middle;
 display:inline-block;
overflow: hidden; 
position: relative;
text-align:left;
	
	
	
}

#menu ul li {width:auto; float:left; display:block; padding:5px; margin:10px 8px 10px 8px; border-left:2px dashed #000; 
				
}

#menu ul li a {display:block;
 float:left;   width:100%; 
  text-align:left; text-transform:uppercase; font:bold 1em Arial, Helvetica, sans-serif; color:#000;
  
 }
  
#menu ul li:hover { }
  
#menu ul li:hover a, #menu ul li:hover p {color:#2b92b0; }

  
#menu ul li p {font-family:Arial, Helvetica, sans-serif; font-size:0.7em;}

#header{
	width:100%; margin:0px auto; position: relative;
	float:left;
	background:url(../img/head.png) repeat-x;
	
	
}

#contenu {
width:100%; margin:0px auto;  position: relative; z-index:100;


	
}

#listemenu {
height:auto;
overflow: hidden;
top:0px;
left:0px;
width: 80%; margin:0px auto; 
position: relative;
text-align:center;	
	
	
}

#listemenu h1 {
	width:88%;
text-align:left; 
vertical-align:middle;  
font:bold 1em Arial, Helvetica, sans-serif; 
text-transform:uppercase;  
margin:10px auto;
display:inline-block;
overflow: hidden; 
position: relative;}

#superfooter{
	position: absolute;
	bottom: 0px;
	height: 50px;
	width: 100%;
	background: #000;
}


/*----------rehcerche----*/
/*#menu input[type="text"] {position:absolute; top:0px; left:75%; z-index:100;}*/
.searchform {
	display: inline-block;
	/*zoom: 1;*/ /* ie7 hack for display:inline-block */
	*display: inline;
	border: solid 1px #d2d2d2;
	padding: 3px 5px;
	position:absolute;
	top:0px; left:70%;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
height:auto; width:auto;
margin-bottom:auto;
padding-bottom:auto;

	-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
	-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
	box-shadow: 0 1px 0px rgba(0,0,0,.1);
background:#000;
}
.searchform input {
	font: normal 12px/100% Arial, Helvetica, sans-serif;
	color:#9b9999;
	background:#000;
	
}
.searchform .searchfield {
	background: #fff;
	padding: 6px 6px 6px 8px;
	width: auto;
	border:none;
	outline: none;

	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	
	background:#000;


}
.searchform .searchbutton {
	color: #fff;
	border: solid 1px #494949;
	font-size: 11px;
	height: 27px;
	width: 27px;
	text-shadow: 0 1px 1px rgba(0,0,0,.6);

	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;

	background: #5f5f5f;
	background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));
	background: -moz-linear-gradient(top,  #9e9e9e,  #454545);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */
	-ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */
}





/*------------------------------------------------
-----------Carré des images liste vidéo------------
--------------------------------------------------
------------------------------------------------*/
.boxgrid a{ color:#40b2d6; }
.boxgrid h3{ margin: 15px 10px 0 10px; color:#FFF; font:1.2em  Arial, Helvetica, sans-serif/*'typewriterscribbledregular'*/; text-transform:uppercase; letter-spacing:-1px; font-weight: bold; color:#40b2d6;  }
			
			.boxgrid{ 
				width: 325px; 
height: 260px; 
margin:10px auto;
vertical-align:middle;
 display:inline-block;
background:#161613; 
border: solid 2px #113f4c; 
overflow: hidden; 
position: relative;
text-align:left;
				/*-webkit-box-shadow: -2px -2px 25px 1px #000;
box-shadow: -2px -2px 25px 1px #000;*/ 
			}
				.boxgrid img{ 
					position: absolute; 
					top: 0; 
					left: 0; 
					border: 0;
					 /*filter: grayscale(1);
        -webkit-filter: grayscale(1);
        -moz-filter: grayscale(1);
        -o-filter: grayscale(1);
        -ms-filter: grayscale(1);*/
		filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
		
					
				}
				
				.boxgrid img:hover{ 
					position: absolute; 
					top: 0; 
					left: 0; 
					border: 0;
					/*filter: grayscale(0);
        -webkit-filter: grayscale(0);
        -moz-filter: grayscale(0);
        -o-filter: grayscale(0);
        -ms-filter: grayscale(0);*/
		filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
		
/*-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;*/


}

.boxgrid img:hover {width:90%;}

.boxgrid img:hover {width:100%;}

					
		
				.boxgrid p{ 
					padding: 0 5px; 
					color:#afafaf; 
					font-weight:bold; 
					font:10pt  Arial, sans-serif; 
				}
				
			.boxcaption{ 
				float: left; 
				position: absolute; 
				background: #000; 
				height: 100px; 
				width: 100%; 
				opacity: .8; 
				/* For IE 5-7 */
				filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
				/* For IE 8 */
				-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
 			}
 				.captionfull .boxcaption {
 					top: 260;
 					left: 0;
 				}
 				.caption .boxcaption {
 					top: 220;
 					left: 0;
 				}
				.cover p {color:#fff; margin-left:10px;}
				








/*=================================*/
/* Nivo Slider Demo
/* November 2010
/* By: Gilbert Pellegrom
/*  http://dev7studios.com
 
/*=================================*/

/*====================*/
/*=== Reset Styles ===*/
/*====================*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-weight:inherit;
	font-style:inherit;
	font-size:100%;
	font-family:inherit;
	vertical-align:baseline;
}
body {
	line-height:1;
	
}
table {
	border-collapse:separate;
	border-spacing:0;
}
caption, th, td {
	text-align:left;
	font-weight:normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content:"";
}
blockquote, q {
	quotes:"" "";
}
/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {
	display: block;
}

/*===================*/
/*=== Main Styles ===*/
/*===================*/


a, a:visited {
	color:blue;
	text-decoration:none;
}
a:hover, a:active {
	color:#000;
	text-decoration:none;
}

#dev7link {
    position:absolute;
    top:0;
    left:50px;
    background:url(images/dev7logo.png) no-repeat;
    width:60px;
    height:67px;
    border:0;
    display:block;
    text-indent:-9999px;
}

.slider-wrapper { 
	width: 75%; 
	margin: 30px auto 0px auto; padding-left:20px;
	
}



/*====================*/
/*=== Other Styles ===*/
/*====================*/
.clear {
	clear:both;
}


Il ne me semble pas avoir changer quoi que ce soit dans le css de base du plugin. Mais je vous donne le lien où se trouve mes tests pour l'instant pour que vous puissiez voir ce que cela donne.

http://chienpetz.com/effets/

P.S. Je suis ouverte aux critiques pour tout le reste du code du site que je suis en train de monter. J'aimerais beaucoup m'améliorer.

Merci beaucoup de votre aide, je suis un peu désespéré à chercher sur le net et mon anglais est pitoyable Smiley decu .
Modifié par sydgie (27 Aug 2013 - 16:59)
Salut.

Pas le temps tout de suite de trouver une solution, mais ton problème vient du float:left sur ton header.

Je regarderai ça en revenant, si toi ou quelqu'un d'autre n'avez pas trouvé de solution.
Ouff, je croyais devoir jouer dans le code javascript du slider...

Merci, je crois que ça fonctionne, je vais aller vérifier sur les autres navigateurs.

J'essais de rendre ce site responsive pour les mobiles, donc une nouvelle apprentissage surtout quand on est habituer à mettre des tailles fixes.
Si vous avez une idée du pourquoi les flèches de navigation n'affichent pas , n'hésitez pas, merci!
Bonjour,

J'ai un rendu "identique" quelque soit le navigateur (dernières versions) et rien de particulier sous Firefox (ou alors je ne suis pas bien réveillé, ce qui est tout à fait possible Smiley lol ).
Les flèches de navigations s'affichent au survol du slider, n'était-ce pas le résultat attendu ?

En premier lieu, il conviendrait de produire un code valide, ça ne corrige pas tout, mais ça peut aider...
Cool, je ne savais pas qu'il avait des sites qui donnaient les erreurs d'un site, merci pour ce lien.

Pour les flèches, effectivement au survol de la souris, elles devraient apparaître, mais ce n'est pas le cas dans tous les navigateurs (entre-autre avec explorer).
Sujet clos
Aller à