Alignement vertical image-texte et retour chariot

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Alignement vertical image-texte et retour chariot

housse

Bonjour tout le monde !

J'ai un problème qui me prend grave la tête, alors je vais essayer de vous exprimer le plus clairement possible pour enfin trouver une solution !

*** *** ***

I - Objectif :

J'aimerai aligner verticalement un texte, ou plutôt un paragraphe, à côté d'une image. Voici un exemple (c'est un montage) de ce que je voudrais faire.

*** *** ***

II - Quelques indications :

1 - Pour plusieurs raisons, il ne m'est pas possible d'utiliser des tableaux
2 - Le contenu du bloc texte est variable, et donc, il ne m'est pas possible d'utiliser des padding-top et autres.
3 - J'aimerai que ce soit compatible IE et Firefox.

Après quelques recherche, je fais le code suivant, qui fonctionner :

Code :

<img src="{URL}" width="60px" height="80px" border="0px" alt="Image Forum" style="vertical-align: middle;"/>{TEXT}

*** *** ***

III - Problème :

Le texte, lorsqu'il est trop grand (car je rappelle qu'il peut varier de taille), fait un retour chariot en dessous de l'image. Voici un exemple :

Vous en conviendrez, c'est très laid. J'aimerais empêcher ce retour chariot. Comment faire pour inclure le retour à la ligne à l'intérieur de l'alignement ? J'ai essayé sans succès les choses suivantes :

Code :

<p><img src="{URL}" width="60px" height="80px" border="0px" alt="Image Forum" style="vertical-align: middle;"/>{TEXT}</p>

Code :

<p><img src="{URL}" width="60px" height="80px" border="0px" alt="Image Forum" style="vertical-align: middle;"/><p>{TEXT}</p></p>

Code :

<div style="float:left;"><img src="{URL}" width="60px" height="80px" border="0px" alt="Image Forum" style="vertical-align:middle;" /></div> <p>{TEXT}</p>

Code :

<div style="vertical-align:middle;"> <img src="{URL}" width="60px" height="80px" border="0px" alt="Image Forum" style="float:left;"/> <p>{TEXT}</p></div>

Si vous avez la moindre info, merci d'avance !

Publicité

stravoguine

housse

Alors merci de répondre aussi vite, c'est un plaisir.[

Citation :

Tu peux envoyer ton adressse internet si ton index.html est déja dessus? Que je regarde dans le code. Tu as séparé le css de l'html?

J'aurai bien voulu, mais c'est pas possible. D'une part parce que ça servirait à rien (c'est un morceau d'élément d'une structure phpbb3, donc pour s'y repérer bon courage)... et d'autre part parce que je m'occupe actuellement de ça en local.

Donc désolé, pas possible.

Citation :

Essaies d'appliquer ça à ton conteneur :

1. line-height: height(image);

Alors j'ai fais ça :

Code :

<div style="line-height:80px; vertical-align:middle;">
<img src="{URL}" width="60px" height="80px" border="0px" alt="Image Forum" style="vertical-align:middle;"/>
<p style="font-size: 1em";>{TEXT}</p>
</div>

Mais ça ne fonctionne pas. J'obtiens la chose suivante :

EDIT

J'ai testé aussi :

Code :

<div style="vertical-align: middle; line-height: 80px;">
<img style="vertical-align: middle" src="..." />
<a style="vertical-align: middle">truc</a>
</div>

Message édité par housse le 28-05-2007 à 23:48:56

stravoguine

rajoute ça à ton image en adaptant dans ton code css :

<img style="vertical-align: middle" src="..." />

En fait il faut que ton image et ton conteneur aient les mémes propriétés.

Ne fait pas un simple copié collé du code que j'ai mis, c'est du générique, adapte le au tien.

Message cité 1 fois
Message édité par stravoguine le 28-05-2007 à 23:52:22

housse

stravoguine a écrit :

rajoute ça à ton image :

Mais ça y'a pas de problème. L'alignement vertical marche très bien. Pour mieux montrer le problème, utilisons une balise SPAN à la place de P, et ajoutons une bordure :

Code :

<img src="{URL}" width="60px" height="80px" border="0px" alt="Image Forum" style="vertical-align: middle;"/><span style="vertical-align: middle; border:1px solid black;">{TEXT}</span>

On voit très nettement la ligne se briser et partir sous l'image. Alors une balise P envoie tout le bloc texte sous l'image ; une balise div fait un peut n'importe quoi...

