un prob css avec border-collapse: collapse;

Fr.eddoZ · Message par **Fr.eddoZ** » 12 juil. 2004, 11:03

bonjour a tous, j'ai recup ici et grace a un membre de la liste le script pour faire un roll over sur les td d'un tableau et j'ai un petit soucis ....

je veux enlever du code cellpadding="0" cellspacing="0 des tableau c'est pour ça que j'ai rajouter dans la class tableau :
border-collapse: collapse;

et la il ne me souligne plus les td en entier mais que le bas ...
est ce normal ?????

Merci a tous !

voila le code :

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<script language="javascript">
function highlightRow(row, onFlag) {
   var tdNodes = row.childNodes;
   for (var i=0; i<tdNodes.length; i++) {
      var tdNode = tdNodes[i];
      if (tdNode.nodeType != 3) {
         if (onFlag) {
            tdNode.className = tdNode.className + "over";
         } else {
            var overPos = tdNode.className.indexOf("over");
            tdNode.className = tdNode.className.substring(0,tdNode.className.length-overPos);
         }
      }
   }
}
</script>
<style>
.tableaux {
   background: #eff3f9;
   border: 1px solid #2e62aa;
   border-collapse: collapse;	
}
.row1 {
   background: #eff3f9;
   border-top: 1px solid #eff3f9;
   border-bottom: 1px solid #eff3f9;
}
.row2 {
   background: #e0e8f2;
   border-top: 1px solid #e0e8f2;
   border-bottom: 1px solid #e0e8f2;
}
.row3 {
   background: #cedcec;
   border-top: 1px solid #cedcec;
   border-bottom: 1px solid #cedcec;
}
/****************** Row highlighting ********************/
.row1over, .row2over, .row3over {
   background-color: #e0e8f2;
   border-top: 1px solid #2e62aa;
   border-bottom: 1px solid #2e62aa;
}</style>
</head>
<body>
<table class="tableaux" width="515" >
<tr onmouseover="highlightRow(this, true);" onmouseout="highlightRow(this, false);">
    <td class="row1"><p>test1</p></td>
    <td class="row2">&nbsp;</td>
    <td class="row3">&nbsp;</td>
</tr>
<tr onmouseover="highlightRow(this, true);" onmouseout="highlightRow(this, false);">
    <td class="row1"><p>test2</p></td>
    <td class="row2">&nbsp;</td>
    <td class="row3">&nbsp;</td>
</tr>
<tr onmouseover="highlightRow(this, true);" onmouseout="highlightRow(this, false);">
    <td class="row1"><p>test3</p></td>
    <td class="row2">&nbsp;</td>
    <td class="row3">&nbsp;</td>
</tr>
</table>
</body>
</html>

jv2759 · Message par **jv2759** » 12 juil. 2004, 12:41

Non border-collapse: collapse; ne remplace pas cellpadding="0" cellspacing="0". Ela ne permet uniquement de définire une methode de résolution quand entre deux célule deux style de trait sont définit... Et dans ce cas c'est celui du dessu qui gagne... ce qui n'est vraiment pas le but....

Je te l'ai refait en suprimant cette fois si tout style et en l'incluhant dans les css.

J'ai ajouter ceci :

width: 512px;
border-collapse: separate;
border-spacing: 0px;

- premiére ligne pour que ce soit les css qui definice la taille du tableaux
- separate pour qu'il face bien la distinction des bordure entre chaque célule, l'une peux être de la même couleur que le fond et donc invisible alors que l'autre et d'une autre couleur pour bien ce voir.
- border-spacing: 0px définit l'espacement entre les célule et donc il n'y en as plus...

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<script language="javascript">
function highlightRow(row, onFlag) {
   var tdNodes = row.childNodes;
   for (var i=0; i<tdNodes.length; i++) {
      var tdNode = tdNodes[i];
      if (tdNode.nodeType != 3) {
         if (onFlag) {
            tdNode.className = tdNode.className + "over";
         } else {
            var overPos = tdNode.className.indexOf("over");
            tdNode.className = tdNode.className.substring(0,tdNode.className.length-overPos);
         }
      }
   }
}
</script>
<style>
 	.tableaux {
 		background: #eff3f9;
 		border: 1px solid #2e62aa;
 		width: 512px;
 		border-collapse: separate;
 		border-spacing: 0px;
 	}


 .row1 {
 	background: #eff3f9;
 	border-top: 1px solid #eff3f9;
 	border-bottom: 1px solid #eff3f9;
 }

