28221 sujets

CSS et mise en forme, CSS3

[Résolu] Roll over sur lien

Bonjour,

mon rollover sur mon menu ne fonctionne pas. JE mets le code, généralement il parle mieux ! Smiley cligne
En fait c'est le glissement d'image sur le a:hover qui bloque.

Magnéto:

<ul id="menu">
      <li><a href="news.php"  id="btnews"><span>News</span></a></li>
      <li><a href="bio.php" id="btbio"><span>Bio/Disco</span></a></li>
      <li><a href="shows.php" id="btshows"><span>Shows</span></a></li>
      <li><a href="media.php" id="btmedia"><span>Media</span></a></li>
      <li><a href="links.php" id="btlinks"><span>Links</span></a></li>
      <li><a href="guest.php" id="btguest"><span>Guestb.</span></a></li>
    </ul>



/*  MENU
--------------------------------------------------------------------------------
*/

ul#menu span {
  display: none ;
}

ul#menu {
  width: 700px ;
  height: 25px ;
  margin: 0 auto 0 auto ;
  padding: 0 ;
  list-style-type: none ;
}


ul#menu li {
  margin: 0 auto 0 auto ;
  height: 25px ;
  list-style: none ;
  pading: 0 ;
  float: left ;
  text-align: center;
}
ul#menu li a{
  height: 25px ;
  list-style: none ;
  display: block ;
 }

#btnews {
  width: 80px ;
  background: url(../Vintage/news.gif) no-repeat 0 0 ;
}

a#btnews a:hover{
  display: block ;
  width: 80px ;
  background: url(../Vintage/news.gif) no-repeat 0 -25px ;
}

#btbio {
  width: 110px ;
  background: url(../Vintage/bio.gif) no-repeat 0 0 ;
}

a#btbio a:hover{
  width: 110px ;
  background: url(../Vintage/media.gif) no-repeat 0 -25px ;
 }

#btmedia {
  width: 100px ;
  background: url(../Vintage/media.gif) no-repeat 0 0 ;
}

a#btmedia a:hover{
  width: 100px ;
  background: url(../Vintage/media.gif) no-repeat 0 -25px ;
 }


#btshows {
  width: 90px ;
  background: url(../Vintage/shows.gif) no-repeat 0 0 ;
}

a#btshows a:hover{
  width: 90px ;
  background: url(../Vintage/shows.gif) no-repeat 0 -25px ;
}

#btguest {
  width: 100px ;
  background: url(../Vintage/guest.gif) no-repeat 0 0 ;
}

a#btguest a:hover{
  width: 100px ;
  background: url(../Vintage/guest.gif) no-repeat 0 -25px ;
}

#btlinks {
  width: 90px ;
  background: url(../Vintage/links.gif) no-repeat 0 0 ;
}

a#btlinks a:hover
{
  width: 90px ;
  background: url(../Vintage/links.gif) no-repeat 0 -25px ;
}

Modifié le 04 Feb 2005 - 10:26
Une petite remarque :
tu devrais utiliser un doctype xhtml transitionnel parceque tu utilises target="_blank" ou mieux, ne pas utiliser target="_blank"

Autre remarque, ça serait pas mieux que tu renvois vers le tutoriels plutôt que de recopier le tutoriel dans ta feuille de style sans mentionner la source Smiley ohwell
Olivier a écrit :
Une petite remarque :
tu devrais utiliser un doctype xhtml transitionnel parceque tu utilises target="_blank" ou mieux, ne pas utiliser target="_blank"

Autre remarque, ça serait pas mieux que tu renvois vers le tutoriels plutôt que de recopier le tutoriel dans ta feuille de style sans mentionner la source Smiley ohwell


Pour les doctype, je suis dessus mais là je suis au boulot et je peux pas updater mon site. Du coup ça me fait penser que le lien au dessus est valide mais le style Vintage n'est pas à jour et du coup le visuel ne va pas aider beaucoup...oups la boulette Smiley sweatdrop

