28220 sujets

CSS et mise en forme, CSS3

Question de newbie : police avec tableau [Résolu]

Bonjour !

J'aimerais juxtaposer une police avec un effet de bordure (bas et haut) à côté d'une image.

En code, ça donne ça :

<div align="left"><img src="../Pics/Promenade_HP.jpg" width="360" height="239" hspace="3" align="left"><span class="legende">Hyde Park, un dimanche matin, en 1901.</span></div>


Et pour la police : 

.legende {
	border-top:1px solid #EE621F;
	border-bottom:1px solid #EE621F;
	font-size: 12px;
	color: #000000;
	padding-top:5px;
	padding-bottom:5px;
	font-style: italic;
}


Le problème est que le texte en .legende apparaît totalement hachuré sous IE (je n'ai pas testé avec mozilla) au lieu d'être comme ceci (pour obtenir ça, il m'a fallu mettre le texte dans un tableau - c'est pas biiieeen !) :

http://perso.wanadoo.fr/petite-princesse/Lieux/Hyde_Park.htm

(scrollez jusqu'à Hyde Park, un dimanche matin en 1901 ; 1ere image : texte dans un tableau ; 2nde image : texte normal)

Quelqu'un pourrait-il me filer un coup de main ?
Modifié par kherubim (04 Oct 2005 - 23:06)
Administrateur
Bonjour et bienvenue ici.

Au vu de ton code qui n'est pas affiché comme le demandent les Règles du forum, j'ai bien l'impression que tu n'as pas pu lire le sujet important, placé tout en haut du salon et qui est destiné aux débutants sur le forum.

Cette annonce n'apparaît-elle pas chez toi ? Smiley decu
Modifié par Raphael (04 Oct 2005 - 14:04)
Administrateur
Un <span>, comme tout élément de type en ligne (sauf exceptions) ne peut pas avoir de dimensions (height, width, etc.)
Une piste peut-être...

Je vois (je crois voir Smiley cligne ) que ton texte est souligné chaque ligne (et s'arrête sur 1901) et que le surlignage est trop haut (il n'apparaît pas sur la ligne de texte du haut, il doit sortir de son conteneur)...

Pour faire ce que tu veux faire, il conviendrait d'encadrer le bloc plutôt que le texte...

Je dirais une div avec les bordures (avec 100% pour la taille je crois pour encadrer même en dehors du texte) et supprimer la bordure du texte.

Dites les forts en CSS, j'ai bon ? Smiley lol

PB: tous les textes ne changent pas de taille
Raphael a écrit :
Bonjour et bienvenue ici.

Au vu de ton code qui n'est pas affiché comme le demandent les Règles du forum, (snip) Smiley decu


C'est corrigé, mille excuses pour mon quotage de gorêt... Smiley confused
Bob (MC Melun) a écrit :
Une piste peut-être...

Je vois (je crois voir Smiley cligne ) que ton texte est souligné chaque ligne (et s'arrête sur 1901) et que le surlignage est trop haut (il n'apparaît pas sur la ligne de texte du haut, il doit sortir de son conteneur)...

Pour faire ce que tu veux faire, il conviendrait d'encadrer le bloc plutôt que le texte...

Je dirais une div avec les bordures (avec 100% pour la taille je crois pour encadrer même en dehors du texte) et supprimer la bordure du texte.


J'avoue que j'ai chopé l'idée sur un site mais la personne ne s'était pas embarassée pour que le rendu soit "clean" : un tableau de 2 colonnes, à gauche l'image, à droite le texte avec les effets .css ...

Or lui se contentait d'annoter brièvement de petites images. C'est pas le cas chez moi où les légendes sont suivies par du texte. Qui plus est je n'ai pas envie que mes pages soient trop trop longues non plus (la page citée l'est déjà beaucoup).
Le problème est résolu Smiley biggrin

Il suffisait de remplacer le mauvais code :
<span class="nom_du_style">TEXTE TEXTE TEXTE</span>


par :

<p class="nom_du_style">TEXTE TEXTE TEXTE</p>


Le rendu est même plus chouette car les bordures collent à l'image (au contraire du texte qui est décalé).
Sujet clos
Aller à