Cadres recalcitrants CSS

[einqui]

Bonjour,

Je suis en train de modifier mon site pour faciliter la navigation, et j'ai un leger probleme avec des cadres. Des versions miniatures des photos sont regroupees dans un tableau a gauche et chaque case de ce tableau devrait etre dotee d'un cadre entourant chaque photo.
Sous Safari (et egalement avec Firefox), la partie inferieure du cadre est anormalement epaisse.

Voila le css :

.tableau{
border-width: 2px;
border-style: solid;
border-color: #E8DCBF;
background-color: #B74D04;
padding: 3px}

et le XHTML

<div id="liste-photo">
<table>
<tr>
<td class="tableau" align="center">
<a href="suzume.html"><img class="thumb" src="./mini-suzume.jpg" alt="Danse" title="Danse" /></a>
</td>
.
.
.
</tr>
</table>
</div>

Le div liste-photo est simplement utilise pour placer le tabelau au bon endroit dans la page.

La page est visible a

http://www.furanku.net/FESTIVAL/thumb-fest.html

Quelqu'un aurait-il une idee de l'origine du probleme?

 

[molgow]

Hello,

Le problème vient du fait qu'il laisse de la place en dessous pour afficher des éventuelles caractères (comme "p", "q", etc...). A mon avis, la solution est de changer ta façon de faire, et de ne pas utiliser le fond des cases de ton tableau pour afficher ce bord d'une autre couleur, mais utiliser directement le bord de l'image pour afficher ça.

Donc par exemple, pour avoir un bord de 4px autour de tes images :

  .thumb{
 	background: none;
  	width: 40px;
  	border-width: 4px;
  	border-style: solid;
  	border-color: #B74D04;
  
  }
  
  .tableau{
  	padding: 3px;
  }

 

[einqui]

Effetivement, je crois que je vais essayer (par contre pourquoi est-ce qu'il voudrait ecrire des caracteres comme "p" ou "q"?)
Ce qui me fait penser a une autre question. Je tape directement le code HTML a la main. Ce qui veut dire que je vais devoir reecrire le contenu de nombreux fichiers. Est-ce qu'il existe une methode rapide (autre que copier-coller) pour faire ce genre de tache? Est-ce qu'Applescript pourrait le faire?

 

[molgow]

Effetivement, je crois que je vais essayer (par contre pourquoi est-ce qu'il voudrait ecrire des caracteres comme "p" ou "q"?)

Ce que je voulais dire, c'est que les caractères sont écrits sur la même ligne que la ligne qui est définie par le bas de l'image. Par conséquent, lorsque tu as des caractères tels que "p" ou "q" (ou "g" ou "j" ou ... ils doivent être affiché en dessous de cette ligne. Voilà pourquoi l'espace paraît plus grand en dessous.

 

[einqui]

OK!
Je ne vais pas faire le benêt et demander pouquoi il voudrait ecrire des caracteres tels que "g" ou "j"

 

[Nephou]

le problème vient, comme l'a signalé tortue-géniale de la gestion conjointe du texte et des images en html. En effet les images sont alignés horizontalement par rapport à la ligne de base du texte. Par défaut les images sont posées dessus (mais elles peuvent également être centrées ou suspendues). Comme sous la ligne de texte il y a par défaut de la place pour les descendantes ( p g q j y en général), une image posée sur une ligne de base laisse voir un espace au dessous.

Heureusement, il existe le paramètre line-height qui permet de régler la taille restant de part et d'autre de la ligne de base. Si dans ta feuille de style .tableau tu ajoutes "line-height:0px;" le blanc -- qui est ici marron -- disparaît..

voilà voilà :zen:

P.S. : je n'aurai pas construit la page comme ça mais ce n'est pas le propos

 

[einqui]

Ca marche !!!
Desole pour Molgow, mais c'etait plus simple de ne modifier qu'une ligne du css plutot que plein de pages Html.

P.S. : Nephou, un petit message dans ta boite...

 

[Nephou]

entre le mp, le suivi de discussion et le coup de boule je ne vois pas comment je pouvais te louper

bonne fin d'après-midi :siffle:

 

[Spyro]

Je tape directement le code HTML a la main. Ce qui veut dire que je vais devoir reecrire le contenu de nombreux fichiers. Est-ce qu'il existe une methode rapide (autre que copier-coller) pour faire ce genre de tache?

BBEdit (mais c'est surement pas le seul à permettre de chercher-remplacer dans un groupe de fichiers - seulement le plus cher :siffle:).
Autre méthode: utiliser des templates en php (ou en ssi ?) pour éviter les répétitions (enfin si c'est possible). :style:
Mais je m'écarte du sujet. :zen:

 

[einqui]

entre le mp, le suivi de discussion et le coup de boule je ne vois pas comment je pouvais te louper

bonne fin d'après-midi :siffle:

Ben :

- le suivi de discussion pour que tout le monde sache que ca marche (au cas ou ca interesserait quelqu'un)
- le MP pour ne pas polluer la discussion
- et le coup de boule parce que c'etait merite

Et pour la modification de plusieurs fichiers, je vais voir du cote des editeurs, parce que je connais pas le Php (Snif) et SSI ne m'evoque rien....