[Résolu]Problème –> div dont la largeur doit s'adapter à deux bloc

Hello tout le monde !

J'ai un petit souci, je suis en train de coder mon site mais j'ai un problème avec un div.

ce div se trouve entre deux autres div, qui, eux, s'adapte d'un texte chacun, et le tout est enfermé dans un div de 480x40. J'ai essayé plusieurs manières de faire cela, mais je n'arrive pas.

Vous pouvez consultez l'exemple ici.

Je vous donne le code HTML :

<div id="bloctitle">
        <div id="bloctitletitle"><h3>Alberto Seveso</h3></div>
        <div id="blocpattern"></div>
        <div id="bloctitledate">10.10.08</div>
        </div>

Et les CSS :

#bloctitle {
	height: 40px;
	width: 480px;
}

#bloctitletitle {
	overflow:auto;
	padding: 12px 25px 0 25px;
	overflow:auto;
	float:left;
}

#blocpattern{
	width: 100%;
	height: 40px;
	background: url(images/blocpattern.png);
	float:left;
}

#bloctitledate{
	overflow:auto;
	font-size: 13px;
	letter-spacing: 4px;
	text-align:right;
	padding: 12px 25px 0 25px;
	float:right;
}

Je dois finir mon site rapidement et je suis vraiment bloqué, je vous remercie déjà infiniment pour vos réponses.
Modifié par Kiluka (30 Aug 2008 - 20:03)

Hello Kiluka et bienvenue ,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).



Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait donc courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation


PS : ton lien ne fonctionne pas.

Voila tout est corrigé , encore désolé !

Merci pour la mise en forme.

Kiluka a écrit :

ce div se trouve entre deux autres div, qui, eux, s'adapte d'un texte chacun, et le tout est enfermé dans un div de 480x40.

Par contre je ne comprends pas ta phrase et du coup ce que tu veux faire.

Alors ce que j'aimerais faire :
http://img507.imageshack.us/img507/2682/exemple1hz3.jpg

Voila les divs :
http://img257.imageshack.us/img257/74/exemple3xp1.jpg
(sur l'image, c'est le div en vert qui me pose problème)

Et voila ce que sa devrait donne si je modifie le titre :
http://img507.imageshack.us/img507/9421/exemple2kf2.jpg
(On voit que le div du centre s'adapte par rapport au div de gauche)

Et voila l'état actuel (le code est dans mon post du haut) :
http://www.kiluka.ch/test/index.html
Modifié par Kiluka (28 Aug 2008 - 00:54)

Avec tes images actuelles je ne vois pas trop comment faire (à part en utilisant une table).

Du coup j'aurais plutôt utilisé quelque chose comme :
fond_h3.gif


Ce qui donne quelque chose comme :

html

<div id="bloctitle">
	<h3>Alberto Seveso</h3>
	<p>10.10.08</p>
</div>

css

#bloctitle {
	height: 40px;
	width: 480px;
	padding: 0 5px;
	background-image: url(images/pattern.png); 
}
#bloctitle h3 {
	padding: 0pt 40px 0pt 25px;
	margin: 0;
	line-height: 40px;
	float:left;
	background: transparent url(images/fond_h3.gif) no-repeat top right;
}
#bloctitle p {
	padding: 0 15px;
	margin: 0;
	line-height: 40px;
	float: right;
	background-color: black; 
}

Modifié par Heyoan (28 Aug 2008 - 03:54)

Ta solution marche très bien sur papier, mais le problème, c'est que mes fond que tu tu as interprété comme noir doivent être transparents.

Et c'est la le dilemme.

Y'a vraiment pas moyen de le faire dans cette optique ?
Modifié par Kiluka (28 Aug 2008 - 10:08)

Ben comme je te disais je ne vois pas comment faire car avec 3 éléments il en faut à ma connaissance au moins 2 avec une largeur connue (même si elle est en pourcentages) pour pouvoir faire varier la 3eme. Dans ton cas je me serais tout simplement servi d'une table qui fait ça très bien.

Mais peut-être que quelqu'un d'autre aura une solution.

Une table ? Comment sa ? Tu as un exemple ?

Et sinon y'aurait possibilité de faire ce que ej voulais faire au dessus, amsi en virant le bloc date ?
Modifié par Kiluka (28 Aug 2008 - 11:18)

Kiluka a écrit :
Une table ? Comment sa ? Tu as un exemple ?

html

<table>
	<tr>
		<td id="nom"  width="5%"><h3>Alberto Seveso</h3></td>
		<td id="milieu">&nbsp;</td>
		<td id="date" width="5%">10.10.08</td>
	</tr>
</table>

css

table {
	width: 480px;
	height: 40px;
	background: transparent url(pattern.png) 475px repeat-y;
}
#nom {
	background: transparent url(pattern.png) -3px top repeat-y;
	padding: 0px 25px;
	line-height: 40px;
	white-space: nowrap;
}
#milieu {
	background: transparent url(blocpattern.png) no-repeat;
}
#date {
	padding: 0px 25px 0 20px;
}

a écrit :
Et sinon y'aurait possibilité de faire ce que ej voulais faire au dessus, amsi en virant le bloc date ?

Ben non, c'est pareil puisque pour placer l'arrondi à droite du h3 il faudrait un autre élément et on se retrouve encore avec 2 éléments dont on ne connaît pas à l'avance une largeur fixe.
Modifié par Heyoan (28 Aug 2008 - 12:00)