Structurer une balise <A>

Structurer une balise <A> - HTML/CSS - Programmation

Marsh Posté le 17-01-2005 à 15:31:22    

Bonjour,
 
Je voudrais structurer une liste de liens, afin d'afficher les lignes en colonnes, et de pouvoir sélectionner toute la ligne en même temps.
Par exemple :
 
text1   text2               text3
text1   text2               text3
text1   text2               text3
 
En gros, je souhaite conserver les 3 colonnes, mais pouvoir cliquer n'importe où sur la ligne pour la sélectionner.
 
Merci de votre aide
 
Robz

Reply

Marsh Posté le 17-01-2005 à 15:31:22   

Reply

Marsh Posté le 17-01-2005 à 17:57:09    

Salut,
 
Je c pas si j'ai tout compris...
Une solution pas trés jolie :  
 

Code :
  1. <a href="x.php">text1</a>   <a href="y.php">text2</a>             
  2. <a href="x.php">text1</a>   <a href="y.php">text2</a>       
  3. <a href="x.php">text1</a>   <a href="y.php">text2</a>


 
[edit]
je crois que j'ai pas compris  :sarcastic:


Message édité par sonikbuzz le 17-01-2005 à 17:58:50
Reply

Marsh Posté le 17-01-2005 à 18:01:24    

cliquer n'importe ou sur la ligne pour arriver au même endroit?
 
genre si on clique sur le text1 de la ligne 1 on arrive au même endroit que si on clique entre text2 et text3 de la ligne 1? (dans le blanc)


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 18-01-2005 à 09:24:08    

voilà, j'ai pas réussi à faire plus moche que ça  :ouch:  
 

Code :
  1. <html>
  2. <table>
  3. <tr>
  4.  <a href="http://yahoo.fr">
  5.   <td>
  6.    yahoo
  7.   </td>
  8.   <td>
  9.    yahoo
  10.   </td>
  11.   <td>
  12.    yahoo
  13.   </td>
  14.  </a>
  15. </tr>
  16. <tr>
  17.  <a href="http://google.fr">
  18.   <td>
  19.    google
  20.   </td>
  21.   <td>
  22.    google
  23.   </td>
  24.   <td>
  25.    google
  26.   </td>
  27.  </a>
  28. </tr>
  29. </table>
  30. </html>

Reply

Marsh Posté le 18-01-2005 à 09:25:13    

Oui, c'est ça, un truc du genre :
 
<a href=...>  
<span style='width:200px'>test1</span>  
<span style='width:200px'>test2</span>  
<span style='width:300px'>test3</span>  
</a>  
etc...  
 
Cela fonctionne sous IE mais pas sous FireFox.  
 
ou alors ...
 
<UL>  
<LI><a href=#>  
<span style='width:200px;float:left;'>test1</span>  
<span style='width:200px;float:left;'>test2</span>  
<span style='width:300px;'>test3</span>  
</a>  
<LI><a href=#>  
<span style='width:200px;float:left;'>test1</span>  
<span style='width:200px;float:left;'>test2</span>  
<span style='width:300px;'>test3</span>  
</a>  
</UL>  
 
qui ne fonctionne pas non plus.

Reply

Marsh Posté le 18-01-2005 à 09:38:15    

Pour la solution avec les tableaux, je n'avait pas pensé mettre les <A> entre les <TR> et les <TD>, mais je ne crois pas que ce soit conforme au W3C, car le lien ne s'affiche pas sous IE, et ne fonctionne pas sous FF.

Reply

Marsh Posté le 18-01-2005 à 09:47:32    

Code :
  1. Line 3, column 26: document type does not allow element "A" here; assuming missing "CAPTION" start-tag
  3. <a href="http://yahoo.fr"><tr>
  5. ✉
  7. Line 3, column 30: document type does not allow element "TR" here
  9. <a href="http://yahoo.fr"><tr>
  11. ✉
  13. Line 4, column 5: document type does not allow element "TR" here
  15. <tr>
  17. ✉
  19. Line 15, column 4: "TR" not finished but containing element ended
  21. </a>
  23. ✉
  25. Line 17, column 5: document type does not allow element "TR" here
  27. <tr>


 
si peu...

Reply

Marsh Posté le 18-01-2005 à 10:45:11    

Comme ça :

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.  <title>Liens</title>
  5.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.  <style type="text/css">
  7.   a {
  8.    display: block;
  9.    float: left;
  10.    margin-left: 30px;
  11.   }
  12.  </style>
  13. </head>
  14. <body>
  15.  <a href="google.com">
  16.   Google<br />
  17.   Google<br />
  18.   Google<br />
  19.  </a>
  20.  <a href="yahoo.fr">
  21.   Yahoo<br />
  22.   Yahoo<br />
  23.   Yahoo<br />
  24.  </a>
  25.  <a href="badgerbadgerbadger.com">
  26.   badgerbadgerbadger<br />
  27.   badgerbadgerbadger<br />
  28.   badgerbadgerbadger<br />
  29.  </a>
  30. </body>
  31. </html>

