Forum Clubic

[css] - Alignement Image Texte

salut :hello:

j’ai un petit problème avec l’alignement de mon image et de mon texte. j’ai parcouru de nombreux forums et sites, c’est un problème récurant, mais je ne trouve pas la solution (on m’avait notamment proposé line-height mais sans résultat <_< ).

je voudrais que mon le texte se mette à droite de mon image, avec un alignement à mi-hauteur de l’image.
mais voila ce que j’ai :

et mon code dans la page php :

<img src="$chimage" height="50" width="50" class="chropetit" />
<a href="chronique.php?num=$data[chnum]">  $artiste - $chtitre</a><br /><br />

et le css :

div#chroniquelettre
{
	position: relative;
	min-height: 800px;
	float: left;
	padding: 0 25px 0 100px;
	width: 450px;	
}

que mettre pour obtenir l’alignement voulu ?
merci :slight_smile:

perso, j’utilise tjrs <table> :
<table>
<tr>
<td><img></td><td>Text</td>
</tr>
</table>

c’est ce que je faisais avant mais ça devient lourd à charger, pas facile à mettre à jour, ça a trop d’inconvénient les tableaux.

et c’est aussi pour apprendre, je pars du principe que les tableaux ne doivent pas être utilisés pour la mise en page.

merci pour ta réponse :slight_smile:

Il a raison sur un point : c’est galère à gérer :slight_smile:

Cependant :

  1. line-height: height(image);
  2. vertical-align: middle;

Sur le conteneur et la galère devrait partir ^^

snif ça ne marche toujours pas, il ne semble pas avoir de solution :blink:

le code

div#chroniquelettre
{
	position:relative;
	min-height:800px;
	float: left;
	padding: 0 25px 0 100px;
	width:450px;
	line-height: 50 px;
	vertical-align: middle;
}

ne donne rien de plus :confused:

merci !

Je peux voir ton site? avec DOM Inspector je devrais pouvoir tester :slight_smile:

Sinon le vertical-align doit peut être porter sur un tag interne à ton div.

désolé mais le site n’est pas encore en ligne, probablement ce soir ou demain :slight_smile:

voici le code du div conteneur, dans lequel il ya le div "chroniquelettre" :

div#conteneur
{
	width: 850px;
	height: auto;
	margin: 0 auto;
	text-align: left;
	border: 2px solid #CC0000;
	background: white url(images/ressources/truc.jpg) no-repeat right bottom; 
	overflow: hidden;
}

merci !

Tout à fait d’accord, j’utilise aussi xhtml/css pour la mise en page, mais pour qques trucs un peu ch*ants j’utilise <table> :stuck_out_tongue:

c’est justement pour ces trucs chiants que c’est bon d’apprendre :ph34r:

personne ne voit ? je suis sur que c’est un détail tout simple en plus :mellow:

j’attend ton site, là j’ai pas le temps d’y réfléchir.

voici le site en ligne : www.lagouttiere.com

Je me suis aidé de alsa créations (le tuto pour faire son site en 5 étapes).

il ya des bugs avec IE, notamment pour le min-height du div principal.


min-height: 800px;
height:expression(document.body.clientWidth > 800? "800px": "auto" );

ça marche une fois sur deux, je ne comprends pas vraiment :ph34r:

Comme c’est pas du CSS, je chercherai pas à le debugger :slight_smile: pour ton problème initial : je n’ai pas trouvé la page qui pose problème?

(sinon artistiquement le site est mal)

tu voulais dire “pas” mal ou mal (dans le sens c’est pourri :ane: ) ?

en fait c’est censé etre du css adapté à IE vu qu’il ne respecte pas certaines indications, je cherche comment passer outre ce problème, je le dirai quand j’aurai trouvé.

la page est ici :
http://www.lagouttiere.com/chronique_lettre.php?lettre=A

merci :slight_smile:

non , expressions ne fait pas partie des fonctions CSS

et min-height ne doit pas être supportée par IE… faut voir avec height dans ce cas là.

Pour ton problème essaye ça :

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

Bien sûr j’exagère sur les style=“vertical-align: middle” mais normalement ça devrait fonctionner.

ça fonctionne, merci beaucoup !

pour mon autre problème de div rétréci sous IE dès que j’ai la solution je préviens.
merci encore :slight_smile: