[Résolu] Genre tableau avec lien assez spécial

Bonjour,
je crois que c'est bien la première fois que je sèche sur un problème.
Je me demande même si ce dernier est réellement réalisable c'est pour ça que je fais appel à ce forum.

Si jamais, j'ai déjà tenté de faire un tableau avec un javascript Table Zebra qui alterne automatiquement les lignes et qui met un hover mais pas moyen d'y ajouter la ptit barre tout à droite.

Sinon j'ai fait un truc du genre

<p class="Table1"><a href=""><span class="desc">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</span><span class="day">21</span><span class="month">mai</span><span class="year">2007</span><span class="language">FR</span><span class="language">EN</span><span class="language">DE</span><span class="language">IT</span><span class="language">ES</span></a></p>

.Table1 span {
	float: left;
	}
.Table1 .desc {
	background: #eaf0ec;
	padding: 5px 0 5px 22px;
	width: 360px;
	margin: 0 2px 0 0;
	}
.Table1 .day {
	background: #d5e1d7;
	padding: 5px 0;
	width:30px;
	text-align: center;
	}
.Table1 .month {
	background: #d5e1d7;
	padding: 5px 0;
	width: 53px;
	}
.Table1 .year {
	background: #d5e1d7;
	padding: 5px;
	}
.Table1 .language {
	background: #b2c9b9;
	padding: 5px;
	margin: 0 0 0 2px;
	}
.Table1:hover {
	background: #004b18;
	border-right: 5px solid #004b18;
	height: 22px;
	}

Si quelqu'un me trouve une solution, c'est vraiment mais vraiment vachement cool.

Merci d'avance
Modifié par Alore (05 Nov 2007 - 09:00)

Salut,

- tu mets une bordure blanche de la même épaisseur à cet endroit (sur la case de préférence, pour passer par-dessus celle de la ligne grâce à border-collapse)
- tu changes juste la couleur de cette bordure sur le hover de la ligne

Et voilou

N.B. : Je ne comprends pas pourquoi tu as des paragraphes et des span dans ton code, alors qu'il s'agit clairement ici de données tabulaires.

Je plussoie avec force et hardiesse le fier et non moins illustre Marvin Le Rouge

Après de nombreuses années à batailler contre la mise en page sous forme de tableau, nous arrivons (presque) à l'excès inverse, à savoir le rejet quasi systèmatique de tout ce qui touche de près ou de loin à une table, certes le message semble être plutôt bien passé notamment sur la "jeune génération" mais il va urgemment falloir apporter quelques correctifs au message...

Comme le précise Marvin, il s'agit d'un "cas d'école" : les fameuses données tabulaires !!!
Haut les coeurs, avec la bénédiction de tous les rigoristes extrêmes des standards et autres fanatiques de l'accessibilité par dessus le marché !!!

En avant pour de la balise qu'elle est bonne et qui va bien et du code qui n'est pas moins bon :
Du css :

[#red].[/#]tablo {float: left;text-align: center;background:white; }
[#red].[/#]tablo .desc {  background: #eaf0ec;width:500px; }
[#red].[/#]tablo .day,#tablo .year, #tablo .month  { background: [#red].[/#]d5e1d7; width: 53px;padding-left:0;}
[#red].[/#]tablo .language { background: #b2c9b9;padding: 5px;}
[#red].[/#]tablo:hover { border-right: 5px solid black;}

Du html :

<table summary="hover sur une ligne dans un tableau"[#red]class[/#]="tablo">
   <tr>
    <td class="desc"> La camomille, c'est le mal...</td>
    <td class="day"> 21 </td>
    <td class="month"> mai </td>
    <td class="year"> 2007 </td>
    <td class="language"> FR </td>
    <td class="language"> EN </td>
    <td class="language"> DE </td>
    <td class="language"> IT </td>
    <td class="language"> ES </td>
  </tr>
</table>
<table [#red]class[/#]="tablo">
  <tr>
    <td class="desc"> Heyoan il est pas meugnon...</td>
    <td class="day"> 26 </td>
    <td class="month"> avril </td>
    <td class="year"> 2007 </td>
    <td class="language"> FR </td>
    <td class="language"> EN </td>
    <td class="language"> DE </td>
    <td class="language"> IT </td>
    <td class="language"> ES </td>
  </tr>
</table>

Or something "like that", et tu devrais pouvoir tabler (oh oh oh) sur quelque chose qui puisse satisfaire ton besoin

Oui, ok, je retourne prendre une petite camomille (à proscrire !!!)
Modifié par 6l20 (03 Nov 2007 - 10:14)

Salut,

6l20 a écrit :
En avant pour de la balise qu'elle est bonne et qui va bien et du code qui n'est pas moins bon

C'est important de s'auto-congratuler !

Juste un ch'tit détail : tu utilises plusieurs fois l'id tablo ... Faut dire aussi que tu utilises une <table> par ligne !

*Edit:
Un petit test en utilisant un td "onglet" :

<!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>Test Over sur Tableau</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:.8em;
}

#tablo {
	text-align: center; 
	color:#004b18;
}

#tablo tr {
	display:block; 
}

#tablo tr:hover, #tablo tr.pairOverJS, #tablo tr.impairOverJS { 
	background-color:#b1c9b8;
}

#tablo .desc {  
	width:500px; 
}

#tablo tr.pair .desc {  
	background: #eaf0ec; 
}

#tablo tr.impair .desc {  
	background: #fff; 
}

