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.
Merci d'avance de vos réponse.
Modifié par nova313 (25 Oct 2011 - 18:35)
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)