Laisser le :hover activer apres click

Question

tibewww

25 Jul 2012 à 18:47

Bonjour a tous,

voila je suis sur le point de m'arracher les cheveux, ca fait 2 jours que j'essais tant bien que mal de laisser le background de chaque item de mon menu en couleur fixe apres un click. J'ai beau chercher la solution sur le net, je n'y arrive pas, d'ou ce post . . .

Je m'explique plus clairement:

j'aimerais qu'apres qu'au passage de la souris, le background change de couleur de chaque sous categories, et qu'apres avoir clique sur l'une d'entre elle, le changement de couleur reste ! Pour le moment je nai'que le hover au survol fonctionnant . . .

Si jamais ca pous vous aider, voici la partie du code:

<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>

les sous categores sont celles-ci:

<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>

Mon CSS (enfin la partie qui correspond):


#menu {
	margin-bottom: 20px;
	width:120px;
 }

#menu .onglet {
		display:block;
	font-weight:normal;
	font-size:16px;
	margin-top:15px;
	
}

#menu .onglet:hover{
	background-color:red;
}

#contenu {
	background-color: #1b1b1b;
	margin-top:-210px;
	margin-left:150px;
	width:500px;
	height:250px;
	font-size:14px;
}

Je vous remercie vraiment pour tout par avance, ca m'enleverait uen grosse epine du pied !!

Axiuss

26 Jul 2012 à 00:24

Salut,

Pour moi, je pense que le plus simple est d'utiliser une classe css. Exemple en jQuery :

$( menu_hover ).bind( 'click' , function(){
$( menu_hover ).removeClass( class_css_hover );
$( this ).addClass( class_css_hover );
} );

Lorsque tu as un évènement 'click', tu supprimes toutes les class portant un certain nom sur tes éléments. Puis tu ajoutes à l'élément en cours (this) la class pour le background fixe.

;)
Greg

tibewww

26 Jul 2012 à 00:36

Hmm Merci pour tes conseils Smiley smile

Veux tu donc dire que je rqjoute en css une class

"class_css_hover"

ce qui donneraisce code:


    <script type="text/javascript">
