mise en forme liste

pierrick · Message par **pierrick** » 08 févr. 2008, 15:02

Bonjour.
Je souhaiterai avoir une mise en forme différente pour 2 listes se trouvant sur la meme page, par exemple un hover (ou link) en vert pour le fond sur une liste et un hover en rouge pour la 2ieme liste. Jai essayé d'inserer le hover dans une feuille de style enregistré et le 2ieme hover dans une feuille interne mais cela ne fonctionne pas. Si quelque à une idée merci d'avance. Pour info j'utilise une version pas recente de kompozer, je vais installer la derniere 0.7.10 ce weekend.
Merci d'avance et encore bravo pour ce forum, rempli d'info interessante et de personne disponible.

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 2.0.50727)

Mongo Bob · Message par **Mongo Bob** » 08 févr. 2008, 15:16

bonjour

pierrick a écrit :Jai essayé d'inserer le hover dans une feuille de style enregistré

externe, tu veux dire?

pierrick a écrit :mais cela ne fonctionne pas

qu'est-ce qui ne fonctionne pas, exactement?
J'ai du mal à comprendre : le a:hover modifie la mise en forme au survol de la souris, c'est bien ce que tu veux, que la couleur de fond change au survol?
La feuille de style interne l'emporte sur l'externe, mais peux-tu nous montrer ton code?

pierrick · Message par **pierrick** » 08 févr. 2008, 15:47

Je souhaite que le a:hover fonctionne d'une facon (ex un fond rouge) pour une liste et d'une autre facon (ex fond vert) pour une deuxieme liste. Sachant que ces deux listes se trouvent dans la meme page. J'espere avoir été clair. Sinon je te montrerai mon code ce soir, je suis au boulot en ce moment mais chut!!!!!

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 2.0.50727)

Mongo Bob · Message par **Mongo Bob** » 08 févr. 2008, 15:50

psssiittt.... on va attendre ce soir, c'est mieux...

pierrick · Message par **pierrick** » 08 févr. 2008, 15:52

Comme la feuille interne l'emporte sur l'externe, ca devrait fonctionner d'avoir 2 a:hover sur 2 feuilles de style externe?

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 2.0.50727)

Mongo Bob · Message par **Mongo Bob** » 08 févr. 2008, 16:02

attention, le fait que l'interne l'emporte sur l'externe n'est pas une raison au fait que ça ne marche pas, du moment que les a:hover concernent des liens différents bien identifiés comme tel, ça doit marcher quand même, même si l'un est stylé dans une interne et l'autre dans une externe.
Et bien sûr, ça doit marcher aussi si les deux sont dans la même feuille externe et aussi avec deux externes, chacun dans une feuille, mais inutile d'en avoir deux, une seule suffit en tout et pour tout!

autrement dit : est-ce que tu as bien identifié 2 liens différents?

pierrick · Message par **pierrick** » 08 févr. 2008, 16:10

???? alors la je ne comprend plus rien lol. Comment on identifie un lien dans une feuille CSS ?

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 2.0.50727)

Mongo Bob · Message par **Mongo Bob** » 08 févr. 2008, 16:26

ca doit être ça le problème, faudra voir ton code.
Dans une feuille css, on a l'avantage de donner des identifiants à des éléments au départ identiques, en créant des règles différentes : si tu veux que dans une page, 2 a:hover ait 2 comportements différents, il faut bien créer 2 règles différentes pour 2 types de lien, tu crées le nom de règle comme tu veux. Si tu ne voulais qu'un seul comportement pour tous les liens tu utiliserais a et a:hover comme règle css, ça suffirait. Là, tu en veux deux, il faut inventer 2 noms, alien1 et alien2 par exemple, pour les hover :
dans Cascades, tu donnes un fond rouge à la règle "alien1:hover" et un fond bleu à la règle "alien2:hover", il faudra aussi créer les règles "alien1" et "alien2" pour les liens de départ.
Tu travailles bien dans Cascades pour le css, je suppose?

pierrick · Message par **pierrick** » 08 févr. 2008, 16:32

ok ca deviens beaucoup plus clair notamment la regle "alien1:hover" et alien2:hover", ca me parait logique. Oui j'utilise cascades pour la css. Par contre comment fait-on pour creer les regles "alien1" et "alien2" pour les liens de depart ?
PS : j'aime bien l'idée d'alien, ca me rappelle de bon souvenir au ciné avec Sigourney

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 2.0.50727)

Mongo Bob · Message par **Mongo Bob** » 08 févr. 2008, 16:43

Alors là, il manque une formation Cascades :
dans icelui, cliquer sur la palette, cocher "style appliqué à l'élément portant l'Id", en bas apparaît un "#" après lequel tu tapes "alien1". Dans la page html, il faudra faire référence à cette règle en tapant a id="alien1", ou en sélectionnant la partie à lier, clic droit "créer lien", Edition avancée, menu déroulant : Attribut id, dans la fenêtre de droite, taper "alien1", OK.

pierrick · Message par **pierrick** » 08 févr. 2008, 16:51

Merci pour l'info je teste cela ce soir et te tiens au courant

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 2.0.50727)

pierrick · Message par **pierrick** » 08 févr. 2008, 23:17

De retour, j'ai testémais cela n'a pas l'air de fonctionné de plus mon menu principal est devenu vertical alors qu'il etait a l'horizontal. Voici le lien http://pingpongfalaise.free.fr/championnats.html pour voir mes 2 menu. Merci d'avance.

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322)

Mongo Bob · Message par **Mongo Bob** » 09 févr. 2008, 00:23

Attention, plein d'erreurs : tu ne peux utiliser une id que une fois par page, tu m'as parlé de 2 liens avec des survols différents, d'où mon exemple avec des id.
Si 1 règle s'applique à plusieurs éléments dans la même page, ce qui est le cas avec tes 2 menus, tu dois utiliser une classe.
Ca devrait donner pour le menu1 : a class ="menu1" au lieu de "a id="menu1" en html. Dans Cascades, cocher plutôt "style appliqué aux éléments de même classe".
Pour créer le lien par l'interface de Kpz, c'est quasi comme + haut, donc :
Edition avancée, menu déroulant : Attribut class, dans la fenêtre de droite, taper "menu1", OK.
On y verra plus clair après, mais ça devrait déjà arranger certaines choses.
Il y a d'autres erreurs : interdit d'inclure un <div> dans un <h1>, par exemple (je trouve dommage que ça soit interdit vu que ça pourrait servir, mais c'est comme ça)...

pierrick · Message par **pierrick** » 10 févr. 2008, 20:20

Merci pour les info, par contre mon menu principal n'est plus aligné maintenant, as tu une idée car j'ai beau faire des tests il reste non aligné. Dans kompozer il est aligné mais sur le net il ne l'ai pas? Je continue a tester le hover.

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322)

Mongo Bob · Message par **Mongo Bob** » 10 févr. 2008, 22:32

Tu peux mettre des classes au lieu d'id à "menu2" aussi, et de même pour "gif".
petite erreur dans le lien de "Championnats" :

Code : Tout sélectionner

<ul>
      <li>
        <a class="menu1" href="index.html">Accueil</a>
      </li>

      <li>
        <span class="menu1">Championnats</span>
      </li>
      <li>

Alors, sur le net, disons : "en ligne", ton menu principal s'affiche bien aligné avec Firefox, comme sur Kpz, ils sont basés sur le même moteur. Mais IE produit un escalier.
Si tu ne regardes ton site que avec IE7, tu auras une vision incomplète des choses, installe donc FF...
Enfin, je n'ai pas d'idée pour la différence d'affichage du menu, mais il serait plus clair pour toi de reprendre toute ta page et comme tu débutes, de faire du Transitionnel et pas du strict, de recopier ta page dans une nouvelle page, en faisant "Nouveau", cocher "Document vide" et en décochant "DTD stricte", tu seras alors en DTD Transitionnel, à y réfléchir, c'est même une trés bonne idée...

D'ailleurs, tout reprendre après un bon tuto ne serait que bénéfique :
http://www.sio2.be/

Geckozone

mise en forme liste

mise en forme liste

Qui est en ligne ?