Citation :

Ne fait pas un simple copié collé du code que j'ai mis, c'est du générique, adapte le au tien.

T'inquiètes ^^

Message édité par housse le 28-05-2007 à 23:56:44

stravoguine

Ok fais comme ça, j'ai trouvé cette solution pour l'instant :

Citation :

<!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" >
<head>
<title>exemple</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
.imageflottante
{
float: left;
padding-right: 5px;
}
div
{
background-color: lightgrey;
border: 0px;
position: absolute;
}
p
{
width: 450px;
}
</style>
</head>
<body>

<div><img class="imageflottante" src="ok.jpg" width="60px" height="80px" border="0px" alt="Image Forum" /><p>Débats sur des notions ou des problématiques philosophiques, quelles qu'elles soient.</p></div>

</body>
</html>

Ce que j'ai fait marche, essaies dans une page html vierge, aprés si c'est dans un design phbb, adapte le code.

Message édité par stravoguine le 29-05-2007 à 00:42:00

stravoguine

Sinon tu as ça si tu veux pas de css à part, mais j'ai un probléme avec la marge qui ne veut plus marcher bizarrement :

Citation :

<!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" >
<head>
<title>exemple</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

</head>
<body>

<div style="background-color: lightgrey; border: 0px; position: absolute;"><img style="float: left;" src="ok.jpg" width="60px" height="80px" border="0px" alt="Image Forum" /><p style="width: 450px;">Débats sur des notions ou des problématiques philosophiques, quelles qu'elles soient.</p></div>

</body>
</html>

Message édité par stravoguine le 29-05-2007 à 00:48:32

housse

Merci merci !

Alors j'ai essayé de joué sur le width, comme tu as fait, mais ça ne marche pas chez moi. Et quant à la position absolute, là ça créé un gros foutoir sur l'ensemble de la page, donc c'est exclu.

Par contre, je comprends absolument comment, avec ton float left, tu arrives à centrer verticalement le texte à l'image. Moi systématique, le float left coince mon texte sur le bord en haut à droite de l'image...

housse

Là j'y suis presque :

Code :

<img src="{URL}" width="60px" height="80px" border="0px" alt="Image Forum" style="float: left; margin-right:5px; vertical-align:middle;"/>
<span style="font-size: 1em; width: 440px; height="80px;" margin-left: 5px;">{TEXT}</span>

Plus que le problème de l'alignement vertical... (pas de padding ni de top...)

stravoguine

tu as pas moyen de coller une feuille de style?

SInon t'es sur la bonne voix à ce qe je vois.

Si tu as la solution compléte postes là!

A+

Publicité

housse

Alors depuis, j'ai progressé.

J'ai trouvé cette solution, avec un Float, et qui fonctionne parfaitement :

Code :

<p><img src="{URL}" width="60px" height="80px" border="0px" alt="Image Forum" style="float: left; margin-right: 5px; vertical-align:middle;"/>
<p style="font-size: 1em;">{TEXT}</p></p>

Bête comme choux... Or (alors oui je saoule), je ne peux pas non plus utiliser de balises <p>. Les seules que je peux utiliser sont des balises Span. Et c'est là que je rencontre tout le problème mentionné du vertical-align avec des blocs. Effectivement, ça ne marche qu'en Inline.

Mais en Inline, le Span fait un retour chariot. Bordel ! J'ai donc pensé faire un (je schématise) :

<span inline>

<img valign et float>

<span bloc></span bloc>

</span inline>

Mais ça ne fonctionne pas. J'ai fais différentes combinaisons... j'obtiens jamais le résultat souhaité, mais je pense que c'est faisable !

FORUM HardWare.fr

Programmation

HTML/CSS

Alignement vertical image-texte et retour chariot

Sujets relatifs
orientation image	Comment tronquer un texte tout en préservant les balises html?
pdf vers fichier image	[C] fonction pour remplacer du texte dans une string
Manipuler un simple fichier texte ?!	conservation de données formulaires en cas de retour
Supprimer le cadre de sélection autour d'une image lien.	[RESOLU] Redimensionner une image
[Divers] Quel éditeur de texte pour mon besoin	MSSQL : Datatype "image" : comment exporter ?
Plus de sujets relatifs à : Alignement vertical image-texte et retour chariot

Page générée en 0.064 secondes