$( "menu .onglet:hover" ).bind( 'click' , function(){
$( "menu .onglet:hover" ).removeClass( "class_css_hover" );
$( this ).addClass( "class_css_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>

Si oui ca ne fonctionne pas Smiley decu

, la partie en dessous correspond au bloc que le lien affiche, si . . ( qui fonctionne parfaitement)

Je debute en jquery donc desole si ma question est anodine, pourrais tu m'expliquer plus facilement ?

Je te remercis pour ta reponse en tous cas Smiley smile

Modifié par tibewww (26 Jul 2012 - 00:36)

SBoudrias

26 Jul 2012 à 05:50

Salut,

essaie sans `:hover`.

Axiuss

26 Jul 2012 à 12:15

Comme dit Vaxilart, sans le hover, et avec le ; final :

    // Sans :hover
    $( "menu .onglet" ).bind( 'click' , function(){
        // Sans :hover
        $( "menu .onglet" ).removeClass( "class_css_hover" );
        $( this ).addClass( "class_css_hover" );
    } );
    // N'oublies pas le ; final

tibewww

26 Jul 2012 à 13:05

arff, j'essais et toujours pas . . . .

j'ai rajoute la clas suivante dans mon css: # class_css_hover auquel jai rajouter un background color:red ( cf le code suivant)


#menu {
	margin-bottom: 20px;
	width:120px;
 }
 

 #class_css_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;
}

Puis j'ai mis le code jquery sans le hover:

  <script type="text/javascript">
// Sans :hover
    $( "menu_.onglet" ).bind( 'click' , function(){
        // Sans :hover
        $( "menu_.onglet" ).removeClass( "class_css_hover" );
        $( this ).addClass( "class_css_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>

dans la class: class_ccss_hover, dois ajouter les _ dans la fiche de style css ou non ? d'ou peut venir le probleme ? desole d'etre un peu lourd, c'est jsute la derniere etape afin que le site sot termine a 100%, 3 semaines de boulot la dessus donc j'aimerias le voir termier au plus vite, ca me rend fou de bloquer la dessus !

Merci a tous

Gothor

26 Jul 2012 à 13:43

Bonjour, tu te trompes dans tes sélecteurs css...

#class_css_hover sélectionne un élément dont l'id est class_css_hover, si tu veux sélectionner des éléments en fonction de leur classe, tu dois utiliser .class_css_hover

Et c'est quoi ces menu_ dans ton code jQuery ?
Modifié par Gothor (26 Jul 2012 - 13:44)

tibewww

26 Jul 2012 à 14:15

Merci, je devrais donc mettre #menu .onglet:hover a la place du class_css_hover ?
#menu .onglet (la classe onglet) etant le menu sur lequel ca doit agir.

ce qui donne dans ma fiche css:


#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;
}

et le jquery:

<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>

Ca ne marche toujours pas Smiley decu

le reste du code est le bloc qui s'affiche une fois cliquer sur le lien . . .

je vais essayer de mettre tout le code en ligne si ca peut aider . . .

Gothor

26 Jul 2012 à 14:24

Bonjour,
Comprends-tu ce que tu fais ? =D
Connais-tu un peu les sélecteurs CSS et le JavaScript (et éventuellement jQuery) ?

tibewww

26 Jul 2012 à 14:30

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&amp;source=s_q&amp;hl=en&amp;geocode=&amp;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&amp;sll=31.233587,121.491875&amp;sspn=0.002115,0.003449&amp;brcurrent=3,0x0:0x0,0&amp;ie=UTF8&amp;hq=&amp;hnear=China+Shanghai+Huang+Pu+Qu+Zhong+Shan+Dong+Yi+Lu+3%E5%8F%B7&amp;ll=31.235316,121.49158&amp;spn=0.007981,0.020471&amp;z=16&amp;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]

tibewww

26 Jul 2012 à 14:31

c'est la premiere fois que j'utilise jquery d'ou toutes les difficultes . . hehe

Gothor

26 Jul 2012 à 14:32

Bonjour,

C'est normal le fichier CSS dans le html comme ça ?
C'est pas très bien indenté et me semble un brin illisible...

tibewww

26 Jul 2012 à 14:41

pardon, probleme lorsque jai poste le message,

le fichier css est bien separe dans une autre fiche ( style2.css)

la voici:


@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; 
	}

je serais vraiment reconnaissant de ton aide
Modifié par tibewww (26 Jul 2012 - 14:42)

Gothor

26 Jul 2012 à 14:48

Le code d'Axiuss était correct, si ce n'est que tu n'as pas d'élément menu mais une div d'id menu, du coup, il faudrait remplacer dans les secteurs de son code les "menu" par des "#menu" et ajouter dans ton css le code pour styliser les éléments de la classe "class_css_hover" en écrivant :

.class_css_hover {
    /* Tes propriétés */
    background : red;
}

Tu devrais tenter d'apprendre les bases de CSS, JavaScript et jQuery.
Modifié par Gothor (26 Jul 2012 - 14:49)

tibewww

26 Jul 2012 à 15:16

c'est ce que j'essais de faire mais c'est pas evident pour le moment Smiley smile

merci des explications,

la classe fonctionne plus ou loins . . .enfin le background change au survol mais une fois que je clique ca ne reste pas Smiley decu

j'essais encore de trifouiller . . .

tibewww

26 Jul 2012 à 16:09

j'ai ajoute ce code dans le jquery:

 <script type="text/javascript">
$( "# menu.onglet" ).bind( 'click' , function(){
        // Sans :hover
        $( "#menu .onglet" ).removeClass( ".class_css_hover" );
        $( this ).addClass( ".class_css_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>

ainsi que celui ci dans la feuille css

.class_css_hover {
    /* Tes propriétés */
    background : red;
}

et ca ne marche pas . . .

j'ai egalement essayer en changeant

par

.onglet:hover {
    /* Tes propriétés */
    background : red;
}

et d'autres variantes toujours pas Smiley decu

Gothor

26 Jul 2012 à 16:11

Tu t'es trompé dans le premier sélecteur, tu as mis "# menu.onglet" au lieu de "#menu .onglet".

Ah, et pourquoi pas essayer d'apprendre au lieu de bidouiller au hasard en priant ? Ca t'aiderait sûrement...
http://www.yoyodesign.org/doc/w3c/css2/selector.html
Modifié par Gothor (26 Jul 2012 - 16:12)

tibewww

28 Jul 2012 à 14:37

Merci de ton aide, j'ai essaye mais je n'y suis toujours pas parvenu, je vais donc m'y plonger et j'esperes trouver la solution !

Une derniere question, lorsque je met mon site en ligne, jquery ne se lance pas . . .j'ai pourtant verifier tous les chemisn d'acces et tout correspond parfaitement . . . juste ma class avec le titre , le logo et le footer s'affiche, tout le menu et le background qui utilise jquery ne se lance pas . .. alors qu'en local tout fonctionne parfaitement

tu as une solution pour ca ??

ici le lien:

http://thibault-rolando.com/pascal/index.html

je te remercis pour ton temps
Modifié par tibewww (28 Jul 2012 - 14:38)

Sujet clos