ok pour la page en ligne, ce n'est pas possible le site est sous wordpress et il est en maintenance car je ne l'ai pas encore livré avec tous ces soucis.
voici le le code html ( j'ai mis tout le code de la page, car il y a peut être des scripts qui sont en contradiction avec ce que j'essaie de faire!) les scripts sont natif au template de base, j'ai modifié toute la structure et le design.
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-responsive.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/colors/default.css">
<link rel="stylesheet" type="text/css" href="css/sliders/elastic-image.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<script src="js/jquery.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jMenu.jquery.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/mobile-map.js"></script>
<script src="js/jquery.eislideshow.js"></script>
<script src="js/jquery.ui.totop.js"></script>
<script src="js/mobile-menu.js"></script>
<script src="js/jquery.tweet.js"></script>
<script src="js/jquery.quote_rotator.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$('#ei-slider').eislideshow({
animation : 'center',
autoplay : true,
slideshow_interval : 3000,
titlesFactor : 0
});
$().UItoTop({ easingType: 'easeOutQuart' });
$("#jMenu").jMenu();
$('ul#quotes').quote_rotator();
$('#menu').mobileMenu();
$("#google_map").fitMaps( {w: '100%', h:'370px'} );
jQuery("ul.accordion li").each(function(){
if(jQuery(this).index() > 0){
jQuery(this).children(".accordion-content").css('display','none');
}
else{
jQuery(this).find(".accordion-head-image").addClass('active');
}
jQuery(this).children(".accordion-head").bind("click", function(){
jQuery(this).children().addClass(function(){
if(jQuery(this).hasClass("active")) return "";
return "active";
});
jQuery(this).siblings(".accordion-content").slideDown();
jQuery(this).parent().siblings("li").children(".accordion-content").slideUp();
jQuery(this).parent().siblings("li").find(".active").removeClass("active");
});
});
});
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>
<body>
<div class="container-fluid" id="equalize">
<div class="row-fluid">
<div class="span3">
<div id="vert_nav">
<div id="menu" >
<div class="navbar heightmenu paddingtop">
<div class="navbar-wrap">
<ul id="jMenu">
<li><a class="fNiv active" href="realisations.html">Types de Réalisations</a></li>
<li><a class="fNiv " href="maintenance_piscine.html">Maintenance</a>
</li>
<li><a class="fNiv " href="renovation_piscine.html">Rénovation</a>
</li>
<li><a class="fNiv " href="autour_piscine.html">Autour de la piscine</a>
</li>
<li><a class="fNiv " href="charte.html">charte</a>
</li>
<li><a class="fNiv " href="contact_infinity.html">Contact</a></li>
</ul>
</div>
</div>
</div>
<!-- end menu -->
</div>
</div>
<div class="span9 container-fluid noMargin">
<div class="row-fluid">
<div class="span12">
<div id="page_heading">
<!-- <h2 class="page_heading_text">This is <span class="standout_text">Kalypso</span> a modern HTML template.<br> Turn your website into something beautiful.</h2>-->
<a href="index.html"><img src="images/logo.png" width="300" height="137" alt="infinity piscines toulouse"></a>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12 centered">
<div class="footer_icons">
<ul>
<li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('facebook','','images/social/facebook_hover.png',1)"><img src="images/social/facebook-black.png" name="facebook" width="33" height="33" border="0"></a></li>
<li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('twitter infinity piscine','','images/social/twitter_hover.png',1)"><img src="images/social/twitter-black.png" name="twitter infinity piscine" width="33" height="33" border="0"></a></li>
<li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('printerest','','images/social/pinterest_hover.png',1)"><img src="images/social/pinterest-black.png" name="printerest" width="33" height="33" border="0"></a></li>
<li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('google+','','images/social/gplus-hover.png',1)"><img src="images/social/gplus-black.png" name="google+" width="33" height="33" border="0"></a></li>
</ul>
</div>
</div>
</div>
<div class="row-fluid backgroundcolor">
<div class="span12">
<div id="panels" class="container-fluid ">
<div class="row-fluid"><div class="span12"></div><h3>Types de réalisations</h3> <hr></div>
<div class="row-fluid">
<div class="span4 view view-first"><!--span3-->
<div class="panel_wrap">
<a href="piscines_xs.html"><img src="images/piscines_xs.jpg" alt="piscines xs 31 toulouse"></a>
<div class="mask">
<p>un atout pour les petits espaces</p>
<a class="info" href="piscines_xs.html">En savoir +</a></div>
</div>
</div>
<div class="span4 view view-first">
<div class="panel_wrap">
<a href="piscines_toulouse.html"><img src="images/piscines_classiques.jpg" alt="piscines classiques 31 toulouse"></a>
<div class="mask">
<p>la piscine pour tous</p>
<a class="info" href="piscines_toulouse.html">En savoir +</a>
</div>
</div>
</div>
<div class="span4 view view-first">
<div class="panel_wrap">
<a href="piscines_effets.html"><img src="images/piscines_miroir.jpg" alt="piscines miroir toulouse"></a>
<div class="mask">
<p>une piscine unique</p>
<a class="info" href="piscines_effets.html">En savoir +</a>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br></p>
</div>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div id="footer">
<h6 class="after_footer">© 2013 Infinity Piscines - 12 Avenue de la Gloire 31300 Rieux-Volvestre - creation <a href="http://www.doodee.com" target="_blank">Doodee</a></h6>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
et voici la css du menu
#vert_nav {
background: url("../images/menu.png") repeat scroll 0 0 transparent;
/*height: 100%;*/
padding: 0 10px;
}
[/i][/i][/i][/i][/i][/i]