.row2 {
   background: #e0e8f2;
   border-top: 1px solid #e0e8f2;
   border-bottom: 1px solid #e0e8f2;
}
.row3 {
   background: #cedcec;
   border-top: 1px solid #cedcec;
   border-bottom: 1px solid #cedcec;
}
/****************** Row highlighting ********************/
.row1over, .row2over, .row3over {
   background-color: #e0e8f2;
   border-top: 1px solid #2e62aa;
   border-bottom: 1px solid #2e62aa;
}</style>
</head>
<body>
<table class="tableaux">
<tr onmouseover="highlightRow(this, true);" onmouseout="highlightRow(this, false);">
    <td class="row1"><p>test1</p></td>
    <td class="row2">&nbsp;</td>
    <td class="row3">&nbsp;</td>
</tr>
<tr onmouseover="highlightRow(this, true);" onmouseout="highlightRow(this, false);">
    <td class="row1"><p>test2</p></td>
    <td class="row2">&nbsp;</td>
    <td class="row3">&nbsp;</td>
</tr>
<tr onmouseover="highlightRow(this, true);" onmouseout="highlightRow(this, false);">
    <td class="row1"><p>test3</p></td>
    <td class="row2">&nbsp;</td>
    <td class="row3">&nbsp;</td>
</tr>
</table>
</body>
</html>

Fr.eddoZ · Message par **Fr.eddoZ** » 12 juil. 2004, 12:45

personne ne voit ou est ce que j'ai mal formulué ma question ???

c'est lundi matin, c'est fort possible !!!!!!!!!!

jv2759 · Message par **jv2759** » 12 juil. 2004, 13:05

Cela ne répond pas à ta question?

calimo · Message par **calimo** » 12 juil. 2004, 13:51

Rassure-moi, ce tableau ne va pas servir à la mise en page non ? Dans ce cas, désolé de la jouer Ayatollah des standards, mais tu devrais y mettre un sommaire (attribut summary) et un titre (élément caption)

Invité · Message par **Invité** » 12 juil. 2004, 14:29

jv2759 a écrit :Cela ne répond pas à ta question?

Si si jv2759 mais nos message ont du se croiser ... c'est le meme rendu !!
c'est top merci bien !!!

calimo: pourquoi mettre un attribut summary si je ne vais pas le remplir ??
c'est obligatoire ?

allez j'y retourne !! merci a tous

calimo · Message par **calimo** » 12 juil. 2004, 14:36

Invité a écrit :calimo: pourquoi mettre un attribut summary si je ne vais pas le remplir ??
c'est obligatoire ?

Ben oui tu dois le remplir sinon il sert à rien

Il contient un bref résumé du contenu du tableau

Voir la définition pour plus de détails. Elle n'est peut-être pas obligatoire, mais elle est indispensable !

D'ailleurs la lecture de la page entière, bien qu'un peu indigeste, est fort instructive sur la manière de bien faire les tableaux en HTML

Nucleos · Message par **Nucleos** » 12 juil. 2004, 15:01

calimo a écrit :un peu indigeste

oui, je confirme. J'ai abandonné pour http://openweb.eu.org/articles/tableaux_css/ et http://fr.selfhtml.org/html/tableaux/index.htm

À noter que <caption> n'est pas obligatoire... L'important, c'est que la sémantique du tableau (= ce que veut dire le tableau... à quoi il sert) soit compréhensible pour un lecteur d'écran. ça passe éventuellement par un caption, mais pourquoi pas par une légende explicite "Voici les statistiques...", des balises de titre (<hx>, <th>)

Fr.eddoZ · Message par **Fr.eddoZ** » 13 juil. 2004, 19:30

Je suis ok pour la validité des tableaux et des pages en général, la c'etait epuré juste pour vous montrer, sinon mes tableaux (qui ne servent que pour afficher des données d'une requette) sont bien valide, meme pour des intranet

... bien que je ne mette pas cet attribut summary .... mais bon je le ferais maintenant !!! sinon tout l'affichage et la mise en page est faite via css ... comme y faut koua !!!!!!!!