#tablo .date { 
	width: 125px; 
	text-align:left; 
}

#tablo tr.pair .date { 
	background: #d5e1d7; 
}

#tablo tr.impair .date {  
	background: #fff; 
}

#tablo .onglet {  
	width:4px;
	padding:0; 
}

.day {
	position:relative;
	left:.1em;
}

.month {
	position:relative;
	left:.3em;
}

.year {
	float:right;
}

#tablo .language { 
	background: #b2c9b9;
	padding: 5px;
}

#tablo tr:hover td.desc, #tablo tr.pairOverJS td.desc, #tablo tr.impairOverJS td.desc { 
	background-color:#a3bead;
}

#tablo tr:hover td.date, #tablo tr.pairOverJS td.date, #tablo tr.impairOverJS td.date { 
	background-color:#94b49d;
}

#tablo tr:hover td.language, #tablo tr.pairOverJS td.language, #tablo tr.impairOverJS td.language { 
	background-color:#7ca489;
}

#tablo tr:hover td.onglet, #tablo tr.pairOverJS td.onglet, #tablo tr.impairOverJS td.onglet { 
	background-color:#004b18;
}

#tablo td {
	padding:4px 6px;
}
</style>
<script type="text/javascript">
//fonction hover sur #tablo tr
function TabloOver()
{
	// si les méthodes n'existent pas, on sort...
	if(!document.getElementById || !document.getElementsByTagName)
	{
		return;
	}

	// pour tous les <tr> de #tablo
	var AnodeList = document.getElementById("tablo").getElementsByTagName("tr");
	for(var lien = 0; lien < AnodeList.length; lien++){
	var oElement = AnodeList[ lien ]; 

	// addEventListener sur le onmouseover
	addEvent(oElement, 'mouseover', AffichOver, false);

	// addEventListener sur le onmouseout
	addEvent(oElement, 'mouseout', AffichOut, false);
	}

}
	
	
//fonction AffichOver
function AffichOver(event)
{
	tr = event.target || window.event.srcElement;
	
	// Uniquement pour les <tr>
	switch (tr.nodeName)
	{
	case 'TR':
		break;
	case 'TD':
		tr = tr.parentNode;
		break;
	default: 
		return;
	} 

	var classe = tr.className;
	if(classe == 'pair') {
		tr.className = 'pairOverJS';
	}
	else {
		tr.className = 'impairOverJS';
	}
}


//fonction AffichOut
function AffichOut(event)
{
	//alert("Out 1");
	tr = event.target || window.event.srcElement;

	// Uniquement pour les <tr>
	switch (tr.nodeName)
	{
	case 'TR':
		break;
	case 'TD':
		tr = tr.parentNode;
		break;
	default: 
		return;
	} 

	var classe = tr.className;
	if(classe == 'pairOverJS') {
		tr.className = 'pair';
	}
	else {
		tr.className = 'impair';
	}
}


//fonction addEvent
function addEvent(oElem, sEvType, fn, bCapture)
{
   return oElem.addEventListener?
      oElem.addEventListener(sEvType, fn, bCapture):
      oElem.attachEvent?
         oElem.attachEvent('on' + sEvType, fn):
         oElem['on' + sEvType] = fn;
}


// Initialisation sur le onload
window.onload=TabloOver;
</script>
</head>
<body>
<table summary="hover sur une ligne dans un tableau" id="tablo">
   <tr class="pair">
    <td class="desc"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </td>
    <td class="date"><span class="year"> 2007 </span><span class="day"> 21 </span><span class="month"> mai </span></td>
    <td class="language"> FR </td>
    <td class="language"> EN </td>
    <td class="language"> DE </td>
    <td class="language"> IT </td>
    <td class="language"> ES </td>
    <td class="onglet">&nbsp;</td>
  </tr>
  <tr class="impair">
    <td class="desc"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </td>
    <td class="date"><span class="year"> 2007 </span><span class="day"> 26 </span><span class="month"> avril </span></td>
    <td class="language"> FR </td>
    <td class="language"> EN </td>
    <td class="language"> DE </td>
    <td class="language"> IT </td>
    <td class="language"> ES </td>
    <td class="onglet">&nbsp;</td>
  </tr>
   <tr class="pair">
    <td class="desc"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </td>
    <td class="date"><span class="year"> 2007 </span><span class="day"> 03 </span><span class="month"> novembre </span></td>
    <td class="language"> FR </td>
    <td class="language"> EN </td>
    <td class="language"> DE </td>
    <td class="language"> IT </td>
    <td class="language"> ES </td>
    <td class="onglet">&nbsp;</td>
  </tr>
  <tr class="impair">
    <td class="desc"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </td>
    <td class="date"><span class="year"> 2007 </span><span class="day"> 17 </span><span class="month"> décembre </span></td>
    <td class="language"> FR </td>
    <td class="language"> EN </td>
    <td class="language"> DE </td>
    <td class="language"> IT </td>
    <td class="language"> ES </td>
    <td class="onglet">&nbsp;</td>
  </tr>