Reply

Marsh Posté le 18-01-2005 à 11:10:17    

euh il les voulait sur la même ligne si je ne m'abuse (docteur ?)
 
 
p**** non pas badger  :cry:  mushroom mushroom


Message édité par esrevni le 18-01-2005 à 11:15:35
Reply

Marsh Posté le 18-01-2005 à 11:16:11    

J'ai pas tout pigé alors :cry:
 
PS : Snaaaaaake, Snaaaaaake, Ouuuuuuuuh it's a Snake !

Reply

Marsh Posté le 18-01-2005 à 11:16:11   

Reply

Marsh Posté le 18-01-2005 à 11:25:37    

Comme ça alors :

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.  <title>Liens</title>
  5.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.  <style type="text/css">
  7.   a {
  8.    border: 1px solid #00f;
  9.    display: block;
  10.   }
  11.   a span {
  12.    display: inline-block;
  13.    width: 200px;
  14.   }
  15.  </style>
  16. </head>
  17. <body>
  18.  <a href="google.com"><span>Google</span><span>Google</span><span>Google</span></a>
  19.  <a href="yahoo.fr"><span>Yahoo</span><span>Yahoo</span><span>Yahoo</span></a>
  20.  <a href="badgerbadgerbadger.com"><span>badger</span><span>mushroom</span><span>snake</span></a>
  21. </body>
  22. </html>


 
/!\ Attention /!\
Ca ne fonctionne pas sous Gecko... Enfin tant qu'ils ne se remuent pas le cul et qu'ils ajoutent pas un support de display: inline-block  :( . Pour une fois que IE gère à peu près quelque chose...


Message édité par FlorentG le 18-01-2005 à 11:26:52
Reply

Marsh Posté le 18-01-2005 à 11:43:05    

faut mettre le border à 0px, mais sinon, ça ressemble fortement à ce qu'il veut faire.

Reply

Marsh Posté le 18-01-2005 à 11:54:20    

Le border c'était pour voir ;)

Reply

Marsh Posté le 18-01-2005 à 12:09:39    

Merci les gars, mais il me semble qu'on arrive à la même situation que :
<UL>  
<LI><a href=#>  
<span style='width:200px;'>test1</span>  
<span style='width:200px;'>test2</span>  
<span style='width:300px;'>test3</span>  
</a>  
<LI><a href=#>  
<span style='width:200px;'>test1</span>  
<span style='width:200px;'>test2</span>  
<span style='width:300px;'>test3</span>  
</a>  
</UL>  
 
qui fonctionne sous IE, mais qui "colle" les colonnes sous FF.
 
En réalité, ma liste est une liste de contacts :
M     TOTO     George     Société     Site
Mme   TITI     Mauricette Société1    Site1
Melle TETE     sylvia     Société2    Site2
 
donc, il ne faut pas que les lignes soient collées, sinon, on ne lit plus rien...
le but est de sélectionner une ligne, avec un visuel qui colore le fond de la ligne lorsqu'on passe devant (A:hover), et un onclick qui m'ouvre une boite de propiété du contact.
Pour l'instant, j'utilise un tableau et je colore une case du tableau (le nom par exemple). Mais c'est pas très facile à sélectionner, et pas très beau !

Reply

Marsh Posté le 18-01-2005 à 13:38:35    

Ben avec ma solution, ça marche. Y'a juste Gecko (donc Mozilla, FF, etc.) qui ne le gèrent pas... Donc tu peux l'utiliser, ça aura juste comme résultat de ne pas aligner les colonnes sous FF... En attendant qu'ils implémentent la fonction. Sous Opéra ça fonctionne aussi :)

Reply

Marsh Posté le 18-01-2005 à 14:13:26    

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <title>Liens</title>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.         <style type="text/css">
  7.             a {
  8.                 border: 1px solid #abc;
  9.                 display: block;
  10.             }
  11.             a span {
  12.                 display: inline-block;
  13.                 float: left;
  14.                 width:200px;
  15.             }
  16.         </style>
  17.     </head>
  18.     <body>
  19.         <a href="google.com"><span>Google</span><span>Google</span><span>Google</span><br /></a>
  20.         <a href="yahoo.fr"><span>Yahoo</span><span>Yahoo</span><span>Yahoo</span><br /></a>
  21.         <a href="badgerbadgerbadger.com"><span>badger</span><span>mushroom</span><span>snake</span><br /></a>
  22.     </body>
  23. </html>


 
ca fonctionne sous Firefox. j'ai pas tester le resultat sous  IE (IeCapture fonctionne plus :/)


---------------
Nos estans firs di nosse pitite patreye...
Reply

Marsh Posté le 18-01-2005 à 14:16:20    

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html  
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <title>LinksTest</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <div class="table">
            <a class="tabled" href="#">
                <span class="gender">M</span>
                <span class="name">Toto</span>
                <span class="surname">George</span>
                <span class="employer">Societe 1</span>
                <span class="localisation">Site 1</span>
            </a>
            <a class="tabled" href="#">
                <span class="gender">Mme</span>
                <span class="name">Titi</span>
                <span class="surname">Mauricette</span>
                <span class="employer">Societe 2</span>
                <span class="localisation">Site 2</span>
            </a>
            <a class="tabled" href="#">
                <span class="gender">Mlle</span>
                <span class="name">Tete</span>
                <span class="surname">Sylvia</span>
                <span class="employer">Societe 3</span>
                <span class="localisation">Site 3</span>
            </a>
            <a class="tabled" href="#">
                <span class="gender">M</span>
                <span class="name">Raminagrobis</span>
                <span class="surname">Kravkzich</span>
                <span class="employer">Societe 5</span>
                <span class="localisation">Site 5</span>
            </a>
        </div>
    </body>
</html>


a.tabled {
    display: block;
    clear: both;
}
 
.tabled span {
    display: block;
    float: left;
    text-decoration: none;
    color: blue;
}
 
.tabled span.gender {
    width: 50px;
}
 
.tabled span.name {
    width: 100px;
}
 
.tabled span.surname {
    width: 100px;
}
 
.tabled span.employer {
    width: 100px;
}
 
.tabled span.localisation {
    width: 100px;
}
 
a.tabled:hover span {
    background-color: aqua;
    color: red;
    text-decoration: underline;
}


sous Fox/Opera/IE, le changement de fond fonctionne en cas de hover par dessus et tout et tout :o
 
mais vu les données à afficher je me demande si la représentation tabulaire ne serait pas plus appropriée en fait [:figti]


Message édité par masklinn le 18-01-2005 à 14:17:17

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 18-01-2005 à 14:17:07    

Oui, mais du coup ça foire sous IE (impossible de cliquer entre les <span> )... D'où le coup du inline-block, mais non-geré sous FF...

Reply

Marsh Posté le 18-01-2005 à 14:18:10    

Masklinn a écrit :


mais vu les données à afficher je me demande si la représentation tabulaire ne serait pas plus appropriée en fait [:figti]


 
Oui en fait on est complètement con :D Il a effectivement des données triées par colonne, donc un tableau est utilisable :)

