[résolu]Du texte entouré de deux images flotantes.

Salut tout le monde.

Je travaille sur le design d'un site et je me heurte à un problème assez embêtant. Je n'arrive pas à reproduire en css ce que j'ai dans ma tête. Et je ne sais pas comment faire autrement.

J'explique ma situation:

Voici ce que je veux faire:

J'ai une entête de cadre de texte qui se présenterait comme ça:
http://img156.imageshack.us/img156/3834/css0ht.jpg

Je veux faire différentes entêtes, avec à chaque fois, une image (1), une couleur de fond et un texte différents.

Donc j'ai prévu de faire un style pour chaque couleur de fond(ici le bleu). On aurait plus qu'a afficher l'image que l'on veut à gauche et la petite barre de navigation à droite (2).
Je me suis dit qu'il suffirait d'afficher l'image (1) en float left et l'image (2) en float right. En entre on écrirait le texte entre sans soucis.

Donc j'ai le code suivant:

<div class="titre_modulecentre_bleu">
	<img src="images/titres_modules/journal.gif" alt="" width="98" height="25" class="float_gauche"/>Du texte au milieu
	<div class="module_gestion">
		  <a href="#" title="resize" class="resize"></a>
		  <a href="#" title="haut" class="haut"></a>
		  <a href="#" title="bas" class="bas"></a>
		  <a href="#" title="fermer" class="fermer"></a>
	</div>
</div>

.titre_modulecentre_bleu{
	background-image: url(images/titres_modules/bleu.jpg);
	width: 537px;
	height: 29px;
	font-size: 14px;
	float: Aucune;
	background-repeat: no-repeat;
}

.float_gauche{
	float: left;
}

.module_gestion{
	float: right;
	padding-top: 3px;
	padding-right: 5px;
}

.module_gestion a{
	float: left;
	height: 18px;
	width: 18px;
	background-image: url(images/title_buttons.png);
	border-width: 0 !important;
	background-color: transparent !important;
}
.resize{
	background-position: -90px 0;
}
.resize:hover{
	background-position: -90px 18px;
}
.resize:active{
	background-position: -90px 36px;
}
.haut{
	background-position: -18px 0;
}
.haut:hover{
	background-position: -18px 18px;
}
.haut:active{
	background-position: -18px 36px;
}
.bas{
	background-position: 0 0;
}
.bas:hover{
	background-position: 0 18px;
}
.bas:active{
	background-position: 0 36px;
}
.fermer{
	background-position: -36px 0;
}
.fermer:hover{
	background-position: -36px 18px;
}
.fermer:active{
	background-position: -36px 36px;
}

Et au lieu de faire ce que je lui demande, il m'affiche ça:
http://img125.imageshack.us/img125/3567/css20fg.jpg

Il y a un décalage et je ne sais pas d'où ça vient.
J'aimerais pouvoir tout aligner sans problème :s

Est-ce que quelqu'un aurait pourrait m'aider?

En espérant avoir été assez compréhensible ^^

Je vous remercie beaucoup d'avance
Modifié par Aquanum (20 Feb 2006 - 20:47)

Personne n'a d'idée?

Sinon s'il y a un autre moyen d'afficher du texte entouré de deux images flottantes, je suis preneur

Merci d'avance

Salut,

Tu pourrais nous donner un lien vers une page test avec ce cadre s.t.p. ???

J'aimerais vérifier quelque chose ...

http://aquanum.free.fr/utt/
Voici la page sur laquelle je travaille.
Juste le premier cadre a été réalisé en CSS, les autres ce sont juste des images. J'aimerais avoir le même rendu que ces dernières mais en css avec la possibilité d'afficher nimporte quelle petite vignette à gauche, nimporte quel fond et nimporte quel texte.

Merci beaucoup d'avance
Modifié par Aquanum (19 Feb 2006 - 14:08)

lu.
l'ideal serait de mettre les 3elements dans un div et surtout dans le code html l'implementation des flottants avant les fixes chose que tu n'as pas fait je crois ou j'ai mal vu

Euh je n'ai pas tout compris.
Tu entends quoi par mettre l'implémentation des flottants avant les fixes dans le code html?

euh ... moi j'aurais plutôt mis dans l'ordre :

1) flottant gauche,
2) flottant droit,
3) ce qui doit être au milieu des 2.

sinon, le float:aucune dans .titre_modulecentre_bleu n'existe pas^^

tu devrais également mettre ton css en fichier externe car hormis l'allégement du fichier xHTML, il est actuellement impossible d'éditer le css avec webdevelopper

Merci beaucoup! Cela marche très bien. Ce que je voulais avoir s'affiche correctement

Cependant je me retrouve face à un problème assez embêtant.
Le site marche sans pb sous firefox, mais alors IE... il me taillade la page en deux... Et je n'arrive pas en jouant sur les marges et les décalages et remettre côte à côte les deux parties. En augmentant la largeur de la page à 800 ça se remet normal. Cependant ça ne convient pas pour les résolutions 800*600, il y aura un scroll...

Quelqu'un a une idée. Car ce bug pas méchant est assez embêtant tout de même.

Revoici le lien: http://aquanum.free.fr/utt/

Merci encore d'avance

Oui, ça c'est un problème avec IE, ça m'arrive assez souvent aussi d'ailleurs lol : il faut réduire la largeur d'une des 2 colonnes et le bloc qui est en dessous remontera tout seul

Oui, je sais tu vas devoir retravailler tes images mais c'est le seul moyen

Merci Je vais essayer de redimensioner mes titres de modules.
Erf... fichu IE ^^