28173 sujets

CSS et mise en forme, CSS3

[Résolu]Postion absolute sous relative

Bonjour à tous,
j'ai un ptit problème qui commence à me faire bouillonner.
Je vous explique:
j'ai trois block positionnés en relative float:left; dans le premier j'ai un block positionner en absolute qui est legerement décalé à gauche et haut (infobulle...).
Je sais pas pourquoi, sous FF ya pas de pb mais sur IE le block positionné en absolute (qui chevauche donc les deux premiers block) passe dessus le premier block (son conteneur), donc normal, mais en dessous du deuxieme block...
Il est pourtant hors du flux pourquoi il se met en dessous?
j'ai essayer avec les z-index, rien à faire...

http://img179.imageshack.us/img179/2527/pbfm1.jpg
Modifié par Myfred8 (12 Jul 2007 - 15:43)
mon code simplifié(j'ai viré du php et du js):

html (entouré par une boucle en php)
le code suivant represente un block complet avec une image


<div id="portfolio">
<div style="position: relative; float: left;  margin-bottom:10px;">
	<ul>
		<li>
			<a href="lienaupif.html" target="_blank" alt="" >
				<img src="img/portfolio/test.jpg" id="img-valeur-dynamique" class="portimg"">			
			</a>
		</li>
		<li class="orange2">
			<img src="img/test.jpg" /><a href="test.html" target="_blank" title="test">c'est un test</a>
		</li>
	</ul>
	
	
		<!-- bulle -->
		<div class="divport" id="bulle-val-dynamique" >
			<ul>
				<li class="divport-li1">
					<img src="img/haut-bulle.png" />
				</li>
				<li class="divport-li2">
					<dl>
						<dt>
							valeur dyn php
						</dt>
						<dd>
							valeur dyn php
						</dd>
					</dl>
				</li>
				<li>
					<img src="img/test.png" />
				</li>
			</ul>
			
		</div>
		<!-- Fbulle -->
			
</div>
</div>

css:

#portfolio
{
	margin-left: 17px !important; 
	margin-left: 15px;
	margin-top:10px; 
	width: 552px; 
	text-align: left;
}
 
#portfolio li{list-style-type: none; }
 
.portimg {border: 2px solid #fff;}
 
#portfolio a
{
	color: #fff;
	text-decoration: none;
}
 
.divport
{
	
	position: absolute; 
	z-index:150; 
	left:70px; 
	bottom:30px;
	width: 258px; 
	
	display: none;
}
 
.divport li
{
	list-style-type: none; 
	width: 258px; 
}
 
.divport-li1
{
	height:3px; 
	line-height:3px; 
	font-size:1px;
}
 
.divport-li2
{
	background-image:url(../img/milieu-bulle.png); 
	background-repeat: repeat y;
}
 
.divport dl{margin: 0 2px 0 3px; width: 248px;}
 
.divport dt
{
	color: #FF9500; 
	font-weight: bold;
}
 
.orange2
{
	background-color: #ff9500;
	text-align: right;
	margin-top:3px;
	vertical-align: middle;
}

Modifié par Myfred8 (12 Jul 2007 - 14:35)
Sujet clos
Aller à