Reply

Marsh Posté le 18-01-2005 à 15:13:36    

Ah, ye soui désolé, yé trouve ce code extrèmement beau et puissant et fonctionne parfaitement sous FF. Cependant, chez moi, le "hover" ne fonctionne pas du tout sous IE...
Félicitation quand même, je vais m'en inspirer...
On va bien réussir à trouver quand même !!
Soit ça marche sur l'un, soit sur l'autre, il faut donc trouver le juste milieu ! Espérons que dans quelques années, on aura évolué, sinon je quitte le métier ! ;)

Reply

Marsh Posté le 18-01-2005 à 15:18:44    

pour le hover sous IE, il y a ca : http://www.xs4all.nl/~peterned/csshover.html


---------------
Nos estans firs di nosse pitite patreye...
Reply

Marsh Posté le 18-01-2005 à 15:28:20    

Laisse tomber IE, de toute manière y'a plus personne qui l'utilise :D

Reply

Marsh Posté le 18-01-2005 à 15:33:30    

FlorentG a écrit :

Laisse tomber IE, de toute manière y'a plus personne qui l'utilise :D


dans 2 ans peut etre mais en 2005, il y a toujours 90% de la population qui savent meme pas que des alternatives existent :o


---------------
Nos estans firs di nosse pitite patreye...
Reply

Marsh Posté le 18-01-2005 à 15:34:59    

Ironie, hein ;) Sinon pour le :hover, avec un p'tit script ça peut marcher...

Reply

Marsh Posté le 18-01-2005 à 17:59:38    

Sinon il y a une methode qui fonctionne "pas trop mal" (a condition d'avoir js d'active).
Vous faites votre tableau (donnees tabulaires donc on a le droit :D)

Code :
  1. <table>
  2. <tr>
  3. <td>Champ1</td>
  4. <td>Champ2</td>
  5. <td>Champ3</td>
  6. </tr>
  7. <tr onMouseOver="this.className='hi';" onMouseOut="this.className='dl';"
  8. onClick="location.href='http://monurl'">
  9. <td>Valeurs1</td>
  10. <td>Valeurs2</td>
  11. <td>Valeur3</td>
  12. </tr>
  13. </table>


 
"hi" et "lo" etant des classes pour faire l'effet "hover".
Bon il y a le probleme du fait que si le js n'est pas active le hover fonctionne pas, mais egalement le "lien" (ben oui, a pu de onclick)

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed