28172 sujets

CSS et mise en forme, CSS3

Probème CSS dans un include

Bonjour,

Je suis nouveau sur le forum et novice en création de site web. J'ai un petit problème j'ai une page index dans laquelle j'appelle plusieurs pages avec des includes. Jusque là pas de problème, cependant j'ai un problème lorsque le code des fichier includes et dans la même page que l'index je n'ai pas de problème de css. Lorsque j'utilise des includes j'ai un problème avec mon Slider kit qui ne s'affiche plus. Voici mes différents bout de code.

Appel de mes pages
<div id="1" style="display:none;">

	<div id="Monture_Dclip">
		<?php include ("pages/Monture_dclip.html")?>
	</div>
		<div id="Branche_Dclip">
		<?php include ("pages/Branche_Dclip.html")?>
	</div>

</div>


Page include ou il y a le problème 

<div id="choix_branches">
	<div class="sliderkit carousel-continuous">
		<div class="sliderkit-nav">
			<div class="sliderkit-nav-clip">
				<ul>
					<li id="ima"><a href="#" onmouseover="javascript:showMe('pomme','showBranche')" onmouseout=" javascript:hideMe('pomme','showBranche')" onclick="javascript:blockMe('pomme','showBranche');" title="pomme"><img src="images/transpa.png" alt="pomme" /></a>
					</li>
				</ul>
			</div>
			<div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-prev"><a href="#" title="Défiler à gauche"><span>Previous</span></a></div>
			<div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-next"><a href="#" title="Défiler à droite"><span>Next</span></a></div>
		</div>
	</div>
</div>
</div>
<div id="affich_branches">
<div id="visu_branches">
<div id="showBranche">
	<img src="images/branches/pomme.png"  alt="" id="pomme" style="display:none;"/>
</div>
<div id="showName"> </div>
</div>
</div>


Pages CSS : 

/*
 *  PLUGIN BASICS
 *  ------------------------------------------------
 */
