Problème pour placer trois lignes superposé à droite d'une image

Résolu/Fermé
mikaeel29 - 26 juin 2014 à 15:02
 mikaeel29 - 26 juin 2014 à 21:19
Bonjour,

Je débute en html et je tente de faire une page d'accueil pour un serveur de jeu que j'ai crée.

Je tente en vain depuis des heures de trouver la façon de mettre trois petite ligne juste a coté d'une petite image.

Le problème et que cette image (avatarneo.jpg) se trouve après une première image (l4d2d.jpg) suivi d'une petite ligne (Powered By)et que je souhaites avoir une disposition très précise des lignes juste après la 2° image (avatarneo.jpg)(que les trois lignes soit superposées et collées à l'image)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>The Matrix(TM) [Nighmare] L4D2 HardCoop Server</title>
<style type="text/css">

body {
background: url(images/l4d2b1.jpg) no-repeat top right fixed; background-color:black;
}
.imageflottante
{
float: right;
}
a {
color: blue
}
h2 {
color: white;
}
h4 {
color: #00ffff;
font-size : 18px;
}

</style>
</head>

<body text=green"; ><center>

<h1><strong><font face="calisto MT">The Matrix(TM)</font> <font color="red"; font face="chiller"; font size="6px"> [NIGHTMARE]</font> IP 94.23.45.200:27160</h1>

<p><a href="english-page.htm">English version of this page</a></p>
<p> <table>
<tr style="white-space:pre-wrap">
<td><img src="http://img4.hostingpics.net/thumbs/mini_553703l4d2d.jpg";width="400" height="300"; style="float:left; margin-right:0px" /> </td> <td style="white-space:pre"> Powered By <img src="http://img4.hostingpics.net/thumbs/mini_894188avatarneo1.jpg"; style="vertical-align: text-top; white-space:pre-wrap"/> Neo(TM) </td><td>En Forme</td><td> Dans un jeu l4d2 </td>
</tr>
</table>
</p>



<h2 style="clear:both">Le serveur <font color="red"; font face="chiller"; font size="6px">[NIGHTMARE]</font> du groupe Steam <a href="http://steamcommunity.com/groups/thematrixasyou/" title="Visitez la page du groupe The Matrix(TM) [Nightmare]"> <font color=green">The Matrix(TM) </font></a> vous souhaite la bienvenue</h2>

<h3><font color="blue"; font face="Comic Sans MS"; font size="5px">Serveur <font color="red">Hardcore</font> qui va mettre vos talents <font color="red">à rude épreuve</font></font></h3>


<h4>Ce serveur est ouvert :</h4>

<p><font color=green">Aux joueurs débutants qui aiment se faire massacrer</font><br />
<font color="white">Aux joueurs confirmés qui veulent savoir ce qu'ils valent</font><br />
<font color="red">Aux joueurs experts qui souhaitent du challenge (mettez le jeu en expert si vous osez)</font></p>

<h4>Les règles sont les suivantes :</h4>

<p><font color=green">Rester poli, courtois et fair play</font><br />
<font color=green">Rester avec son équipe</font><br />
<font color="white">Aider ses amis en difficulté</font><br />
<font color="white">Favoriser la coopération qui est le principe même du jeu</font><br />
<font color="red">Ne pas faire de Team kill ou de friendly fire</font><br />
<font color="red">Ne pas tricher ou utiliser les bugs du jeu</font></p>

<h2><font color="gold">Le non respect de ces règles peut entrainer un bannissement permanent !! </font></h2>
<h1> <font color="white">Pour toutes questions ou suggestions</font></h1>
<h2>envoyez un mail à <a href="mailto:***@***">***@***</a> ou visitez le groupe Steam <a href="http://steamcommunity.com/groups/thematrixasyou/" title="Visitez la page du groupe The Matrix(TM) [Nightmare]"><font color=green">"The Matrix(TM)"</font></a></h2>

</center></body>
</html>

En fait j'aimerais que la ligne "En forme" soit placées juste en dessous de la ligne "Neo(TM)" et que la ligne "Dans un jeu l4d2" soit juste en dessous de la ligne "En forme".
Le tout devant être à droite de l'image (avatarneo.jpg) sans dépasser en haut ni en bas.

Ce qui devrait donner un truc dans le genre :


Image l4d2d
Image l4d2d
Image l4d2d Powered By avatarneo Neo(TM)
avatarneo En forme
avatarneo Dans un jeu l4d2

Je suis en train d'apprendre le language html juste pour faire cette page d'accueil et je m'aperçois que c'est pas si simple que ça pour certaines opérations.

Je sais qu'il suffit d'apprendre à le faire mais je serai pas contre un petit coup de pouce. :)

Juste m'orienter un peu, ça me gene pas de passer une heure ou deux a apprendre les régles css et html, mais il y en a tellement que je ne vois pas laquelle utiliser dans ce cas de figure.

Merci d'avances pour vos réponses.
A voir également:

1 réponse

J'avais jeté l'éponge un peu vite.

J'ai finalement trouvé la fonction valign et en la combinant avec l'effet white space j'ai enfin réussi a placer mon texte comme souhaité.

:)
0