[RESOLU] Difficulté à positionner des div

Bonjour,

Tout d'abord je vous montre une image de ce que je veux obtenir:

http://img412.imageshack.us/img412/1738/test4tt4.jpg

fond_du_titre = la barre rouge en fond de titre
avatar = le caré image
news = correspondant à l'ensemble avatar + fond titre + les blabla

Et les deux barre noir à gauche et à droite représente tout simplement les côtés.

Et voici le code xhtml:

<div class="news">
		<img src="images/19_18.gif" class="avatar"/>
		<div class="fond_du_titre">Titre de ma news</div>
		<p>Blablabla blablabla blablal blalblal</p>
</div>

et voici le code css:

.news {
	padding-top: 120px;
	margin-left: 10px;
	
}
.fond_du_titre {
	text-indent: 3px;
	vertical-align: top;
	background: url(backnews.jpg) no-repeat;
	margin-left: 64px;
}

.avatar {
	float:left;
}

Alors il y a un problème
- Le titre est collé vers le bas de la barre en fond, je m'explique:

moi je veux ca:

---------
Titre
---------

or j'obtiens ca moi:

---------

Titre
---------
donc voila !


Sinon une question à part, lorsqu'il s'agit de manipuler une image qu'on a inséré avec img src, comment fait t-on ? vaut t-il mieux faire comme j'ai fait c'est à dire ajouter une class à img ? ( <img src="image.jpg" class="image" />)



Je vous remercie par avance de votre aide.
Merci.
Modifié par Lune (04 Oct 2006 - 17:47)

Salut Lune,

En ce qui concerne ton problème de titre, il faut que tu tiennes comptes du fait qu'il existe des balises qui sont réservées à cet usage: utilise-les...

De plus, ces dernières sont des éléments de type block. En conséquence :
- tu n'as pas besoin de l'enfermer dans un div pour le mettre en forme ;
- il contient par défaut des marges qu'il t'appartient de modifier.

A ta place, j'écrirai ceci :

<div class="news">
	<img src="images/19_18.gif" class="avatar"/>
	<h1 class="titre-rouge">Titre de ma news</h1>
	<p>Blablabla blablabla blablal blalblal</p>
</div>

.titre-rouge {
	margin-left: 3px;
	margin-top:0;
	background: red url(backnews.jpg) no-repeat;
}

En ce qui concerne ton positionnement, je pense que cet article d'Openweb pourra t'intéresser