Damier d'images sans les sortir du flux...

Bonjour,

voilà ma question je suis en train de réaliser un site pour lequel je dois faire un damier d'image qui s'agrandissent au survol mais problème celui ci doit rester dans le flux...

voici le html:

<div id="container">
	
	
	<p>This is my works</p>
	<a class="view" href="#"><img class="view" alt="test" src="mini.png" /></a>
	<a class="view" href="#"><img class="view" alt="test" src="mini.png" /></a>
	<a class="view" href="#"><img class="view" alt="test" src="mini.png" /></a>
	<a class="view" href="#"><img class="view" alt="test" src="mini.png" /></a>
	<a class="view" href="#"><img class="view" alt="test" src="mini.png" /></a>


</div>

La css:

a.view{
	
	border: none;
	position:relative;
	width: 175px;
	height: 140px;
	display:block;
	float:left;
}

img.view:hover{
	width: 350px;
	height: 280px;
	z-index:5;
	position:absolute; 
	left:-100px; 
	top:-70px;

}

hors ici vu que les images sont en float... elles sortent du flux donc le background général s'arrête avant la fin...ce qui pose des problèmes pour les éléments à positionner en dessous dans le flux...

Attention : le html ne peux être modifié... (au mieux on peut rajouter un div pour entourer le a et/ou le img

Est ce que quelqu'un aurait une astuce ou un truc pour mon problème?


merci
Modifié par katn (08 Sep 2009 - 16:08)

Salut,

katn a écrit :
elles sortent du flux donc le background général s'arrête avant la fin...

Si ce n'est que ça .. Créer un contexte de formatage block (overflow:hidden|auto, float:left, ...) sur le conteneur des float corrige le tir.

Agylus a écrit :
Salut,

Si ce n'est que ça .. Créer un contexte de formatage block (overflow:hidden|auto, float:left, ...) sur le conteneur des float corrige le tir.

...je ne vois pas ce que tu veux dire...

Agylus a écrit :
Alors fais une recherche sur le site sur les termes de "dépassement de flottants".

mon problème est que vu que j'agrandit les images au survol celle ci sont masquée par l'overflow:hidden... ou alors je n'aplique pas bien la technique...
Modifié par katn (08 Sep 2009 - 16:57)

Agylus a écrit :
L'overflow:hidden n'est pas la seule propriété qui donne un contexte de formatage.

il n'y a que l'overflow qui n'altère pas la disposition en damier des images...

Tu peux également essayer avec un tableau, le tableau ayant la propriété de s'adapter a son contenu.
Modifié par matmat (08 Sep 2009 - 21:50)