11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

je viens de créer un portfolio avec Quicksand, mais la div qui contient mes images s'adapte une fois la transition terminé.

J'aimerai que le bottom de ma div s'adapte en même temps que la transition de Quicksand. Voici mon code.

#full {
	width: 960px;
	background-color: #ffffff;
	border-top: 3px #f2034b solid;
	padding: 10px;
	overflow: hidden;
}

.content {
	float: left;
	width: 700px;
}

/* Home */

.content li {
	list-style: none;
	display: inline-block;
}

.image {
	width: 150px;
	height: 150px;
	margin: 10px;
}

/* Sidebar */

.sidebar {
	float: right;
	width: 160px;
	text-align: right;
	padding-right: 10px;
}

<div id="full">
		<div class="content">
			<li data-id="id-1" data-type="web"><img src="images/img.png" class="image"></li>
			<li data-id="id-2" data-type="development"><img src="images/img.png" class="image"></li>
			<li data-id="id-3" data-type="graphic"><img src="images/img.png" class="image"></li>
			<li data-id="id-4" data-type="web"><img src="images/img.png" class="image"></li>
			<li data-id="id-5" data-type="development"><img src="images/img.png" class="image"></li>
			<li data-id="id-6" data-type="graphic"><img src="images/img.png" class="image"></li>
			<li data-id="id-7" data-type="web"><img src="images/img.png" class="image"></li>
			<li data-id="id-8" data-type="development"><img src="images/img.png" class="image"></li>
			<li data-id="id-9" data-type="graphic"><img src="images/img.png" class="image"></li>
			<li data-id="id-10" data-type="web"><img src="images/img.png" class="image"></li>
			<li data-id="id-11" data-type="development"><img src="images/img.png" class="image"></li>
			<li data-id="id-12" data-type="graphic"><img src="images/img.png" class="image"></li>
		</div>
		<div class="sidebar">
			<h2>Category</h2>
			<a title="all" href="#">All</a><br />
			<a title="web" href="#">Design</a><br />
			<a title="development" href="#">Development</a><br />
			<a title="graphic" href="#">Graphic</a>
		</div>
	</div>


Merci d'avance de vos réponse.
Modifié par nova313 (25 Oct 2011 - 18:35)
Bonjour,

Quicksand? Les deux premiers résultats dans mon moteur de recherche parlent de sables mouvants. Le troisième parle d'un groupe de rock.
J'avais complétement oublié cette fonction. Il faut aussi que j'adapte la durée de mes images, sinon la div s'adapte plus vite que la durée de transition des images.

Ca m'apprendra à pas lire la doc. Merci encore.