Deux scripts de CSS sur la même page

Résolu
Jacobéo Messages postés 304 Date d'inscription   Statut Membre Dernière intervention   -  
Jacobéo Messages postés 304 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

J'essaie d'avancer sur mon site http://www.j-images-j-in.com, et je rencontre deux difficultés. Je voudrais que le survol du menu de gauche soit différent de celui de la page. J'ai placé deux liens mais le premier prime sur le second, pourquoi ? est-ce une question de placement dans la "div contennu" qui provoque cela ?

Second problème, je voudrais que le survol me donne un résultat sous les titres Le lien Irlande par exemple me donnerait une petite description de ce que l'on verrait. Ensuite le clic donnerait l'ouverture de la page.

Merci

6 réponses

Gihef Messages postés 5150 Date d'inscription   Statut Contributeur Dernière intervention   2 779
 
Salut Jacobéo,

Tu palieras à ça en définissant un style particulièrement pour le menu par exemple.
Il te suffit d'indiquer que les effets que tu choisis agiront sur les <a> du menu en précisant :
  #menu a:link {
  …

  #menu a:hover{
  … 
Tu te retrouveras donc avec 2 effets différents sur les <a> du document. Ceux placés dans le menu et les autres.

Pour le petit texte de description, Alsacreation indique un moyen.
0
Dalida Messages postés 6728 Date d'inscription   Statut Contributeur Dernière intervention   922
 
salut,

J'ai placé deux liens mais le premier prime sur le second, pourquoi ?
ben tout simplement parce que tu définis deux règles successives pour une même balise. la dernière lue par le navigateur l'emporte. inverse l'ordre de tes liens aux pages css et l'effet s'inversera.
c'est comme si tu avais codé :
a:hover{color:red;}
a:hover{color:blue}

dans ce cas le lien survolé sera toujours bleu.

pour toi il ne sert à rien d'attacher deux feuilles différentes sauf si elle sont destinées à des médias de sortie différents (avec la commande '@media' de css ou l'attribut 'media' de la balise <link> en html ).

enfin pour sélectionner un lien plutôt qu'un autre, j'ajouterai au propos de Gihef qu'il de suffit de faire jouer le contexte, c'est à dire le bloc parent de ton lien.
Gihef te propose te sélectionné en utilisant l'ancêtre div#menu ce qui a pour avantage de donné un poids de plus 100 à ta règle (c'est du mastoque).
tu pourrais aussi essayer avec le sélecteur 'li a{}' qui ajoute 1 à la règle, dans la plupart des cas cela suffit. mais c'est surtout très pratique quand tu n'as pas d'ancêtre avec identifiant.

bonne soirée.
0
Gihef Messages postés 5150 Date d'inscription   Statut Contributeur Dernière intervention   2 779
 
Parce que tu n'as pas placé tes liens du centre de la page dans une <div>, j'ai testé ce lien.

J'ai commencé par définir cet effet div par div
  #irl a span {
  …

  #pays a span {
  …
et puis je me suis dit “Mais, au fait…”
Alors, j'ai placé les liens centraux dans une div que j'ai appelée “centre" et ai appliqué l'effet directement aux éléments de cette div.
Et ça marche aussi.
  <style type="text/css">
    #centre a span {
      display : none;
      }
    #centre a:hover span {
      display: inline;
      position: absolute;
      top : -35px;
      left : 20px;
      width : 120px;
      height ; 35px;
      font-size : 80%;
      color : #528875;
      border : 1px dotted #888;
      }
  </style>
Et
<div id="irl">
<a href="img-irl/untitled.html">Irlande
<span>Le vert pays de mes envies.</span>
</a> </div>

<div id="pays">
<a href="pays/img.html">Paysage
<span>Que de beauté dans ces images.</span>
</a> </div>

+ Tu peux donc ainsi aussi utiliser cette id pour les <a> qui y sont.
0
Dalida Messages postés 6728 Date d'inscription   Statut Contributeur Dernière intervention   922
 
re salut les deux, re salut les autres,

ben oui ! j'avais même pas lu le reste de ta question (comme d'hab…) !

et c'est là que je regrette le plus qu'IE ne gère pas les pseudo-classes ':before' et ':after'.

dans un cas pareil il suffirait de reprendre la valeur de 'title' (l'attribut étant renseigné avec ta description) et de l'affichée en bloc avec position relative. pas besoin de <span>, la balise du lien se suffit à elle-même. j'ai fait des effets d'ombre sous le texte comme ça aussi.
a:after{
content:attr(title);
}

conforme et accessible…
-:'o(

c'est bon de rêver parfois…
m'enfin !…
bonne nuit quand même !
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Jacobéo Messages postés 304 Date d'inscription   Statut Membre Dernière intervention   79
 
Merci,

Pour ce soir, j'ai de la fumée qui sort par les oreilles, si si c'est pas des co..... A force de tourner en rond et de lire la réponse dans l'aide de Gihef (merci), j'ai fini par obtenir les différences de couleurs sur le menu et la page centrale, mais je n'ai plus le changement de couleur par le survol. J'ai remis tout ça sur la toile et je vais au dodo. Demain sera un nouveau jour. Ensuite, la première page avec des... photographies. Au fait, il y a-t'il des photographes parmis vous qui accepteraient une invitation sur la page "auteurs".

Restera à faire paraître (ça, j'y tiens) le texte "à la volée", même par-dessus les liens, juste une question de... couleur ;-)) . J'ai aperçu un effet curieux en cherchant, mon menu se répétait en dessous lors du survol, mais cela semblait instable. Une piste ?

Salut les Copains (tiens, c'était le bon temps où les filles...)
0
Jacobéo Messages postés 304 Date d'inscription   Statut Membre Dernière intervention   79
 
Houla,

J'ai de sérieux problème avec le forum, je ne peux plus lire les messages qu'au travers de ma messagerie. En direct, seul mon premier message apparaît!

Si je comprends bien, je vais pouvoir afficher mes petites notes dans la page. Super.

Donc, le courrier se croise. Je verrais cela demain avec la direction.
0