Ha j'ai encore une petite question, est il correct de déclarer ses feuilles de styles ainsi ? Et est ce qu'il y a un ordre d'importance dans la lecture par le navigateur ?

Code : Tout sélectionner

<style type="text/css" media="screen">@import url(css/general.css); </style>
<style type="text/css" media="screen">@import url(css/default.css); </style>
<style type="text/css" media="screen">@import url(css/site.css); </style>

Allez bon feu d'artifesse a tous

!!!

bobo · Message par **bobo** » 14 juil. 2004, 12:02

Toutes les feuilles de styles déclarées sont utilisées comme s'il n'y avait qu'une seule feuille qui contiendraient toutes tes règles. (avec un cas particulier pour les feuilles alternatives, mais laissons ça de coté pour l'instant)
Par exemple :
general.css

Code : Tout sélectionner

body {
  color: red;
  background-color: black;
}

et
default.css

Code : Tout sélectionner

p {
  color: black;
  background-color: white;
}

sont équivalent à une seule feuille contenant :

Code : Tout sélectionner

body {
  color: red;
  background-color: black;
}

p {
  color: black;
  background-color: white;
}

Fr.eddoZ · Message par **Fr.eddoZ** » 14 juil. 2004, 19:40

vi vi merci bobo mais ce n'etait pas la question ...

je voulais savoir si la façon de déclarer etait bonne avec le '@import url' pour toutes les feuilles de style, tel que ça marche trés bien mais est-ce valide ?

Donc ça ?

Code : Tout sélectionner

<style type="text/css" media="screen">@import url(css/general.css); </style>
<style type="text/css" media="screen">@import url(css/default.css); </style>
<style type="text/css" media="screen">@import url(css/site.css); </style>

ou si il vaut mieux ça ?

Code : Tout sélectionner

<style type="text/css" media="screen">@import url(css/general.css); </style>
<link href="../css/default.css" rel="stylesheet" type="text/css" />
<link href="../css/site.css" rel="stylesheet" type="text/css" />

ou autre ?

?

pour info :
- default.css est la feuille de style pour les balises html : body, p, a acronym, etc etc ... (par default)
- general.css est la feuille de style regroupant les styles que j'utilise régulierement #header, #content, #nav etc etc ... (en general)
- site.css est la feuille de style propre au site lui meme ex :

Code : Tout sélectionner

.alert {
	color:#F00;
	font-weight: bold;
}

etc etc ...

Et donc est ce que c'est important pour la lecture par le navigateur l'ordre et la façon de les déclarer ?

C'est juste pour savoir la syntaxe la plus 'propre' possible !

@+

calimo · Message par **calimo** » 15 juil. 2004, 08:53

C'est exactement pareil, il n'y a pas de limiter. La seule chose c'est d'appeler les @import en premier (avant de mettre autre chose dans <style />). Mais je pense que tu peux mettre des <link /> avant sans problèmes

Tu peux réduire le code à

Code : Tout sélectionner

<style type="text/css" media="screen">
@import url(css/general.css);
@import url(css/default.css); 
@import url(css/site.css);
</style>

c'est exactement équivalent.
Mais tu peux mettre ça

Code : Tout sélectionner

<style type="text/css" media="screen">@import url(css/general.css); </style>
<link href="../css/default.css" rel="stylesheet" type="text/css" />
<link href="../css/site.css" rel="stylesheet" type="text/css" />

ou ça

Code : Tout sélectionner

<link href="../css/general.css" rel="stylesheet" type="text/css" />
<link href="../css/default.css" rel="stylesheet" type="text/css" />
<link href="../css/site.css" rel="stylesheet" type="text/css" />

ou d'autres choses encore, c'est égal

Ce que voulait dire bobo c'est que tu peux les disperser, les regrouper, ça revient au même

Fr.eddoZ · Message par **Fr.eddoZ** » 20 juil. 2004, 11:24

ok merci bien pour ce petit point de détail !!!!!!!!!!

je suis dans les normes tout va bien

Geckozone

un prob css avec border-collapse: collapse;

un prob css avec border-collapse: collapse;

???

tout a fait calimo et Nucleos !!!

merci

Qui est en ligne ?