.sliderkit{display:none;position:relative;overflow:hidden;text-align:left;}
.sliderkit a,
.sliderkit a:hover{text-decoration:none; visibility: visible;}
.sliderkit a:hover img{text-decoration:none;visibility: hidden;}
.sliderkit a:focus{outline:1px dotted #000;/*optional*/}
.sliderkit img{border:0; width: 28px; height:105px;}

/*---------------------------------
 *  Navigation
 *---------------------------------*/
.sliderkit .sliderkit-nav{z-index:10;position:absolute;text-align:center;}

/* Nav > Clip */
.sliderkit .sliderkit-nav-clip{position:relative;overflow:hidden;margin:0 auto;}
.sliderkit .sliderkit-nav-clip ul{position:relative;z-index:30;left:0;top:-1px;list-style:none;margin:0;padding:0; height: 105px; background-repeat:no-repeat; background-image:url(../images/branches.png);}
.sliderkit .sliderkit-nav-clip ul li{float:left;}
.sliderkit .sliderkit-nav-clip ul li a{display:block;overflow:hidden;}

/*---------------------------------
 *  Buttons
 *---------------------------------*/
.sliderkit .sliderkit-btn{z-index:10;}

/*---------------------------------
 *  Panels
 *---------------------------------*/
.sliderkit .sliderkit-panel{z-index:1;position:absolute;overflow:hidden;}
.sliderkit .sliderkit-panel-active{z-index:5;}
.sliderkit .sliderkit-panel-old{z-index:4;}

/* Panels > Overlay */
.sliderkit .sliderkit-panel .sliderkit-panel-textbox{position:absolute;z-index:1;}
.sliderkit .sliderkit-panel .sliderkit-panel-text{position:absolute;z-index:3;top:0;left:0;}
.sliderkit .sliderkit-panel .sliderkit-panel-overlay{position:absolute;z-index:2;top:0;left:0;}

/*---------------------------------
 *  Counter
 *---------------------------------*/
.sliderkit .sliderkit-count{position:absolute;top:5px;right:5px;z-index:10;padding:5px;color:#fff;background:#000;}

/*---------------------------------
 *  Loader
 *---------------------------------*/
.sliderkit .sliderkit-timer{position:absolute;top:0;left:0;z-index:10;height:3px;background:#ccc;}



/*
 *  CAROUSEL
 *  ------------------------------------------------
 */
 /*---------------------------------
 *  Carousel > Demo #1
 *---------------------------------*/
.carousel-demo1{width:632px;height:105px;}

/* Navbar */
.carousel-demo1 .sliderkit-nav{left:0;bottom:0;width:640px;height:105px;padding:10px;background:#ccc;}
.carousel-demo1 .sliderkit-nav-clip ul li{float:left;margin:0 5px 0 0;}
.carousel-demo1 .sliderkit-nav-clip ul li a{display:block;width:50px;height:105px;overflow:hidden;margin:0;opacity:0.8;}
.carousel-demo1 .sliderkit-nav-clip ul li a:hover{opacity:1;}

/* Buttons */
.carousel-demo1 .sliderkit-nav .sliderkit-nav-btn{position:absolute;top:0;}
.carousel-demo1 .sliderkit-nav .sliderkit-nav-btn span{display:none;}
.carousel-demo1 .sliderkit-nav .sliderkit-nav-btn a{display:block;width:15px;height:84px;background:transparent url("../images/arrows-h.png") no-repeat center 0;}
.carousel-demo1 .sliderkit-nav .sliderkit-nav-prev{left:20px;}
.carousel-demo1 .sliderkit-nav .sliderkit-nav-next{right:20px;}
.carousel-demo1 .sliderkit-nav .sliderkit-nav-prev a{background-position:-89px center;}
.carousel-demo1 .sliderkit-nav .sliderkit-nav-next a{background-position:-108px center;}
.carousel-demo1 .sliderkit-nav .sliderkit-nav-prev a:hover,
.carousel-demo1 .sliderkit-nav .sliderkit-nav-prev a:focus{background-position:-126px center;}
.carousel-demo1 .sliderkit-nav .sliderkit-nav-next a:hover,
.carousel-demo1 .sliderkit-nav .sliderkit-nav-next a:focus{background-position:-145px center;}

/* Buttons > Disable */
.carousel-demo1 .sliderkit-btn-disable{opacity:0.3/*can be set to any value until 1*/;cursor:default;}


/*---------------------------------
 *  Carousel > Continuous
 *---------------------------------*/
.carousel-continuous{width:632px;height:105px;}

/* Navbar */
.carousel-continuous .sliderkit-nav{left:0;bottom:0;width:640px;height:105px;}
.carousel-continuous .sliderkit-nav-clip ul li{float:left; width:42px; margin:0 4px 0 0;}
.carousel-continuous .sliderkit-nav-clip ul li a{display:block; width:50px;height:105px;overflow:hidden;margin:0;opacity:0.8;}

/* Navbar buttons */
.carousel-continuous .sliderkit-nav .sliderkit-nav-btn{position:absolute;top:4px; background-color:#979ca0;}
.carousel-continuous .sliderkit-nav .sliderkit-nav-btn span{display:none;}
.carousel-continuous .sliderkit-nav .sliderkit-nav-btn a{display:block;width:15px;height:97px;background:transparent url("../images/arrows-h.png") no-repeat center 0;}
.carousel-continuous .sliderkit-nav .sliderkit-nav-prev{left:8px;}
.carousel-continuous .sliderkit-nav .sliderkit-nav-next{right:8px;}
.carousel-continuous .sliderkit-nav .sliderkit-nav-prev a{background-position:-89px center;}
.carousel-continuous .sliderkit-nav .sliderkit-nav-next a{background-position:-108px center;}
.carousel-continuous .sliderkit-nav .sliderkit-nav-prev a:hover,
.carousel-continuous .sliderkit-nav .sliderkit-nav-prev a:focus{background-position:-126px center;}
.carousel-continuous .sliderkit-nav .sliderkit-nav-next a:hover,
.carousel-continuous .sliderkit-nav .sliderkit-nav-next a:focus{background-position:-145px center;}

/* Buttons > Disable */
.carousel-continuous .sliderkit-nav .sliderkit-btn-disable{opacity:0.3/*can be set to any value until 1*/;cursor:default;}


Merci a vous si quelqu'un pourrait m'aidez.
Sujet clos
Aller à