Alignement vertical image-texte et retour chariot

Alignement vertical image-texte et retour chariot - HTML/CSS - Programmation

Marsh Posté le 28-05-2007 à 23:28:13    

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.
 
http://img520.imageshack.us/img520/3411/modeletn3.png
 
 
*** *** ***
 
 
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 :
  1. <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 :
 
http://img338.imageshack.us/img338/1231/exempleqk2.png
 
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 :
  1. <p><img src="{URL}" width="60px" height="80px" border="0px" alt="Image Forum" style="vertical-align: middle;"/>{TEXT}</p>


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


Code :
  1. <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 :
  1. <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 !

Reply

Marsh Posté le 28-05-2007 à 23:28:13   

Reply

Marsh Posté le 28-05-2007 à 23:39:03    

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

Reply

Marsh Posté le 28-05-2007 à 23:45:49    

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 :
  1. <div style="line-height:80px; vertical-align:middle;">
  2. <img src="{URL}" width="60px" height="80px" border="0px" alt="Image Forum" style="vertical-align:middle;"/>
  3. <p style="font-size: 1em";>{TEXT}</p>
  4. </div>


Mais ça ne fonctionne pas. J'obtiens la chose suivante :
 
http://img517.imageshack.us/img517/2509/ex2yf0.png
 
EDIT
 
J'ai testé aussi :
 

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


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

Marsh Posté le 28-05-2007 à 23:49:31    

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
Reply

Marsh Posté le 28-05-2007 à 23:56:01    

stravoguine a écrit :

rajoute ça à ton image :

 

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


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 :
  1. <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>
 

http://img511.imageshack.us/img511/417/spanxk5.png

 

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
Reply

Marsh Posté le 29-05-2007 à 00:33:07    

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.
 
http://img177.imageshack.us/img177/509/yafss001ym6.jpg


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

Marsh Posté le 29-05-2007 à 00:48:12    

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
Reply

Marsh Posté le 29-05-2007 à 10:30:39    

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...

Reply

Marsh Posté le 29-05-2007 à 11:07:09    

Là j'y suis presque :
 
http://img514.imageshack.us/img514/5615/presquefz5.png
 

Code :
  1. <img src="{URL}" width="60px" height="80px" border="0px" alt="Image Forum" style="float: left; margin-right:5px; vertical-align:middle;"/>
  2. <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...)

Reply

Marsh Posté le 29-05-2007 à 14:03:36    

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+

Reply

Marsh Posté le 29-05-2007 à 14:03:36   

Reply

Marsh Posté le 29-05-2007 à 17:45:25    

Alors depuis, j'ai progressé.
 
J'ai trouvé cette solution, avec un Float, et qui fonctionne parfaitement :
 

Code :
  1. <p><img src="{URL}" width="60px" height="80px" border="0px" alt="Image Forum" style="float: left; margin-right: 5px; vertical-align:middle;"/>
  2. <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 !

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed