Réalistion d'un div extensible dans un autre div extensible

Bonjour,
Je suis à la recherche d'une technique pour réaliser un div extensible à l'intérieur d'un autre div extensible. (en hauteur).
J'ai utiliser une technique trouver sur ce site ( http://www.alsacreations.com/articles/cadre/ ), celle-ci fonctionne jusqu'au moment d'intégrer un autre div extensible dans le premier (container)! Le div contenu est bien extensible mais son container ne l'est plus!
Quelqu'un aurait il une solution à proposer?
merci

Bonjour et bienvenue olllli_D,

ce que tu souhaites faire est possible sans modification: le cadre extérieur ne sait absolument pas quel contenu il contient. 1 ligne de texte ou d'autres cadres plus petits visuellement.
Il faut par contre que l'image du bas (enfin celle qui est très très haute) soit suffisamment haute pour ne pas être affichée en totalité même dans les pires conditions sinon on va voir le fond de la page entre les images du haut et du bas.

Aurais-tu un exemple en ligne à nous montrer, que l'on voit ce que tu as fait?

Salut,
Merci pour la réponse rapide et sorry pour la mienne un peu tardive!
J'ai un fichier html que je peux envoyer! Si cela vous intérresse!
Grand merci en tous les cas;
A++

Bon beh j'ai toujours un soucis au niveau de mes div qui sont a l'intérieur d'un grand div extensible!
J'ai en fait trois div extensibles, un div dans lequel il y en a deux autres! le problème que je rencontre, est le suivant!
Mon 3ème div ne se mets pas à la suite du deuxième, j'ai sans doute fais une érreur dans mon code mais je ne vois pas où!
Voici mon code html, si quelqu'un voit le problème!

merci d'avance pour votre aide!

Modifié par olllli_D (12 Nov 2008 - 17:06)

Hello olllli_D et bienvenue sur le forum ,

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

olllli_D a écrit :
Bon beh j'ai toujours un soucis au niveau de mes div qui sont a l'intérieur d'un grand div extensible!
J'ai en fait trois div extensibles, un div dans lequel il y en a deux autres! le problème que je rencontre, est le suivant!
Mon 3ème div ne se mets pas à la suite du deuxième, j'ai sans doute fais une érreur dans mon code mais je ne vois pas où!
Voici mon code html, si quelqu'un voit le problème!

merci d'avance pour votre aide!

 <div id="content">
     	<div id="contentBottom">
        	<div id="bienvenue">
           	  <div id="bienvenueBottom">
                <div class="bulletBlueLeft"><h1 class="bienvenue">bienvenue!</h1></div>
                <p>Situés au coeur de BRUXELLES, nous disposons d'une salle acoustique de 2.000 m3 pour laisser<br/ > 				respirer la musique.<br/ > 
				Notre régie est dédiée à la musique classique et autres musiques acoustiques.<br/ > 
				Nous vous offrons le confort et la convivialité ainsi que notre savoir-faire et le meilleur 			                équipement avec la garantie du meilleur rapport qualité/prix.<br/ >
				Les ingénieurs indépendants sont bienvenus.</p>
              </div>
       	  </div>
            <div id="materiel">
            	<div id="materielBottom">
                <div class="bulletBlueRigth"><h6 class="matos">Liste du matériel</h6></div>
              <p class="lien"><a class="interne" href="#">Voir la liste complète de notre matériel >> </a></p>
              <h3 class="alignRigth">steinway d 274</h3>
                <p class="alignRigthP">Nous mettons également à votre disposition un splendide piano de concert 	                Steinway D 274.</p>
                <p class="lien"><a href="#" class="interne">en savoir plus >></a></p>
                </div>
            </div>
            
       </div>
      </div>

et voici le css

#content {
	background-color: #FFFFFF;
	background-position: left top;
	background-repeat: no-repeat;
	width: 673px;
	height: 50px;
	margin: 0px;
	padding-top: 20px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
#contentBottom  {
	background-image: url(../images/contentBottom.gif);
	background-repeat: no-repeat;
	background-position: left bottom;
	margin: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 30px;
	padding-left: 0px;
}
#bienvenue {
	background-repeat: no-repeat;
	background-position: left top;
	height: 50px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 5px;
	padding-bottom: 0px;
	background-image: url(../images/ptombre_top.gif);
	width: 569px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 50px;
}
#bienvenueBottom {
	background-image: url(../images/ptombre_bot.gif);
	background-repeat: no-repeat;
	background-position: left bottom;
	width: 569px;
	padding-bottom: 40px;
	margin-bottom: 20px;
}

#bienvenueBottom  p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	margin-top: 10px;
	margin-right: 30px;
	margin-bottom: 0px;
	margin-left: 30px;
	font-weight: bold;
	line-height: 16px;
	color: #3B3837;
}
.bulletBlueLeft {
	background-image: url(../images/bullet_02.gif);
	background-repeat: no-repeat;
	height: 21px;
	width: 18px;
	margin: 0px;
	padding: 0px;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
}
h1.bienvenue {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #3B3837;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 30px;
	text-transform: capitalize;
	letter-spacing: 1px;
	font-weight: bold;
	height: 18px;
}
.lien {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #A9DAE3;
	text-align: right;
	float: none;
	clear: both;
	margin: 0px;
	padding-top: 16px;
	padding-right: 18px;
	padding-bottom: 5px;
	padding-left: 0px;
	text-decoration: none;
}
#content  #contentBottom #materiel {
	background-image: url(../images/ptombre_top.gif);
	background-repeat: no-repeat;
	background-position: left top;
	margin-left: 50px;
	width: 569px;
	margin-top: 10px;
}
#content  #contentBottom #materielBottom {
	background-image: url(../images/ptombre_bot.gif);
	background-repeat: no-repeat;
	background-position: left bottom;
	padding-right: 50px;
	width: 569px;
	padding-bottom: 30px;
}
#content  #materiel  .bulletBlueRigth {
	background-image: url(../images/bullet_02.gif);
	background-repeat: no-repeat;
	padding-left: 30px;
	margin-top: 5px;
	width: 182px;
	float: right;
}
h6.matos {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #3B3837;
	margin: 0;
	letter-spacing: 1px;
	font-weight: bold;
	height: 18px;
	text-align: right;
	padding-top: 0px;
	padding-right: 20px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.interne {
	text-decoration: none;
	color: #A9DAE3;
}

.alignRigth {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-transform: capitalize;
	color: #3B3837;
	text-align: right;
	margin: 0px;
	padding-top: 25px;
	padding-right: 20px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.alignRigthP {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	text-align: right;
	margin: 0px;
	padding-top: 0px;
	padding-right: 20px;
	padding-bottom: 0px;
	padding-left: 0px;
	font-weight: bold;
}

Modifié par olllli_D (12 Nov 2008 - 17:13)