Soigner la présentation de la bordure d'un tableau.

Le
Christophe Raverdy
Bonjour.

Le code que j'avais fournis était truffé d'erreurs je l'ai donc quelque peu
nettoyé :


http://raverdy.christophe.free.fr/coreen/flashcard/flashcard.html

http://raverdy.christophe.free.fr/coreen/flashcard/flashcard-screen.css
http://raverdy.christophe.free.fr/coreen/flashcard/flashcard-print.css


Je pense être arrivé à une maquette acceptable modulo un point qui me
chiffonne :

Mon tableau est constitué d'un nombre potentiellement important de lignes
chacune composé de deux cellules principales (recto et verso).
- Au recto on trouve en fait 2 cellules (séparation horizontale);
- Au verso on trouve en fait 3 cellules (séparation verticale).

Le problème est qu'une interruption dans les bordures (horizontalement à
gauche et verticalement à droite) est visible et fait tache.

La solution la plus simple me semble de définir un tableau d'une ligne et
deux cellules avec les bordures qui vont bien, un incluant un tableau sans
bordure dans chacune de ces cellules (1 ligne de 2 cellules à gauches, 3
lignes d'1 cellule à droite).

Existe-t-il une solution plus élégante en utilisant les CSS ?

Avec mes remerciements.
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses Page 1 / 2
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Olivier Miakinen
Le #22075621
Le 14/05/2008 17:44, Christophe Raverdy a écrit :

Le code que j'avais fourni était truffé d'erreurs je l'ai donc quelque peu
nettoyé :

http://raverdy.christophe.free.fr/coreen/flashcard/flashcard.html

http://raverdy.christophe.free.fr/coreen/flashcard/flashcard-screen.css
http://raverdy.christophe.free.fr/coreen/flashcard/flashcard-print.css

Je pense être arrivé à une maquette acceptable modulo un point qui me
chiffonne :

Mon tableau est constitué d'un nombre potentiellement important de lignes
chacune composé de deux cellules principales (recto et verso).
- Au recto on trouve en fait 2 cellules (séparation horizontale);
- Au verso on trouve en fait 3 cellules (séparation verticale).

Le problème est qu'une interruption dans les bordures (horizontalement à
gauche et verticalement à droite) est visible et fait tache.



En effet.