</table>
</body>
</html>

C'est un peu approximatif (notamment pour le Javascript) mais bon !

A+
Modifié par Heyoan (03 Nov 2007 - 09:32)

Alors en réponse à Marvin, j'ai commencé par faire un tableau.

Mon but dans ce travail était d'arriver à faire exactement ce que l'on m'a fournis, alors j'ai opté pour d'autres possibilités que la formule TABLE.

Ce n'est pas un crime et ça ne veut pas dire que je ne suis pas consciente que c'est un tableau. Soit, toutes vos réponses m'amène plus loin et me font avancer, c'est vraiment trop sympa.

La solution de Heyoan est parfaite. Merci beaucoup. Je crois que je vais m'en sortir.

Merci à tous et bon week end.

Ne jamais prendre de camomille après minuit, noter dans mon calepin secret que Heyoan il est pas meugnon, et me coucher plus tôt...

Ceci étant dit, en corrigeant de prime abord cette erreur grotesque sur la répétition de l'id tablo, juste préciser que je ne m'auto-congratule pas, ce n'est pas le genre de la maison, et que ce "message militant" n'est destiné qu'à promouvoir l'utilisation des balises appropriées, ie dans ce cas de figure, les "balises tabulaires" pour présenter des données tabulaires
donc:

.tablo {float: left;text-align: center;background:white; }
.tablo .desc {  background: #eaf0ec;width:500px; }
.tablo .day,#tablo .year, #tablo .month  { background: #d5e1d7; width: 120px;padding-left:0;}
.tablo .language { background: #b2c9b9;padding: 5px;}
.tablo:hover { border-right: 5px solid black;}

<table summary="hover sur une ligne dans un tableau"class="tablo">
   <tr>
    <td class="desc"> La camomille, passé minuit, c'est dangereux... </td>
    <td class="day"> 21 mai 2007</td>
    <td class="language"> FR </td>
    <td class="language"> EN </td>
    <td class="language"> DE </td>
    <td class="language"> IT </td>
    <td class="language"> ES </td>
	
  </tr>
</table>
<table class="tablo">
  <tr>
 
    <td class="desc"> Heyoan il est pas meugnon...d'avoir raison quand même... </td>
    <td class="day"> 26 avril 2007</td>
    <td class="language"> FR </td>
    <td class="language"> EN </td>
    <td class="language"> DE </td>
    <td class="language"> IT </td>
    <td class="language"> ES </td>

  </tr>
</table>

Fonctionne et produit l'effet escompté sous IE7 et Firefox ( hélas pas sous IE6 qui comme chacun sait n'applique le hover que sur les balises <a>...)

Il va de soit que ceci ne représente que mon humble réponse à un problème donné, avec mes "petites lacunes"...
A ce propos, je n'ai pas réussi à appliquer le roll-over uniquement sur la balise <tr> (d'où la proposition de plusieurs <table> sans doute pas très heureuse...) est-ce normal ? Où se situe mon erreur ?

Evidemment, cela ne retire pas le fait que si la réponse peut être exente d'erreurs ce n'est pas plus mal...mes excuses à la communauté

Effectivement ( et je trouve cela un poil dommage) la meilleure solution semble effectivement le javascript notamment pour l'alternance du style des lignes tabulaires et bien évidemment pour l'effet rollover, so welldone Mister Heyoan

Pfiou...il me reste décidemment beaucoup de chemin à parcourir...

6l20 a écrit :
Heyoan il est pas meugnon

Sinon, pour l'auto-congratulation, je croyais que tu plaisantais et je voulais juste rigoler avec toi (et pas de toi of course )...

Par contre, au risque d'avoir l'air d'insister et de te confirmer que je suis pas meugnon , même avec une class à la place de l'id (et en mettant de côté le fait qu'en utilisant une balise <table> par ligne on perd tout l'intérêt des données tabulaires et qu'il vaudrait mieux à la place se servir de balises <span> ), les <tr> risquent fort de s'afficher les uns à côté des autres pour peu que l'écran soit assez large à cause du float:left ...

OK ! Cette fois c'est bon : tu peux me détester !

a écrit :
Sinon, pour l'auto-congratulation, je croyais que tu plaisantais et je voulais juste rigoler avec toi (et pas de toi of course )...

Il n'y a aucun soucis, je plaisantais effectivement, et je ne m'offusque absolument pas, j'adore apprendre...même de mes erreurs

a écrit :
OK ! Cette fois c'est bon : tu peux me détester !

Vrai ?

Je continue de chercher une solution...