Positionnement d'un objet par rapport au parent

Bonjour,

J'ai un petit souci de positionnement. Je boss présentement sur un carrousel, le principe est simple, lorsque l'on clique sur un objet une boîte s'ouvre avec la description du produit.

Mon problème est que présentement, la boîte se positionne par rapport à l'objet cliqué, hors ce que je voudrait c'est que la boîte se positionne centrer par rapport au carrousel, peu importe la position de l'objet cliqué.

Voici un lien vers une page test

Une partie de mon code html

<ul id="carrousel">
        <li>
       		<h3>CL-6ft<br>
			<img src='../Images/photosProduits/CL-6ft.png' alt='CL-6ft' /></h3>
			<div class="descr">
            	<img src="../Images/photosProduits/CL-6ft.png" width="90" height="100" alt="CL-6ft" />
                <h4>CL-6ft</h4>
                <p>6ft Cable Lock</p>
			</div>
		</li>
		<li>
			<h3>MA-360<br>
			<img src='../Images/photosProduits/MA-360.png' alt='MA-360' /></h3>
			<div class="descr">
				<img src='../Images/photosProduits/MA-360.png' alt='MA-360' width="170" height="82" />
				<h4>MA-360</h4>
				<p>Adjustable mounting arm<br />
				fits all cameras.</p>
				<p>Also available in black</p>
			</div>
		</li>
		<li>
			<h3>SB-91<br>
			<img src='../Images/photosProduits/SB-91.png' alt='SB-91' /></h3>
			<div class="descr">
             	<img src="../Images/photosProduits/SB-91.png" width="77" height="100" alt="SB-91" />
             	<h4>SB-91</h4>
             	<p>Security metal box</p>
            	<p>For FL-A, IR-5, IR-6, BLOODLINE, IR-8, IR-10 and PRO-X Plus cameras</p>
        	</div>
		</li>
      <li>...</li>
</ul>

Mon code CSS:

h3{
	text-align: center;
	margin:0;
}
h3 img{height: 4.3em;}
ul#carrousel{
	list-style: none;
	margin:0 auto;
	width: 700px;
}
ul#carrousel li{
	display: inline-block;
	margin: 0 10px;
}
.roundabout-holder { padding: 0;}
.roundabout-moveable-item {
	width: 15em;
	cursor: pointer;
}
.roundabout-in-focus { cursor: auto; }
.control{
	display:none;
	clear:both;
	margin: 20px auto 0;
    	width: 164px;
}
.control a{ padding: 0 10px 0 10px;}
.descr{
	z-index: 1000;
	display:none;
	position:absolute;
	margin-left: -100px;
	margin-top: -90px;
	width:400px;
	padding: 10px;
	background-color: #d97818;
	border: 1px solid #000;
	border-radius:1em; /*pour IE [smile] */
	-moz-border-radius:1em; /*pour Firefox [smile] */
	-webkit-border-radius:1em; /* pour safari et Chrome*/
	color: #000000;
}
.descr img{
	display:block;
	float:left;
	margin: 0px 10px 20px 0px;
}
.descr p{
	font-size: 12px;
	display:block;
	margin: 0px 10px 10px 0px;
	text-align:left;
}
.descr h4{
	font-size: 15px;
	display: block;
	font-weight: bold;
	text-transform: capitalize;
	margin: 5px 0px 5px 0px;
}
li:hover .descr{ display: block;}

Modifié par juliesunset (20 Sep 2011 - 15:26)

Bonjour,

tu as très certainement d'autres styles qui interviennent. Je pense que ton souci vient du "position:absolute" sur ta classe descr. En effet, cet élément va donc se placer par rapport à son premier parent positionné, ce qui me laisse penser que ton li est positionné en relatif ou absolu.

Si tel est le cas, il faut soit enlever la position de ton li et l'appliquer au ul, soit placer en conséquence ton .descr grâce à sa position absolue...

En effet, les li sont positionné en absolute et le ul en relative, c'est gérer via le js du carrousel. Je ne peux pas changer ces paramètres sinon mon carrousel "fou l'camp". Je doit donc faire avec.

J'ai fait plusieurs teste, mais je n'arrive à rien.
Modifié par juliesunset (20 Sep 2011 - 17:04)