28217 sujets

CSS et mise en forme, CSS3

[Résolu] Problème de bouton css

Bonjour,

J'ai essayé de mettre en place des boutons de sous-menu en CSS. Malheureusement, j'ai déjà des priorités pour les liens de texte et j'ai bien l'impression que c'est pour cette raison que mes boutons ne marchent pas. Pour mieux m'expliquer je vais insérer les codes de mes liens : 
a.vertical {
  background-image:url(img/menunorm.jpg);
  background-repeat: no-repeat;
  background-position: center;
  display: block;
  width: 40px;
  height: 25px;
}
a.vertical:activate {
  background-image:url(img/menuacti.jpg);
  background-repeat: no-repeat;
}
a.vertical:hover {
  background-image:url(img/menudess.jpg);
  background-repeat: no-repeat;
  background-position: center;
}


Mais il y a à la suite aussi ces priorités-qui je pense empêche de lire les boutons css- :
A { COLOR: black; font-family: Arial, Helvetica, sans-serif; TEXT-DECORATION: none;} 
A:visited { COLOR: black; font-family: Arial, Helvetica, sans-serif; TEXT-DECORATION: none;} 
A:hover { COLOR: red; font-family: Arial, Helvetica, sans-serif; TEXT-DECORATION: none;}

Voici l'adresse du lien http://nesscom.free.fr/nesslogmon.html
Voilà, pouvez-vous m'éclaircir pour régler ce problème?

Je vous remercie d'avance.

vanessa
Modifié par vanezou (09 Jun 2005 - 16:53)
Salut,

Qu'est ce que tu entend par mes boutons ne marchent pas?

Ensuite, oui tu devrais placer tes règles de liens générique en premier dans ta CSS, c'est plus logique et ça évitera les "conflits".

N'oublie pas non plus que pour dimensionner un élément inline tu dois lui appliquer la propriété display:block (sur tes liens avec la class vertical donc) sinon les dimensions ne seront pas prises en compte.
merci pour la réponse rapide,

J'ai placé la priorité des liens de ma page en haut de la feuille de style.
Mon problème persiste, je m'explique : je souhaite faire un bouton rollover en CSS. J'ai donc utilisé la technique de l'image de fond. Malheureusement, d'une part je ne peux pas mettre une image en "état normal" (out), d'autre part, lorsque je suis sur le bouton l'image de fond n'apparaît pas.
Dois-je m'y prendre autrement que par le CSS?

Merci d'avance
J'ai trouvé cette solution sur le net :
a écrit :
Dans le header

<script language="JavaScript">
<!-- Begin
bouton = new Image();
 bouton.src = "images/bouton-vert_on.gif";
end -->
</script>


Dans le body, à l'endroit où s'affiche le rollover

<a href="#" onmouseover="bouton.src = 'images/bouton-vert_on.gif';" onmouseout="bouton.src = 'images/bouton-bleu_off.gif';"><img src="images/bouton-bleu_off.gif" border=0 width="187" height="29" name=bouton></a>


Je me demande juste s'il est possible de cumuler du javascript et du CSS (avec le priorités de lien texte que j'ai montré auparavent).
Pensez-vous que cette solution est meilleure?

Merci d'avance.

vanessa
Ok je vois, tu as un problème avec tes chemins relatifs vers tes images.

Tes styles sont dans le dossier "style" et tes images dans le dossier "img", les deux se trouvent au même niveau. Hors le chemin vers les images appellées dans ta feuille de styles sont relatifs à l'emplacement de ton fichier CSS et non de ton fichier HYML. Donc tu dois d'abord remonter d'un niveau avant d'indiquer le chemin vers tes images.

Dans ton fichier CSS les chemins devraient ressembler à ça (chemin absolu depuis la racine du site) :


  background-image:url(/img/menunorm.jpg);


Ou ça (chemin relatif depuis le fichier en cours) :


  background-image:url(../img/menunorm.jpg);


Là ou tu as actuellement :


  background-image:url(img/menunorm.jpg);


PS: oubli le javascript
Modifié par jb_gfx (08 Jun 2005 - 15:48)
Merci énormément pour cette réponse, ça me sauve, j'ai juste une autre question(c'est la dernière pour les boutons, promis biggol )
Je souhaite savoir s'il est possible de mettre une image pour la priorité "normal" du bouton et d'ensuite l'annuler pour la priorité "dessus" afin de rendre visible l'image de fond?

En gros faire un vrai rollover en CSS est-il possible?

Merci beaucoup pour les réponses précédentes en tout cas biggrin

vanessa
Modifié par vanezou (08 Jun 2005 - 15:56)
Tu as deux solutions :

1. Si tes liens utilisent deux conteneurs, par exemple des liens dans une liste avec la forme :


<ul>
 <li><a></a></li>
</ul>


Tu applique l'image pour l'etat normal à tes liens, et l'image pour l'etat survolé à tes <li>.

Tu cache l'image de fond pour tes liens a:hover.

2. Peut être plus efficace tu utilise la technique des rollovers en une seule image qui permet de s'affranchir du préchargement :

http://css.alsacreations.com/Tutoriels-et-articles-divers/roll-over-css-image-unique
Bonjour,

Dans le code initial tu as une pseudo class ":activate", ce ne serait pas plutôt ":active" à laquelle tu pensais ?
Merci pour toutes ces réponses. Je vais enfin terminer ce site, grâce à vous.
En ce qui concerne la classe activate, je vais tout de suite changer, merci pour la remarque.

Très bonne fin de journée à tous.
vanessa
De nouveau un problème, vais-je arrêter d'abuser de votre aide? (je m'en excuse d'avance).
Voilà j'ai suivi le tutoriel à la lettre, mais le décalage ne s'opère pas (pourtant cette fois le chemin des images est bon).
Voici le nouveau code que j'ai inclu dans ma page:
ul#vertical {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
ul#vertical li {
  margin: 0 0 5px 0;
  padding: 0;
}
ul#vertical li a {
  display: block ; 
  width: 40px;
  line-height: 25px;
  font-family: Arial, Helvetica, sans-serif;
  text-indent: 20px;
  background: url(/img/menu.jpg) no-repeat 0 0 ; 
  TEXT-DECORATION: none;
}
ul#vertical li a:active {
  COLOR: black;
  TEXT-DECORATION: none;
  font-family: Arial, Helvetica, sans-serif;
  background: url(/img/menu.jpg) no repeat 0 -50px;
}
ul#vertical li a:hover {
  COLOR: red; font-family: Arial, Helvetica, sans-serif; TEXT-DECORATION: none;
  background: url(/img/menu.jpg) no repeat 0 -25px;
}


et de nouveau le lien de mon site pour voir le résultat : http://nesscom.free.fr/nesslog.html

Je vous remercie d'avance et espère ne plus vous déranger Smiley cligne

Bonne fin de journée
vanessa

EDIT jb_gfx : correction du lien
Modifié par jb_gfx (09 Jun 2005 - 16:27)
C'est vrai que là tu aurais pu trouver toute seule, c'est pas grand chose mais tu as une erreur de syntaxe. no repeat n'existe pas, c'est no-repeat.

ça arrive, des jours ou on a de la purée dans les yeux. Smiley cligne
MERCI MERCI MERCI MERCI
c'est tout ce que je peux dire et franchement bravo pour ce forum.

Bien à vous
vanessa
De rien, de rien Smiley smile

N'oublie pas, si ton sujet est résolu, edite le titre pour y rajouter un tag [résolu], ça nous aide à classer les sujets et pour la navigation sur le forum.
Sujet clos
Aller à