28172 sujets

CSS et mise en forme, CSS3

Bonjour
je fais appel à vos connaissances pour m'aider à paramétrer un menu.
J'aurais aimé modifier l'onglet de la page active :
que celui ci soit en gris foncé avec le petit coeur.
je sais que pour cela je doit utiliser .current mais après plusieurs test rien ne fonctionne.
l'onglet se referme à chaque fois.
Merci de m'accorder un peu de votre temps pour m'aider à solutionner ce problème.

voici le lien du site en cour :


voici mon code css:
body{
font-size:0.85em;
font-family:Verdana, Arial, Helvetica, sans-serif;

}

 .kwicks {  
     list-style: none;  
     position: relative;  
     margin: 0;  
     padding: 0; 
	 background-image:url(no_flicker.jpg); /*some browsers are to slow when aligning the menu items via jQuery and so the background shines through, this prevents this flickering*/

 }  
 .kwicks li{  
 
    display: block;  
    overflow: hidden;  
    padding: 0;  
    cursor: pointer;  
	float: left;
	width: 125px;
	height: 40px;
	margin-right: 0px;
	background-image:url(kwicks_sprite.jpg);
	background-repeat:no-repeat;
	
}

.kwicks a{
	display:block;
	height:40px;
	text-indent:-9999px;
	outline:none;
}
	


#kwick1 {

	background-position:0px 0px;
}

#kwick2 {
	background-position:-200px 0px;
}
#kwick3 {
	background-position:-400px 0px;
}
#kwick4 { 
	background-position:-600px 0px;
}
#kwick5 { 
	background-position:-800px 0px;
}

#kwick1.active, #kwick1:hover {
	background-position: 0 bottom;		
}

#kwick2.active, #kwick2:hover {
	background-position: -200px bottom;
}
#kwick3.active, #kwick3:hover {
	background-position: -400px bottom;
}
#kwick4.active, #kwick4:hover {
	background-position: -600px bottom; 
}
#kwick5.active, #kwick5:hover {
	background-position: -800px bottom; 
}


#kwick1 a{
	background-image:url(end.jpg);
	background-repeat:no-repeat;
	background-position: left 0px;
}

#kwick1 a:hover{
	background-position: left -80px;
}

#kwick5 a{
	background-image:url(end.jpg);
	background-repeat:no-repeat;
	background-position: right -40px;
}
#kwick5 a:hover{
	background-position: right -120px;
}
Bonjour,

Rajouter une classe "current" ou "tartiflette" ne suffit pas. Il faut encore que le reste de ton code tienne compte de cette classe.

En l'occurrence, vu que tu utilises un script de menu qui gère une grande partie de l'affichage des éléments de ton menu, il faudrait vérifier si ce script propose un mécanisme pour marquer visuellement la rubrique en cours à l'affichage de la page. Bref, il va falloir lire la doc. Smiley smile
j'aime bien les tartiflettes Smiley smile

mais pourtant j'ai trouvé comme info concernant mon problème à ce menu ceci :

ajouter

"a.current { background-position:0 -40px; }"

sauf que je ne sait pas ou le rajouter...
Cette ligne là est à rajouter dans ton code CSS.
Et dans le code HTML il faut que le lien correspondant à la page ou rubrique en cours porte la classe "current" pour que la déclaration CSS s'applique, bien sûr.
merci je comprend la théorie mais la pratique ... Smiley decu
après plus de 4h de recherche et de tests, pouvez vous me dire a quelle endroit dans mon css je dois placer :

a.current { background-position:0 -40px; }


en vous remerciant,
Modérateur
Salut Belinda,

Suivant ce que j'ai compris, tu vas éditer ton menu dans une page (accueil par exemple) pour que le lien soit comme ceci :


<ul class="kwicks">
                 <li id="kwick1"><a href="index.html" class="current">Accueil</a></li>
                 <li id="kwick2"><a href="recettes.html">Recettes</a></li>
                 <li id="kwick3"><a href="galerie.html">Galerie</a></li>
                 <li id="kwick4"><a href="contact.html">Contact</a></li>
                 <li id="kwick5"><a href="Liens">Liens</a></li>
</ul>


Dans ton css, tu vas éditer cela :

a.current { background-position:0 -40px;width:200px; /*voir le coeur !!! */ }


J'ai l'impression que tu t'es emmêlée les pinceaux dans ton sprite/css. Je me demande si le "background-position:0 -40px" du .current indique la position d'une image ?

Mis à part ton soucis, je vois que tu as fait une mise en page tableau. Or de nos jours cette technique est largement obsolète. Je t'invite à lire ou à relire ce tuto -> Construire un site sans tableaux

Aussi : In tartiflette, we trust !!! XD

bon dimanche
Modifié par niuxe (05 Feb 2012 - 05:04)
Modérateur
Je me répond à moi même :

En regardant un peu mieux le code source, on voit la class active sur le li. Je ne sais pas si le current est la bonne solution. Le sprite a l'air être fait correctement, mais c'est l'élément "li" qui détermine la position du sprite (coeur). Là je viens de virer le js et en faisant de trois manip (simulant la class active) on obtient à peu de choses près le résultat escompté.

Une chose est sûr, c'est que la css n'est pas complète. "Il n'y a pas" la gestion du hover.
bonjour niuxe,
merci pour tes conseils, mais bon je fais comment moi ?
je ne comprend pas pourquoi tu dis que mon css n'a pas la gestion du hover,
ceci n'est pas suffisant ? :

#kwick1.active, #kwick1:hover { 
background-position: 0 bottom;		
} 
#kwick2.active, #kwick2:hover {
	background-position: -200px bottom;
}
#kwick3.active, #kwick3:hover {
	background-position: -400px bottom;
}
#kwick4.active, #kwick4:hover {
	background-position: -600px bottom; 
}
#kwick5.active, #kwick5:hover {
	background-position: -800px bottom; 
}


j'en peux peux plus de ce menu, ça n'avait l'air pas si compliqué pourtant...
je me suis embrouillée les pinceaux en effet et ça desembrouille pas.
re moi,
en "stimulant" la classe active l'onglet se met bien en gris fonçé,
par contre dés que je passe ma souris sur le menu, ça s’enlève et reviens au menu de base...
vais je y arriver ?
bellinda a écrit :
par contre dés que je passe ma souris sur le menu, ça s’enlève et reviens au menu de base...

Le script JavaScript que tu utilises pour certains effets de ton menu n'a pas l'air compatible avec ce que tu veux faire. Ou bien il est compatible et dans ce cas il faut suivre très précisément les recommandations données à ce sujet dans la documentation du script.

Essayer de combiner à la fois un code personnalisé et un script dont tu ne maitrises pas le fonctionnement, c'est plus que casse-gueule.

bellinda a écrit :
vais je y arriver ?

Si le script que tu utilises a une fonctionnalité conçue pour faire ce que tu veux, et que dans ce cas tu appliques ce que dit la documentation du script, oui.
Autrement, non.
j'ai réussi ça marche! merci à vous tous pour votre aide Smiley smile
j'ai pas fait dans la légèreté mais c’est bon ! comme la tartiflette
Modérateur
bellinda a écrit :
re moi,
en &quot;stimulant&quot; la classe active l'onglet se met bien en gris fonçé,
par contre dés que je passe ma souris sur le menu, ça s’enlève et reviens au menu de base...
vais je y arriver ?


Ce qui est d'ailleurs très logique. J'avais pas pensé à ce comportement.... Il y a trois/quatre solutions pour résoudre ton souci. Une qui est nettement plus ardu mais plus propre puisque le plugin ne gère pas apparemment la position current à moins de voir le paramètre sticky....

1ere solution :
rééditer dans le code du plugin et s'il y a la classe current sur l'élément li, ne pas agir. C'est la raison pour laquelle il faille toujours connaître ce que l'on télécharge depuis un site. Avoir une solution toute prête c'est bien, savoir comment ça fonctionne c'est mieux.

2e solution (la plus simple à mettre en place et pas trop mal, finalement) :
virer l'identifiant de la page "active" et mettre une classe current. Reprendre tous les styles du hover.

3e solution :
voir si le comportement du paramètre sticky te convient

4e solution (qui pour ma part c'est bof bof mais envisageable) :
définir à la volé les paramètres du plugin. Les paramètres s'initialiseront à chaque événements sur le menu. c'est pas terrible mais ça devrait fonctionner.

Mon commentaire à propos de ce plugin. Il est pas mal, mais il ne convient pas pour un simple menu.
Modifié par niuxe (05 Feb 2012 - 18:27)