Bloc position relative et hauteur automatique

Bonjour,

Je vous explique mon problème :

J'ai une DIV #vitrine-picture-content qui a un background créer sur photoshop. Il s'agit simplement d'un bloc de 625x700 le dessus du background a une " mini imagette " en forme de flèche qui doit se trouver sur une image du dessus.

Afin d'arriver à ce résultat, étant très novice en z-index, j'ai mis cette div en position relative et j'ai rajouté un z-index.

Tout fonctionne à merveille.

Le seul problème c'est que dans ce DIV #vitrine-picture-content il se trouve un slideshow et une autre div devant contenir la description de ces images.

Le but est de créer une page de profil, donc les utilisateurs qui seront des chefs d'entreprise seront amenés à mettre de grandes descriptions.

Problème étant, la DIV de description déborde sur l'image que j'ai créé. En gros la hauteur automatique ne fonctionne pas à cause du positionnement relatif.

J'espère avoir été clair afin de vous aider un maximum dans votre réponse. Voici le code :

<div id="vitrine-picture-content">
                        <div id="vitrine-picture-content-slide">
                            <div id="slideshow-main">
			<ul>
				<li class="p1 active">
					<a href="#">
						<img src="images/1_big.gif" width="430" height="291" alt=""/>
						<span class="opacity"></span>
						<span class="content"><h1>Title 1</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></span>
					</a>
				</li>
				<li class="p2">
					<a href="#">
						<img src="images/2_big.gif" width="430" height="291" alt=""/>
						<span class="opacity"></span>
						<span class="content"><h1>Title 2</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></span>
					</a>
				</li>
				<li class="p3">
					<a href="#">
						<img src="images/3_big.gif" width="430" height="291" alt=""/>
						<span class="opacity"></span>
						<span class="content"><h1>Title 3</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></span>
					</a>
				</li>
				<li class="p4">
					<a href="#">
						<img src="images/4_big.gif" width="430" height="291" alt=""/>
						<span class="opacity"></span>
						<span class="content"><h1>Title 4</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></span>
					</a>
				</li>
				<li class="p5">
					<a href="#">
						<img src="images/5_big.gif" width="430" height="291" alt=""/>
						<span class="opacity"></span>
						<span class="content"><h1>Title 5</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></span>
					</a>
				</li>
				<li class="p6">
					<a href="#">
						<img src="images/6_big.gif" width="430" height="291" alt=""/>
						<span class="opacity"></span>
						<span class="content"><h1>Title 6</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></span>
					</a>
				</li>
				<li class="p7">
					<a href="#">
						<img src="images/7_big.gif" width="430" height="291" alt=""/>
						<span class="opacity"></span>
						<span class="content"><h1>Title 7</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></span>
					</a>
				</li>
			</ul>										
		</div>
				
		<div id="slideshow-carousel">				
			  <ul id="carousel" class="jcarousel jcarousel-skin-tango">
				<li><a href="#" rel="p1"><img src="images/1.gif" width="100" height="60" alt="#"/></a></li>
				<li><a href="#" rel="p2"><img src="images/2.gif" width="100" height="60" alt="#"/></a></li>
				<li><a href="#" rel="p3"><img src="images/3.gif" width="100" height="60" alt="#"/></a></li>
				<li><a href="#" rel="p4"><img src="images/4.gif" width="100" height="60" alt="#"/></a></li>
				<li><a href="#" rel="p5"><img src="images/5.gif" width="100" height="60" alt="#"/></a></li>
				<li><a href="#" rel="p6"><img src="images/6.gif" width="100" height="60" alt="#"/></a></li>
				<li><a href="#" rel="p7"><img src="images/7.gif" width="100" height="60" alt="#"/></a></li>
			  </ul>
		</div>
                        </div>
                        <div id="vitrine-picture-content-textunderslide">
                            <span></span>
                        </div>
                    </div>

Et le code CSS :

#vitrine-picture-content {
    
    width: 625px;
    min-height: 500px;
    max-height: 700px;
    position: relative;
    margin-left: 32px;
    margin-bottom: 10px;
    margin-top: -20px;
    background-image: url("../img/vitrine/slidebg1.png");
    z-index: 10;
    border-color: -moz-use-text-color #FFFFFF #FFFFFF -moz-use-text-color;
    border-radius: 0 6px 6px 6px;

}


#vitrine-picture-content-slide {
    width: 540px;
    height: 300px;
    float: left;
    margin-top: 40px;
    margin-left: 42px;
}


#vitrine-picture-content-textunderslide {
    width: 532px;
    float: left;
    margin-top: 10px;
    margin-left: 42px;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.07);
    border-color: -moz-use-text-color #FFFFFF #FFFFFF -moz-use-text-color;
    border-radius: 6px 6px 6px 6px;
    border-style: none solid solid none;
    border-width: medium 1px 1px medium;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.50) inset;

}

Un screenshot :


http://img560.imageshack.us/img560/3584/probn.jpg
Modifié par Aslim (03 May 2012 - 11:36)