J'ai pas recopié le tut, je me suis inspiré du CSS de http://www.steinruckdesign.com/ avec une louche du dernier studio multimédia, certe une pincée d'alsacréation et un brin delmoustiko (si je n'écorche pas le nom). Après, est ce que sur mon site, quelqu'un va editer le CSS et la page...ça se discute. Le mieux étant de mettre des liens dans la section lien plutôt que dans le code mais c'est promis je mettrais dans mon code en commentaires tous les sites traitant du sujet sur lesquels j'aurais trouvé des éléments ayant fait avancé mon site. Smiley cligne

Merci pour tes remarques Smiley cligne
Modifié le 02 Feb 2005 - 18:43
Le lien qui mène à l'image est erroné, où l'image est absente du dossier "Zen".

ul#menu li a:hover
{
  background: url(../Zen/bg_menu1.gif) repeat-x 0 0 ;
  color: #FFF;
}

Modifié le 02 Feb 2005 - 19:00
Non non...c'est le style Vintage mais j'ai pu encore updater le site car je bosse ce soir....je reposte des que c'est updaté!
Voilà, j'ai updaté mon site ce matin.
Normalement j'ai mis le bon doctype et vous pouvez enfin vous faire une idée du soucis que je rencontre.
Merci d'avance pour vos commentaires...

Je remets le lien http://www.revivehxc.com/2005/
Ne pas oublier d'appliquer le style vintage Smiley cligne

Merci
Modifié le 03 Feb 2005 - 14:30
je dois sûrement avoir du mal à comprendre....

parce que quand je fait le rollover sur ton menu... l'image change pour que l'écriture en blanc apparaisse... (cé pas ca que tu veux faire?)
À mon avis il faut attribuer cette déclaration (et les autres) à l'élément <a>...*

#btnews [b][#blue]a[/#][/b] {
  width: 80px ;
  background: url(../Vintage/news.gif) no-repeat 0 0 ;
}

a#btnews a:hover{
  display: block ;
  width: 80px ;
  background: url(../Vintage/news.gif) no-repeat 0 -25px ;
}

Petite erreur (mauvaise image) :

#btbio {
  width: 110px ;
  background: url(../Vintage/bio.gif) no-repeat 0 0 ;
}
a#btbio a:hover{
  width: 110px ;
  background: url(../Vintage/[b][#red]media.gif[/#][/b]) no-repeat 0 -25px ;
 }


*[ Non ce n'est pas ça... je regarde en profondeur...]

Donc ici :

[b][#red]a#btnews a:hover[/b][/#]{
  display: block ;
  width: 80px ;
  background: url(../Vintage/news.gif) no-repeat 0 -25px ;
}

tu déclares : un élément a:hover à l'intérieur d'un élément <a id="btnews"> ce qui est impossible, un <a> ne pouvant contenir d'autres <a>...

Il faut assigner tes "id" aux <li>

<ul id="menu">
   <li id="btnews"><a href="news.php" ><span>News</span></a></li>
   <li id="btbio"><a href="bio.php"><span>Bio/Disco</span></a></li>
   <li id="btshows"><a href="shows.php"><span>Shows</span></a></li>
   <li id="btmedia"><a href="media.php"><span>Media</span></a></li>
   <li id="btlinks"><a href="links.php"><span>Links</span></a></li>
   <li id="btguest"><a href="guest.php"><span>Guestb.</span></a></li>
</ul>

Et faire une déclaration de ce type :

#btnews a {
  width: 80px ;
  background: url(../Vintage/news.gif) no-repeat 0 0 ;
}

#btnews a:hover{
  display: block ;
  width: 80px ;
  background: url(../Vintage/news.gif) no-repeat 0 -25px ;
}

Voilà. Je pense que ça devrait être réparé comme ça Smiley cligne
Modifié le 03 Feb 2005 - 23:22
Merci , en fait tu as exactement répondu à ma question. On ne peut donc pas déclarer juste la propriété :hover sur un élément 
<a href="" id="toto">

ok je teste sur les <li> directement...je teste et je vous dis à tantôt !
Merci, le problème est résolu...c'est super. Merci à tous ceux qui m'ont répondu et à bientôt !
Sujet clos
Aller à