Structurer une balise <A>

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Structurer une balise <A>

robz

www.volumecase.com

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

Publicité

sonikbuzz

echo "Hello World!";

Salut,

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

Code :

<a href="x.php">text1</a> <a href="y.php">text2</a>
<a href="x.php">text1</a> <a href="y.php">text2</a>
<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

masklinn

í dag viðrar vel til loftárása

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

esrevni

à contrario

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

Code :

<html>
<table>
<tr>
<a href="http://yahoo.fr">
<td>
yahoo
</td>
<td>
yahoo
</td>
<td>
yahoo
</td>
</a>
</tr>
<tr>
<a href="http://google.fr">
<td>
google
</td>
<td>
google
</td>
<td>
google
</td>
</a>
</tr>
</table>
</html>

robz

www.volumecase.com

Oui, c'est ça, un truc du genre :

<a href=...>
test1
test2
test3
</a>
etc...

Cela fonctionne sous IE mais pas sous FireFox.

ou alors ...

<UL>
<LI><a href=#>
test1
test2
test3
</a>
<LI><a href=#>
test1
test2
test3
</a>
</UL>

qui ne fonctionne pas non plus.

robz

www.volumecase.com

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.

esrevni

à contrario

Code :

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

si peu...

FlorentG

Unité de Masse

Comme ça :

Code :

<!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">
<head>
<title>Liens</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
a {
display: block;
float: left;
margin-left: 30px;
}
</style>
</head>
<body>
<a href="google.com">
Google
Google
Google
</a>
<a href="yahoo.fr">
Yahoo
Yahoo
Yahoo
</a>
<a href="badgerbadgerbadger.com">
badgerbadgerbadger
badgerbadgerbadger
badgerbadgerbadger
</a>
</body>
</html>

esrevni

à contrario

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

FlorentG

Unité de Masse

J'ai pas tout pigé alors :cry:

PS : Snaaaaaake, Snaaaaaake, Ouuuuuuuuh it's a Snake !

Publicité

FlorentG

Unité de Masse

Comme ça alors :

Code :

<!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">
<head>
<title>Liens</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
a {
border: 1px solid #00f;
display: block;
}
a span {
display: inline-block;
width: 200px;
}
</style>
</head>
<body>
<a href="google.com">GoogleGoogleGoogle</a>
<a href="yahoo.fr">YahooYahooYahoo</a>
<a href="badgerbadgerbadger.com">badgermushroomsnake</a>
</body>
</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

esrevni

à contrario

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

FlorentG

Unité de Masse

Le border c'était pour voir

robz

www.volumecase.com

Merci les gars, mais il me semble qu'on arrive à la même situation que :
<UL>
<LI><a href=#>
test1
test2
test3
</a>
<LI><a href=#>
test1
test2
test3
</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 !

FlorentG

Unité de Masse

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

KangOl

Profil : pointeur

Code :

<!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">
<head>
<title>Liens</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
a {
border: 1px solid #abc;
display: block;
}
a span {
display: inline-block;
float: left;
width:200px;
}
</style>
</head>
<body>
<a href="google.com">GoogleGoogleGoogle </a>
<a href="yahoo.fr">YahooYahooYahoo </a>
<a href="badgerbadgerbadger.com">badgermushroomsnake </a>
</body>
</html>

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

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

masklinn

í dag viðrar vel til loftárása

<?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="#">
M
Toto
George
Societe 1
Site 1
</a>
<a class="tabled" href="#">
Mme
Titi
Mauricette
Societe 2
Site 2
</a>
<a class="tabled" href="#">
Mlle
Tete
Sylvia
Societe 3
Site 3
</a>
<a class="tabled" href="#">
M
Raminagrobis
Kravkzich
Societe 5
Site 5
</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

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

FlorentG

Unité de Masse

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

FlorentG

Unité de Masse

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 Il a effectivement des données triées par colonne, donc un tableau est utilisable

robz

www.volumecase.com

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 !

KangOl

Profil : pointeur

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

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

FlorentG

Unité de Masse

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

KangOl

Profil : pointeur

FlorentG a écrit :

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

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

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

FlorentG

Unité de Masse

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

cerel

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 )

Code :

<table>
<tr>
<td>Champ1</td>
<td>Champ2</td>
<td>Champ3</td>
</tr>
<tr onMouseOver="this.className='hi';" onMouseOut="this.className='dl';"
onClick="location.href='http://monurl'">
<td>Valeurs1</td>
<td>Valeurs2</td>
<td>Valeur3</td>
</tr>
</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)

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

Structurer une balise <A>

Sujets relatifs
A quoi sert la balise <noscript> ??	problème sous PHP et DW: balise EMBED SRC et BACKGROUND incompatible??
Position balise div abolute	Quelle balise pour afficher des balises..??
afficher les balise html	Espace à droite d'une balise <li> ou <ul>
Couleurs ascenceur d'une balise overflow	probleme balise <div>
Probleme de dimension d'un SVG avec la balise EMBED
Plus de sujets relatifs à : Structurer une balise <A>

Page générée en 0.112 secondes