[Résolu]Aligner du texte entre deux images

Bonjour,

J'essaie d'aligner du texte entre deux images. L'image de gauche(doit être alignés au milieu à gauche) est plus grande que l'image de droite(doit être alignée en haut à droite). Le texte doit être en suite être aligner horizontalement entre ces images.
Je patauge .....

Merci...

Bonjour à toi et bienvenu sur le Forum

Je pense que ce point de FAQ répondra à ton problème : Comment aligner verticalement une image et une ligne de texte ?
Modifié par Cygnus (05 Jun 2008 - 16:41)

Arf, rien compris.

Note en passant: «aligné» ne signifie pas «centré», hein. Attention à utiliser les mots justes. On aligne plusieurs éléments les uns par rapport aux autres, mais on n'aligne pas un élément entre deux autres.

Par ailleurs, il me semble que «aligné à gauche» ou «aligné à droite» ne veut rien dire. Plusieurs éléments peuvent être «alignés à droite» s'ils sont d'une part disposés en ligne, et d'autre part placés à droite.

Tu souhaites donc placer une image à droite, placer une deuxième image à gauche, et faire faire des choses pas bien catholiques au texte entre les deux?
Je crois qu'un aperçu du rendu souhaité ne serait pas de trop.

Merci pour vos réponses.
Ci-jointe l'image du rendu désiré et le code que j'ai pour l'instant. Le texte devrait être aligné verticalement aux images.

<div id="infoPanel" class="infoFrame">		
		<img style="float:left;vertical-align: middle;" src="/ispid/base/images/icon_msg_information.gif" border="none" />
		<a href="#1" onclick="hidediv('infoPanel')"> <img style="vertical-align: top; float: right;"
			src="/ispid/base/images/header_icon_close.gif" border="none" /> </a> 
		<ul>
			<li><span class="actionMessage">Hilfsmaske wurde mutiert.</span></li>
		</ul>		
	</div>

Merci

Bonjour,

On peut faire flotter la première image à gauche, ou simplement la passer en image de fond du bloc (en donnant une classe "info" ou bloc, par exemple).

Pour la deuxième image, on peut la faire flotter à droite (comme c'est le cas dans le code donné... quoiqu'il faudrait plutôt faire flotter le lien, et non pas l'image). On peut aussi la positionner en absolu en haut à droite, par rapport à son conteneur (le bloc) positionné en relatif.

Rien de bien méchant ici. Le code que tu donnes à l'air à peu près correct; quel problème pose-t-il exactement?

Tu devrais peut-être réviser le positionnement CSS s'il n'est pas clair. Voir le tutoriel à ce sujet sur Alsacréations, la série de tutoriels sur Openweb, etc.

Merci pour votre aide, j'ai obtenu ce qu je voulais grâce au code ci-après

<div id="infoPanel" style="width:100%;border: 1px solid #5a6e79">		
		<div style="border: 0px solid blue;float:left;width:100px;">
		 <img src="/ispid/base/images/icon_msg_information.gif" border="none" />
		</div>
		<div style="border: 0px solid red;float:left;vertical-align:left;">		 
		  	<ul>
			<li><span class="infoMessage">Le text ici</span></li>
	</ul>
		 
		</div>
		<div style="border: 0px solid green;float:right">
		<a href="#1" onclick="hidediv('infoPanel')">
		 <img src="/ispid/base/images/header_icon_close.gif" border="none" /> </a>
		</a>
		</div> 		
		
	</div>
	<div style="clear:left;"></div> 

Modifié par Fr@ncky (11 Jun 2008 - 08:49)