[Résolu] Pb image et h1

Bonjour,

J'ai un titre défini a droite de la page et je voudrais placer une image sur la même ligne et a gauche.

voila mon css

h1 {font-size:0.8em; color:#890302;font-weight:700; text-decoration: underline; line-height:100px; text-transform:uppercase; text-align:right; font-style:oblique; margin-right:15px}

h1 span {text-align:right;}

et mon code html

<table>
...
<tr>
<td>
<h1><span>
<a href="qest_liste.php" onMouseOver="window.status='Retour liste des Questions/Réponse';" onMouseOut="window.status=''">
 <img src="bt_back.gif" id="bt_quest_back" alt="Retour liste des Questions/Réponse"></a>
<h1>Ajouter une Question/Réponse{</span></h1>
...
</td>
</tr>
</table>

Avec cette méthode, l'image reste collé au texte à droite

Si je place l'image en dehors du h1, elle se place au-dessus de la ligne de h1 et je n'arrive pas à la mettre au même niveau sur un plan différent.

Quelqu'un peut il m'aider?

Commence par faire les choses proprement et valider ton code car en l'état, tu rencontras toujours des problèmes de toutes sortes...
Deux petites choses pour commencer:
• un élément de type inline (tel que span) ne peut contenir d'éléments de type block (tel qu'h1),
• toute balise ouverte doit être fermée.

ok autant pour moi. A force de faire des tests dans tous les sens....

Donc voila je pense que le code html est bon cette fois-ci, mais le résultat est le même, l'image contenu dans le span s'affiche a droite et non à gaunche comme j'aimerai...

[code]
<table>
...
<tr>
<td>
<h1><span>
<a href="qest_liste.php" onMouseOver="window.status='Retour liste des Questions/Réponse';" onMouseOut="window.status=''">
<img src="bt_back.gif" id="bt_quest_back" alt="Retour liste des Questions/Réponse" /></a>
Ajouter une Question/Réponse</span></h1>
...
</td>
</tr>
</table>

epeichette a écrit :
mais le résultat est le même, l'image contenu dans le span s'affiche a droite et non à gaunche comme j'aimerai...

À droite du texte du h1, ou à gauche du texte du h1 en text-align:right mais collé au texte?

Dans les pistes que tu peux explorer:
- positionnement flottant;
- positionnement absolu.

Voir dans les tutoriels d'Alsacréations l'article consacré au positionnement CSS.

Merci pour le conseil, j'ai opté pour float et ça marche impec
voici les css

h1 {font-size:0.8em; color:#890302;font-weight:700; text-decoration: underline; text-transform:uppercase; text-align:right; font-style:oblique; margin-right:15px; margin-bottom:20px}
#bt_quest_back{ float: left; top:-50px}

voilà mon code

<div>
 <a href="javascript [langue]ageBack();" onmouseover="window.status='Retour liste des Questions/Réponse';" onmouseout="window.status=''">
 <img src="bt_back.gif" id="bt_quest_back" alt="Retour liste des Questions/Réponse" /></a>
<h1>Modifier la Question/Réponse</h1>
</div>

Modifié par epeichette (20 Jul 2007 - 09:41)