ici tout mon code ( c'est un peu le bordel je l'admet . . . )
<!DOCTYPE html>
<html lang="en">
<head>
<title>House Of Wine - Shanghai</title>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:regular,bold" rel="stylesheet" type="text/css" />
<link href="css/jquery.lightbox-0.5.css" rel="stylesheet" type="text/css" media="screen">
<link href="css/gallery.css" rel="stylesheet" type="text/css">
<link href="css/calendarview.css?v3.1.109" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<style type="text/css">
.form-label{
width:150px !important;
}
.form-label-left{
width:150px !important;
}
.form-line{
padding:0px;
}
.form-label-right{
width:150px !important;
}
.form-all{
width:360px;
background:transparent;
font-family:Verdana;
font-size:12px;
padding-bottom: 30px;
}
</style>
<link href="css/jquery.jscrollpane.css" rel="stylesheet" type="text/css" media="screen">
<link href="css/style2.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-23718236-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script src="js/jquery.validationEngine-en.js" type="text/javascript"></script>
<script src="js/jquery.validationEngine.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
// SUCCESS AJAX CALL, replace "success: false," by: success : function() { callSuccessFunction() },
$("#form1").validationEngine({
ajaxSubmit: true,
ajaxSubmitFile: "ajaxSubmit.php",
ajaxSubmitMessage: "Thank you, We will contact you soon !",
success : false,
failure : function() {}
})
});
</script>
<script type="text/javascript">
// Sans :hover
$( "menu_.onglet" ).bind( 'click' , function(){
// Sans :hover
$( "menu_.onglet" ).removeClass( "menu .onglet:hover" );
$( this ).addClass( "menu .onglet:hover" );
} );
//
function AfficheTexte(nom_du_bloc)
{
var id_du_bloc_a_ouvrir = "#bloc_" + nom_du_bloc;
$(".bloctexte:visible").slideUp(300, function() {
$(id_du_bloc_a_ouvrir).slideDown(600);
});
}
//]]>
</script>
<script>
$('.primary-nav li').hover(function(){
$(this).addClass('stay');
}, function(){
$(this).removeClass('stay');
});
</script>
</head>
<body>
<div id="ac_background" class="ac_background">
<img class="ac_bgimage" src="images/HOW.jpg"alt="Background"/>
<div class="ac_overlay"></div>
<div class="ac_loading"></div>
</div>
<div id="ac_content" class="ac_content">
<h1><span>Wine Bar & Live Music</span> House Of Wine</span></h1>
<div class="ac_menu">
<ul>
<li>
<a href="images/food.jpg">Food</a>
<div class="ac_subitem">
<span class="ac_close"></span>
<h2>Food</h2>
<ul>
<li>With a good bottle, nothing better than snacks, without forgetting our 1kg BeefRib and Special Seafood Platter !</li>
<br>
<div id="menu">
<a href="#" onclick="AfficheTexte('petitcreux'); return false;"class="onglet">Petit Creux</a>
<a href="#" onclick="AfficheTexte('mixtes'); return false;" class="onglet">Assiettes Mixtes</a>
<a href="#" onclick="AfficheTexte('deal'); return false;" class="onglet">Special Deal</a>
<a href="#" onclick="AfficheTexte('main'); return false;" class="onglet">Main Courses</a>
<a href="#" onclick="AfficheTexte('dessert'); return false;" class="onglet">Dessert</a>
<div style="clear: both;"></div>
</div>
<div id="contenu" <div class="scroll-pane">
<div id="bloc_petitcreux" class="bloctexte" style="display: block;">
<h3>Petit creux, ente 16 et 19h</h3><br>
Croque monsieur 1<br><br>
Wrap<br><br>
Liste 3<br><br>
Liste 4<br><br>
Liste 5<br><br>
Liste 6<br><br>
Liste 7<br><br>
Liste 8<br><br>
</div>
<div id="bloc_mixtes" class="bloctexte" style="display: none;">
<h3>Assiettes Mixtes</h3><br><br>
Plateau de charcuterie<br><br>
Plateau de fromages<br><br>
Tapas<br><br>
</div>
<div id="bloc_deal" class="bloctexte" style="display: none;">
<h3>Special Deals</h3><br><br>
1kg Beef Rib with French Fries<br><br>
Seafood Platter
</div>
<div id="bloc_main" class="bloctexte" style="display: none;">
<h3>Main Courses</h3><br><br>
Ribeye steak<br><br>
Seabass<br><br>
</div>
<div id="bloc_dessert" class="bloctexte" style="display: none;">
<h3>Our dessert</h3><br><br>
Moeulleux aux chocolat<br><br>
Lemon pie<br><br>
</div>
</div>
</ul>
<div id="menu">
<span>
<div id="gallery2">
<div id="img06"><a href="images/food/1.jpg" class="lightbox" title="Texte que tu veux"><img src="images/food/t1.jpg" width="100" height="67"/></a></div>
<div id="img07"><a href="images/food/2.jpg" class="lightbox" title="Texte que tu veux"><img src="images/food/t2.jpg" width="100" height="67"/></a></div>
<div id="img08"><a href="images/food/3.jpg" class="lightbox" title="Texte que tu veux"><img src="images/food/t3.jpg" width="100" height="67"/></a></div>
<div id="img09"><a href="images/food/4.jpg" class="lightbox" title="Texte que tu veux"><img src="images/food/t4.jpg" width="100" height="67"/></a></div>
</div><br><br>
</span>
</div>
</li>
<li>
<a href="images/Wines.jpg">Wines</a>
<div class="ac_subitem">
<span class="ac_close"></span>
<h2>Wines</h2>
<ul>
<li>The best selection of Wines, specially import from our typical productors from France</li>
<div id="menu2">
<a href="#" onclick="AfficheTexte('RedWines'); return false;" class="onglet">Red Wines</a>
<a href="#" onclick="AfficheTexte('WhiteWines'); return false;" class="onglet">White Wines</a>
<a href="#" onclick="AfficheTexte('Champagne'); return false;" class="onglet">Champagne</a>
<a href="#" onclick="AfficheTexte('Cocktails'); return false;" class="onglet">Cocktails</a>
<a href="#" onclick="AfficheTexte('liq'); return false;" class="onglet">Liquors & Others</a>
<div style="clear: both;"></div>
</div>
<div id="contenu2" <div class="scroll-pane">
<div id="bloc_RedWines" class="bloctexte" style="display: block;">
<h3>Red Wines</h3><br>
Liste<br><br>
Liste1<br><br>
Liste 3<br><br>
Liste 4<br><br>
Liste 5<br><br>
Liste 6<br><br>
Liste 7<br><br>
Liste 8<br><br>
</div>
<div id="bloc_WhiteWines" class="bloctexte" style="display: none;">
<h3>White Wines</h3><br><br>
Bouteille 1<br><br>
Bouteille 2<br><br>
Bouteille 3<br><br>
</div>
<div id="bloc_Champagne" class="bloctexte" style="display: none;">
<h3>Bubbly</h3><br><br>
Champagne <br><br>
SChampagne 2
</div>
<div id="bloc_Cocktails" class="bloctexte" style="display: none;">
<h3>Cocktails</h3><br><br>
Long Island<br><br>
Mojito <br><br>
Cosmopolitan
</div>
<div id="bloc_liq" class="bloctexte" style="display: none;">
<h3>Liquors & Others</h3><br><br>
Jack Daniels<br><br>
Absolute <br><br>
Tiger
</div>
</ul>
</div>
</li>
<li>
<a href="images/terrace.jpg">Events</a>
<div class="ac_subitem">
<span class="ac_close"></span>
<h2>Events</h2>
<ul class="gallery clearfix">
<li>Specials Deals and Live music, What else ?
<li>Tuesdays Latino & Gigolo</li>
<li>Acoustic Live</li>
<li>SThe Ladies Night</li>
<li>ROCK METAL ( Remember !)</li>
<li>2 for 1</li>
<li>A toi de voir [cligne]</li>
</ul>
</li>
<li>
<a href="images/gallerybg.jpg">Gallery</a>
<div class="ac_subitem">
<span class="ac_close"></span>
<div class="scroll-pane">
<h2>Our Place</h2>
<ul>
<li>Click on an image below to view a gallery of Our Place </li>
</ul>
<span>
<div id="gallery1">
<div id="img01"><a href="images/gallery/1.jpg" class="lightbox" title="Texte que tu veux"><img src="images/gallery/thumb1.jpg" width="100" height="67"/></a></div>
<div id="img02"><a href="images/gallery/2.jpg" class="lightbox" title="Texte que tu veux"><img src="images/gallery/thumb2.jpg" width="100" height="67"/></a></div>
<div id="img03"><a href="images/gallery/3.jpg" class="lightbox" title="Texte que tu veux"><img src="images/gallery/thumb3.jpg" width="100" height="67"/></a></div>
<div id="img04"><a href="images/gallery/4.jpg" class="lightbox" title="Texte que tu veux"><img src="images/gallery/thumb4.jpg" width="100" height="67"/></a></div>
<div id="img05"><a href="images/gallery/5.jpg" class="lightbox" title="Texte que tu veux"><img src="images/gallery/thumb5.jpg" width="67" height="100"/></a></div>
</div><br><br>
</span>
</div>
</div>
</li>
<li>
<a href="images/team.jpg">Team</a>
<div class="ac_subitem">
<span class="ac_close"></span>
<h2>Staff</h2>
<ul>
<li>Best Services, Best Team</li>
<div id="menu3">
<a href="#" onclick="AfficheTexte('pascal'); return false;" class="onglet">Pascal Ballot</a>
<a href="#" onclick="AfficheTexte('philippe'); return false;" class="onglet">Philippe Chabron</a>
<a href="#" onclick="AfficheTexte('florence'); return false;" class="onglet">Chef FLorence</a>
<a href="#" onclick="AfficheTexte('barman'); return false;" class="onglet">Barman</a>
<div style="clear: both;"></div>
</div>
<div id="contenu3">
<div id="bloc_pascal" class="bloctexte" style="display: block;">
<h3>Pascal Ballot</h3><br>
Ta description blablablabla<br><br>
<div id="gallery3">
<div id="img10"><a href="images/team/pascal4.jpg" class="lightbox" title="Pascal Ballot, Manager"><img src="images/team/pascalt.jpg" width="180" height="250"/></a></div>
</div>
</div>
<div id="bloc_philippe" class="bloctexte" style="display: none;">
<h3>Philippe Chabron</h3><br><br>
Ta description blablablabla<br><br>
<div id="img11"><a href="images/team/philippe3.jpg" class="lightbox" title="Philippe Chabron, Manager"><img src="images/team/philippet.jpg" width="180" height="250"/></a></div>
</div>
<div id="bloc_florence" class="bloctexte" style="display: none;">
<h3>Chef, FLorence</h3><br><br>
Ta description blablablabla<br><br>
<div id="img12"><a href="images/team/florence.jpg" class="lightbox" title="Our Chef, Florence"><img src="images/team/florencet.jpg" width="180" height="250"/></a></div>
</div>
<div id="bloc_barman" class="bloctexte" style="display: none;">
<h3>Barman</h3><br><br>
Ta description blablablabla<br><br>
<div id="img13"><a href="images/team/barman3.jpg" class="lightbox" title="Barman"><img src="images/team/barmant.jpg" width="180" height="250"/></a></div>
</ul>
</div>
</li>
<li>
<a href="images/bouteille.jpg">Contact</a>
<div class="ac_subitem">
<span class="ac_close"></span>
<h2>Contact</h2>
<ul>
<span id="pdr"><p>Private Booking Options are Available</p>
<p>Soiree entreprises, bla bla bla</p>
<div class="fb">
<p><span><a href="https://www.facebook.com/pages/House-of-Wine/115132625205985" target="_blank"><img src="images/fb.png" alt="Find us on Facebook!" width="150" height="150"></a></span> <br>
</div></span>
<br><p><strong><span>How is located at:</span></strong><br>
THREE ON THE BUND<br>
No.3 The Bund 3 Zhong Shan Dong Yi Road<br>
(Entrance at 17 Guang Dong Road)</p>
<p><strong><span>Our Phone Number is:</span></strong><br>
135.6484.3094</p>
<p><strong><span>Serving Dinner:</span></strong><br>
Mon-Thur: 4pm-10:00pm<br>
Fri-Sun: 6pm-11:30pm<br> </p>
<h3><a href="http://maps.google.com.hk/maps?f=q&source=s_q&hl=en&geocode=&q=%E4%B8%AD%E5%9B%BD%E4%B8%8A%E6%B5%B7%E5%B8%82%E9%BB%84%E6%B5%A6%E5%8C%BA%E5%A4%96%E6%BB%A9%E4%B8%89%E5%8F%B7&sll=31.233587,121.491875&sspn=0.002115,0.003449&brcurrent=3,0x0:0x0,0&ie=UTF8&hq=&hnear=China+Shanghai+Huang+Pu+Qu+Zhong+Shan+Dong+Yi+Lu+3%E5%8F%B7&ll=31.235316,121.49158&spn=0.007981,0.020471&z=16&output=embed" target="_blank">Click Here For Directions</a></strong></h3>
</ul>
<div id="wrapper">
<div id="form-div">
<form class="form" id="form1">
<p class="name">
<input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] text-input" id="name" value="My Name" />
<label for="name">Name</label>
</p>
<p class="email">
<input name="email" type="text" class="validate[required,custom[email]] text-input" id="email" value="email@email.com" />
<label for="email">E-mail</label>
</p>
<p class="web">
<input type="text" name="web" id="web" />
<label for="web">Subject</label>
</p>
<p class="text">
<textarea name="text" class="validate[required,length[6,300]] text-input" id="comment"> Write your Email</textarea>
</p>
<p class="submit">
<input type="submit" value="Send" />
</p>
</form>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="ac_footer">
<br><br> THREE ON THE BUND
No.3 The Bund 3 Zhong Shan Dong Yi Road
<a href="http://www.thibault-rolando.com/" target="_blank">Site Developed and Designed by Thibault Rolando </a></p>
</div>
<div id="logo"><img src="images/logo.png"></div>
<!-- The JavaScript -->
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
var $ac_background = $('#ac_background'),
$ac_bgimage = $ac_background.find('.ac_bgimage'),
$ac_loading = $ac_background.find('.ac_loading'),
$ac_content = $('#ac_content'),
$title = $ac_content.find('h1'),
$menu = $ac_content.find('.ac_menu'),
$mainNav = $menu.find('ul:first'),
$menuItems = $mainNav.children('li'),
totalItems = $menuItems.length,
$ItemImages = new Array();
/*
for this menu, we will preload all the images.
let's add all the image sources to an array,
including the bg image
*/
$menuItems.each(function(i) {
$ItemImages.push($(this).children('a:first').attr('href'));
});
$ItemImages.push($ac_bgimage.attr('src'));
var Menu = (function(){
var init = function() {
loadPage();
initWindowEvent();
},
loadPage = function() {
/*
1- loads the bg image and all the item images;
2- shows the bg image;
3- shows / slides out the menu;
4- shows the menu items;
5- initializes the menu items events
*/
$ac_loading.show();//show loading status image
$.when(loadImages()).done(function(){
$.when(showBGImage()).done(function(){
//hide the loading status image
$ac_loading.hide();
$.when(slideOutMenu()).done(function(){
$.when(toggleMenuItems('up')).done(function(){
initEventsSubMenu();
});
});
});
});
},
showBGImage = function() {
return $.Deferred(
function(dfd) {
//adjusts the dimensions of the image to fit the screen
adjustImageSize($ac_bgimage);
$ac_bgimage.fadeIn(1000, dfd.resolve);
}
).promise();
},
slideOutMenu = function() {
/* calculate new width for the menu */
var new_w = $(window).width() - $title.outerWidth(true);
return $.Deferred(
function(dfd) {
//slides out the menu
$menu.stop()
.animate({
width : new_w + 'px'
}, 700, dfd.resolve);
}
).promise();
},
/* shows / hides the menu items */
toggleMenuItems = function(dir) {
return $.Deferred(
function(dfd) {
/*
slides in / out the items.
different animation time for each one.
*/
$menuItems.each(function(i) {
var $el_title = $(this).children('a:first'),
marginTop, opacity, easing;
if(dir === 'up'){
marginTop = '0px';
opacity = 1;
easing = 'easeOutBack';
}
else if(dir === 'down'){
marginTop = '60px';
opacity = 0;
easing = 'easeInBack';
}
$el_title.stop()
.animate({
marginTop : marginTop,
opacity : opacity
}, 200 + i * 200 , easing, function(){
if(i === totalItems - 1)
dfd.resolve();
});
});
}
).promise();
},
initEventsSubMenu = function() {
$menuItems.each(function(i) {
var $item = $(this), // the <li>
$el_title = $item.children('a:first'),
el_image = $el_title.attr('href'),
$sub_menu = $item.find('.ac_subitem'),
$ac_close = $sub_menu.find('.ac_close');
/* user clicks one item : appetizers | main course | desserts | wines | specials */
$el_title.bind('click.Menu', function(e) {
$.when(toggleMenuItems('down')).done(function(){
openSubMenu($item, $sub_menu, el_image);
});
return false;
});
/* closes the submenu */
$ac_close.bind('click.Menu', function(e) {
closeSubMenu($sub_menu);
return false;
});
});
},
openSubMenu = function($item, $sub_menu, el_image) {
$sub_menu.stop()
.animate({
height : '400px',
marginTop : '-200px'
}, 400, function() {
//the bg image changes
showItemImage(el_image);
});
},
/* changes the background image */
showItemImage = function(source) {
//if its the current one return
if($ac_bgimage.attr('src') === source)
return false;
var $itemImage = $('<img src="'+source+'" alt="Background" class="ac_bgimage"/>');
$itemImage.insertBefore($ac_bgimage);
adjustImageSize($itemImage);
$ac_bgimage.fadeOut(1500, function() {
$(this).remove();
$ac_bgimage = $itemImage;
});
$itemImage.fadeIn(1500);
},
closeSubMenu = function($sub_menu) {
$sub_menu.stop()
.animate({
height : '0px',
marginTop : '0px'
}, 400, function() {
//show items
toggleMenuItems('up');
});
},
/*
on window resize, ajust the bg image dimentions,
and recalculate the menus width
*/
initWindowEvent = function() {
/* on window resize set the width for the menu */
$(window).bind('resize.Menu' , function(e) {
adjustImageSize($ac_bgimage);
/* calculate new width for the menu */
var new_w = $(window).width() - $title.outerWidth(true);
$menu.css('width', new_w + 'px');
});
},
/* makes an image "fullscreen" and centered */
adjustImageSize = function($img) {
var w_w = $(window).width(),
w_h = $(window).height(),
r_w = w_h / w_w,
i_w = $img.width(),
i_h = $img.height(),
r_i = i_h / i_w,
new_w,new_h,
new_left,new_top;
if(r_w > r_i){
new_h = w_h;
new_w = w_h / r_i;
}
else{
new_h = w_w * r_i;
new_w = w_w;
}
$img.css({
width : new_w + 'px',
height : new_h + 'px',
left : (w_w - new_w) / 2 + 'px',
top : (w_h - new_h) / 2 + 'px'
});
},
/* preloads a set of images */
loadImages = function() {
return $.Deferred(
function(dfd) {
var total_images = $ItemImages.length,
loaded = 0;
for(var i = 0; i < total_images; ++i){
$('<img/>').load(function() {
++loaded;
if(loaded === total_images)
dfd.resolve();
}).attr('src' , $ItemImages[i]);
}
}
).promise();
};
return {
init : init
};
})();
/*
call the init method of Menu
*/
Menu.init();
});
// Menu Hover
$(".ac_menu ul li a").hover(function(){
var s = $(this).children('span.bg');
s.stop().animate({
top: 0
},400,'easeOutCirc');
},function(){
var s = $(this).children('span.bg');
s.stop().animate({
top: '90px'
},400,'easeInCirc');
});
// drop_line
$("#drop_line").click(function(){
$(this).parent().slideUp('normal',function(){
$(this).prev().slideDown('normal',function(){
$(".page:visible").jScrollPane();
});
});
});
// Menu Hover
$(".ac_menu ul li a.menu").hover(function(){
var s = $(this).children('span.bg');
s.stop().animate({
top: 0
},400,'easeOutCirc');
},function(){
var s = $(this).children('span.bg');
s.stop().animate({
top: '90px'
},400,'easeInCirc');
});
</script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.min.js"></script>
<script type="text/javascript">
$(function() {
$('a.lightbox').lightBox();
});
</script>
<script src="js/protoplus.js" type="text/javascript"></script>
<script src="js/protoplus-ui.js" type="text/javascript"></script>
<script src="js/jotform.js" type="text/javascript"></script>
<script src="js/calendarview.js" type="text/javascript"></script>
<script type="text/javascript">
</script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
<script type="text/javascript">
$(function()
{
$('.scroll-pane').jScrollPane();
});
</script>
</body>
@import url('reset.css');
body{
background:#000;
color:#fff;
font-family: 'PT Sans Narrow', Arial, sans-serif;
text-transform:uppercase;
}
#logo img{
position:absolute;
height:90px;
width:325px;
top:0px;
left:350px;
padding:5px;
}
a{
color:#fff;
text-decoration:none;
}
img.ac_bgimage{
position:fixed;
left:0px;
top:0px;
width:100%;
opacity:0.8;
display:none;
}
.ac_overlay{
width:100%;
height:100%;
position:fixed;
top:0px;
left:0px;
background-color: transparent;
}
.ac_loading{
position:fixed;
top:10px;
right:10px;
background:#000 url(../images/loader.gif) no-repeat center center;
width:50px;
height:50px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px 10px 10px 10px;
z-index:999;
opacity:0.7;
display:none;
}
.ac_content{
position:fixed;
height:90px;
width:100%;
top:3%;
left:0px;
}
.ac_content h1{
display:block;
float:left;
width:90;
height:80px;
font-size:26px;
font-weight:bold;
line-height:20px;
margin-right:1px;
background:transparent url(../images/bg_menu.png) repeat top left;
background-repeat: repeat;
background-position: left top;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
}
.ac_content h1 span{
display:block;
font-weight:normal;
font-size:14px;
margin-top:10px;
}
.ac_menu{
background: url(../images/bg_menu.png) repeat top left;
float:left;
position:relative;
height:90px;
width:0px;
}
.ac_menu > ul{
float:right;
}
.ac_menu > ul > li{
float:left;
position:relative;
height:90px;
overflow:hidden;
left:-15%;
}
.ac_menu > ul > li > a{
margin-top:60px;
opacity:0;
display:block;
height:90px;
padding:0px 10px;
text-align:center;
line-height:90px;
outline:none;
font-size:18px;
font-weight:bold;
text-shadow:1px 1px 1px #000;
margin-left:5px;
}
.ac_menu > ul > li > a:hover{ /* TOP MENU BG HOVER*/
color:#fff;
background: #831643;
}
.ac_subitem{
width:1000px;
height:0px; /* animate to 400px */
top:50%;
right:0px;
margin-top:0px; /* animate to -200px */
position:fixed;
z-index:99;
overflow:hidden;
background:transparent url(../images/bg_menu.png) repeat top left;
opacity:0.85;
left:15%;
}
.ac_subitem h2{
font-size:22px;
font-weight:bold;
color:#fff;
padding: 40px 0px 0px 40px;
text-shadow:0px 0px 1px #000;
text-decoration:underline;
}
.ac_subitem ul{
padding:0px 40px;
}
.ac_subitem ul li{
margin:10px 0px;
}
.ac_subitem ul li:first-child{
text-transform:none;
border-bottom:1px dotted #333;
padding-bottom:15px;
margin-bottom:15px;
}
.ac_subitem ul li p a {
font-size: large;
}
.ac_subitem ul li a {
color: #CDA51F;
text-decoration: underline;
font-weight: bold;
font-size: 14px;
}
.ac_subitem ul li a:hover {
color: #CCC;
text-decoration: none;
}
span.ac_close{
float:right;
margin:10px;
width:44px;
height:12px;
cursor:pointer;
background:transparent url(../images/close.png) no-repeat top left;
opacity:0.4;
}
span.ac_close:hover{
opacity:1.0;
}
.ac_footer{
position:fixed;
bottom:0px;
left:0px;
width:100%;
background:#000;
opacity:0.9;
height:70px;
padding-bottom:5px;
padding-left: 15px;
padding-top: 5px;
}
.highlite01 {
color: #CDA51F;
}
.ac_footer a{
text-shadow:1px 1px 1px #000;
color:#fff;
float:right;
padding-top: 5px;
padding-right: 20px;
padding-bottom: 5px;
padding-left: 10px;
font-size: 14px;
}
.ac_footer a:hover {
color: #ddd;
text-decoration: none;
}
.footer a:hover{
color:#fff;
}
.ac_footer a span{
font-weight:bold;
}
.ac_footer a.ac_left{
float:left;
}
.ac_subitem p {
padding-right: 40px;
padding-left: 40px;
padding-top: 10px;
}
.ac_footer p span {
font-weight: bold;
color: #CDA51F;
margin-top: 5px;
}
.ac_subitem p span {
color: #bb1e5f; /* COLOR TECT CONTACT*/
}
.ac_subitem h3 {
padding-top: 10px;
padding-right: 40px;
padding-left: 40px;
font-size: large;
font-weight: bold;
}
.ac_footer #announce {
width: 350px;
margin-right: auto;
margin-left: auto;
margin-top: -50px;
color: #CDA51F;
font-size: 16px;
font-weight: bold;
}
.ac_subitem h3 a {
color: #CDA51F;
text-decoration: underline;
}
.ac_subitem h3 a:hover {
color: #DDD;
text-decoration: none;
margin-top:100px;
}
#pdr {
float: right;
width: 170px;
background-color: #333;
padding: 5px;
}
#pdr p {
padding-top: 5px;
padding-bottom: 5px;
padding-right: 2px;
padding-left: 2px;
}
.ac_subitem ul li ul li:second-child {
padding: none;
border: none;
}
.ac_footer p span a img {
display: inline-block;
float: left;
}
#wrapper {
margin:30px auto;
width:500px;
margin-top:-275px;
margin-left:365px;
}
input, textarea {
padding: 8px;
border: solid 1px #E5E5E5;
font: normal 12px Verdana, Tahoma, sans-serif;
width: 250px;
background: #FFFFFF url('form_background.png') left top repeat-x;/*Mimic Background Property in Internet Explorer since IE 6,7,8 does not support CSS3*/
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;/*0.1 actually means 10 %*/
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}
textarea {
width: 250px;
max-width: 400px;
height: 100px;
line-height: 150%;
}
#fb img{
float: right;
width: 170px;
background-color: #333;
padding: 5px;
margin-left:50px;
}
#drop_line{
color: #FFFFFF;
font-weight: bold;
line-height: 20px;
padding: 5px;
text-align: center;
width: 125px;
background: #CC9400;
}
#drop_line:hover{
background: auto;
}
#menu {
margin-bottom: 20px;
width:120px;
}
#menu .onglet:hover{
background-color:red;
}
#menu .onglet {
display:block;
font-weight:normal;
font-size:16px;
margin-top:15px;
}
#contenu {
background-color: #1b1b1b;
margin-top:-210px;
margin-left:150px;
width:500px;
height:250px;
font-size:14px;
}
#menu2 {
margin-top: 60px;
width:140px;
}
#menu2 .onglet {
display:block;
font-weight:normal;
font-size:16px;
margin-top:15px;
}
#contenu2 {
background-color: #1b1b1b;
margin-top:-200px;
margin-left:150px;
width:500px;
height:250px;
font-size:14px;
}
#menu3 {
margin-top: 60px;
width:140px;
}
#menu3 .onglet {
display:block;
font-weight:normal;
font-size:16px;
margin-top:15px;
}
#contenu3 {
background-color: #1b1b1b;
margin-top:-170px;
margin-left:180px;
width:700px;
height:250px;
font-size:14px;
}
.bloctexte {
padding: 10px;
}
</html>
suivi de ma fiche style
je voudrais donc que le .onglet (#menu .onglet dans la fiche de style) change donc de background-color au survol, une fois qu'on clique dessus, mon bloc avec son contenu apparait, et que le background color reste active.
[/i]