La solution la plus simple me semble de définir un tableau d'une ligne et
deux cellules avec les bordures qui vont bien, un incluant un tableau sans
bordure dans chacune de ces cellules (1 ligne de 2 cellules à gauches, 3
lignes d'1 cellule à droite).



Ou bien deux cellules, l'une incluant deux div dont un en float:left,
l'autre incluant trois div.

Existe-t-il une solution plus élégante en utilisant les CSS ?



Je crois tout simplement qu'en précisant « border-right:none; » dans
td.flashcard_jomo tu lui demandes de ne rien remplir comme bordure, mais
sans réduire l'espace disponible. Essaye : « border-right:0 none; »
(idem pour les autres).

Sinon, il est possible que jouer sur border-collapse ou border-spacing
améliore les choses.
SAM
Le #22075601
Christophe Raverdy a écrit :
Bonjour.

Le code que j'avais fournis était truffé d'erreurs je l'ai donc quelque peu
nettoyé :


http://raverdy.christophe.free.fr/coreen/flashcard/flashcard.html

http://raverdy.christophe.free.fr/coreen/flashcard/flashcard-screen.css
http://raverdy.christophe.free.fr/coreen/flashcard/flashcard-print.css

Existe-t-il une solution plus élégante en utilisant les CSS ?



voir ici :
clic-droit sur le cadre et demander le view-source ou afficher ce cadre

testé Firefox 2
N'a plus rien à voir avec ton système ...

mon IE6 ne sait pas afficher les polices esstrangères :-(

--
sm
Olivier Miakinen
Le #22075591
Le 15/05/2008 12:34, SAM a écrit :

Existe-t-il une solution plus élégante en utilisant les CSS ?



voir ici :
clic-droit sur le cadre et demander le view-source ou afficher ce cadre

testé Firefox 2
N'a plus rien à voir avec ton système ...



Je trouve ça en effet bien plus élégant.

mon IE6 ne sait pas afficher les polices esstrangères :-(



Ça fonctionne dans mon IE7, mais je ne suis pas sûr que IE6 Windows gère
le :first-child ; cela dit il suffit de rajouter un nom de classe pour
s'en sortir quand même.
SAM
Le #22075581
Olivier Miakinen a écrit :
Le 15/05/2008 12:34, SAM a écrit :
Existe-t-il une solution plus élégante en utilisant les CSS ?


voir ici :
clic-droit sur le cadre et demander le view-source ou afficher ce cadre

testé Firefox 2
N'a plus rien à voir avec ton système ...



Je trouve ça en effet bien plus élégant.



Merci, merci :-)

mon IE6 ne sait pas afficher les polices esstrangères :-(



Ça fonctionne dans mon IE7, mais je ne suis pas sûr que IE6 Windows gère
le :first-child ; cela dit il suffit de rajouter un nom de classe pour
s'en sortir quand même.



ha, j'ai une version IE comme ça : pas plus ...
ni les caractères chinois ni les tailles de polices :-(
sais pas c'qui s'pace ?

Pourtant le doctype a été changé.

--
sm
Olivier
Le #22075521
Le 15.05.2008 13:29, Olivier Miakinen a écrit :
Ça fonctionne dans mon IE7, mais je ne suis pas sûr que IE6 Windows gère
le :first-child ; cela dit il suffit de rajouter un nom de classe pour
s'en sortir quand même.



Il me semble que IE8 de Dean Edwards permet aux IE de comprendre
:first-child.

--
Olivier
SAM
Le #22075511
Olivier a écrit :
Le 15.05.2008 13:29, Olivier Miakinen a écrit :
Ça fonctionne dans mon IE7, mais je ne suis pas sûr que IE6 Windows gère
le :first-child ; cela dit il suffit de rajouter un nom de classe pour
s'en sortir quand même.



Il me semble que IE8 de Dean Edwards permet aux IE de comprendre
:first-child.



Il en est à IE8 ?
Toujours une longueur d'avance sur l'original ! ?

Je vois mal mettre IE8 sur cJoint :-)

--
sm
Pierre Goiffon
Le #22075451
SAM wrote:
Il me semble que IE8 de Dean Edwards permet aux IE de comprendre
:first-child.





Tout à fait :
http://dean.edwards.name/IE7/

Il en est à IE8 ?



J'ai découvert avec surprise hier (besoin de la transparence progressive
PNG sous MSIE 6) que tout avait été refait ! Le script est hébergé sur
Google maintenant, et n'est plus modulaire... Il y a par contre une
séparation en 2 fichiers, IE7 et IE8 :

# IE7 is no longer modular. Instead I’ve merged the scripts into two:
IE7.js and IE8.js
# IE7.js includes only fixes that are included in the real MSIE7 browser.
# All other enhancements are moved to IE8.js.

(source http://dean.edwards.name/weblog/2008/01/ie7-2/)

Mais les 2 .js font chacun une trentaine de Ko ce qui n'est pas trop
excessif (d'autant qu'on peut les attaquer directement chez Google)
Christophe Raverdy
Le #22075181
Je commence (avec du retard) à tester les suggestions proposées. Merci à
tous.



Olivier Miakinen wrote:

Pour résumer : j'avais un tableau avec des cellules fractionnées, et je
souhaitais que la bordure apparaisse proprement. J'ai signalé mon problème
et en attendant j'ai recouru à une solution palliative crade (cf
http://raverdy.christophe.free.fr/coreen/flashcard/v_01/flashcard.html)

à savoir gérer un premier tableau pour les bordures, chacune des deux
cellules contenant un autre tableau : on retrouve le tableau ci-après.

<tr class="flashcard-tr"><td class="flashcard-td-exterieur"><table
class="flashcard-table"><tr class="flashcard-tr">
<td class="flashcard_jomo">CARACTERES</td>
<td class="flashcard_clavier">CLAVIER</td>
</tr></table></td><td class="flashcard-td-exterieur"><table
class="flashcard-table"><tr class="flashcard-tr">
<td class="flashcard_cle">CLE</td>
</tr><tr class="flashcard-tr">
<td class="flashcard_son">SON</td>
</tr><tr class="flashcard-tr">
<td class="flashcard_exemple">EXEMPLE</td>
</tr></table></tr>

C'est relativement indigeste par contre c'est suffisant lorsque l'on code en
php et que l'on a juste besoin d'un modèle de code html sur lequel on
opérera une fusion.



J'ai pris le temps de commencer à lire, comprendre et appliquer. Cela donne
(http://raverdy.christophe.free.fr/coreen/flashcard/v_02/flashcard.html) un
résultat identique en apparence.

En fait la feuille de style principale est plus légère (de 1299 à 681
octets), le code html y gagne pareillement (de 12040 à 6737 octets) mais
surtout la lisibilité d'une ligne de tableau s'est très largement
améliorée :

<tr>
<td class="flashcard_face">
<div class="flashcard_jomo">CARACTERES</div>
<div class="flashcard_clavier">CLAVIER</div>
</td>
<td class="flashcard_face">
<div class="flashcard_cle">CLE</div>
<div class="flashcard_son">SON</div>
<div class="flashcard_exemple">EXEMPLE</div>
</td>
</tr>


Et ceci juste en définissant les différentes "classes" qui apparaissent
ci-dessus et en forçant l'attribut "float:left;" pour les deux premières
afin que les "cellules" soient cote à cote.


Je me suis également servi de :
http://css.alsacreations.com/Bases-et-indispensables/Comprendre-le-positionnement-des-balises-en-CSS
SAM
Le #22075171
Christophe Raverdy a écrit :
Je commence (avec du retard) à tester les suggestions proposées. Merci à
tous.


(...)
J'ai pris le temps de commencer à lire, comprendre et appliquer. Cela donne
un résultat identique en apparence.

En fait la feuille de style principale est plus légère (de 1299 à 681
octets), le code html y gagne pareillement (de 12040 à 6737 octets) mais
surtout la lisibilité d'une ligne de tableau s'est très largement
améliorée :



On peut certainement gagner en :
- employant des noms de class plus courts
- supprimant des class (en td on emploie la même)

<tr>
<td>
<div class="jomo">CARACTERES</div>
<div class="clavier">CLAVIER</div>
</td>
<td>
<div class="cle">CLE</div>
<div class="son">SON</div>
<div class="exemple">EXEMPLE</div>
</td>
</tr>

On peut gagner encore plus (2432 octets + 630 octets de styles)
en n'ayant aucune class :

<tr>
<td>
<dl>
<dt>le zigouuigoui kivabien</dt>
<dd>l</dd>
</dl>
</td>
<td>
<dl>
<dt>6</dt>
<dd>i</dd>
<dd>Isabelle</dd>
</dl>
</td>
</tr>

à voir ici :
et version IE6 (plus lourde)

--
sm
Christophe Raverdy
Le #22075161
SAM wrote:


Existe-t-il une solution plus élégante en utilisant les CSS ?



voir ici :
clic-droit sur le cadre et demander le view-source ou afficher ce cadre

testé Firefox 2
N'a plus rien à voir avec ton système ...



Effectivement. Je pense que je vais essayer de comprendre ce qu'il y a
derrière clear et first-child.

Ce qui m'embête par rapport à la solution retenue
(http://raverdy.christophe.free.fr/coreen/flashcard/v_02/flashcard.html)
suite à la suggestion d'Olivier Miakinen c'est la
lisibilité "sémantique" : J'ai l'impression (confirmée ?) que la méthode
qu'il suggère est standard.


mon IE6 ne sait pas afficher les polices esstrangères :-(



A ce sujet, j'en profite pour diapublier (sans suivi) sur les forums
fr.comp.infosystemes.www.navigateurs et fr.comp.infosystemes.www.auteurs :

A ce que j'ai compris, avec Vista les polices (et méthodes de saisie)
exotiques sont installées d'office. Avec XP par contre, si l'on veut
afficher les mêmes polices (il s'agit ici du coréen) il faut soit installer
les méthodes de saisie exotiques soit récupérer des polices ttf
(http://www.wazu.jp/index.html) et les installer à la convenance sous
windows/fonts (ou windows/polices) voire /windows.

A ce propos : je commence à tester avec mon Ipaq 214, notamment dans le but
de produire une feuille de style pour le media "handheld".

Je rencontre actuellement quelques difficultés, et j'ai posé une question
précise sur microsoft.public.fr.pocketpc. Cependant je serai preneur
d'informations quant aux spécificités du fonctionnement d'Internet Explorer
sur pocket pc ainsi que de la marge de manoeuvre relative aux polices
(comment les installe-t-on d'ailleurs ?).
Publicité
Poster une réponse
Anonyme