Bonjour,
en contexte responsive, je développe une bibliothèque façon Ipad Kiosk :
http://www.pascal-antoinet.com/offline/jlstr/test-table-cell.html
En bref, mon UL est déclaré en inline-table ce qui me permet un vertical-align: bottom sur le contenu de mes LI (des livres de hauteur variable qui doivent être posés sur une étagère - donc alignés par le bas).
Problème, lorsque je met un float:left sur mes LI pour qu'ils épousent harmonieusement les différentes tailles de ma fenêtre (nombre variable de livres par ligne), le float:left annule le vertical-align:bottom.
Quelqu'un aurait-il une piste pour m'orienter vers la bonne propriété à mettre en oeuvre ?
Par avance un grand merci pour votre aide.
Mon code source :
Modifié par BeautifulWeb (12 Sep 2013 - 11:05)
en contexte responsive, je développe une bibliothèque façon Ipad Kiosk :
http://www.pascal-antoinet.com/offline/jlstr/test-table-cell.html
En bref, mon UL est déclaré en inline-table ce qui me permet un vertical-align: bottom sur le contenu de mes LI (des livres de hauteur variable qui doivent être posés sur une étagère - donc alignés par le bas).
Problème, lorsque je met un float:left sur mes LI pour qu'ils épousent harmonieusement les différentes tailles de ma fenêtre (nombre variable de livres par ligne), le float:left annule le vertical-align:bottom.
Quelqu'un aurait-il une piste pour m'orienter vers la bonne propriété à mettre en oeuvre ?
Par avance un grand merci pour votre aide.
Mon code source :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test Table-cell CSS</title>
<style type="text/css">
BODY {
margin: 0; padding: 0;
background-color: grey;
}
.global_container {
width: 100%;
max-width: 880px;
min-height: 500px;
margin: 0 auto;
padding: 0 50px;
background: white url(img/bkg_etageres_980.png) repeat-y top center;
}
UL {
display: inline-table;
padding: 0;
margin: 0;
}
LI {
display: table-cell;
vertical-align: bottom;
list-style-type: none;
padding: 0;
/* float: left; provoque le bug !! */
min-width: 180px;
height: 255px;
}
LI DIV {
text-align: center;
margin: 0 auto 45px;
}
.item_collec {
/* Applied to DIV inside LI */
bottom: 50px;
width: 157px;
height: auto;
text-align: left;
background-image: url(img/collec_ombre.png);
background-position: bottom right;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="global_container">
<ul>
<li>
<div class="item_collec">
<a href="#"><img src="img/collec2/Anatole001.jpg" width="145" height="195"></a></li>
<li>
<div class="item_collec">
<a href="#"><img src="img/collec2/Ariol002.jpg" width="145" height="196"></a></li>
<li><div class="item_collec">
<a href="#"><img src="img/collec2/CouvStore_JL405.jpg" width="145" height="184"></a></li>
<li>
<div class="item_collec">
<a href="#"><img src="img/collec2/CouvStore_JL413.jpg" width="145" height="184"></a> </li>
<li>
<div class="item_collec">
<a href="#"><img src="img/collec2/COUV-NOEL-SUR-LA-GRANDE-PRAIRIE.jpg" width="145" height="166"></a> </li>
<li>
<div class="item_collec">
<a href="#"><img src="img/collec2/Couv_SuperDev04.jpg" width="145" height="193"></a> </li>
<li>
<div class="item_collec">
<a href="#"><img src="img/collec2/COUV-CHOCOLATERIE.jpg" width="145" height="166"></a> </li>
<li>
<div class="item_collec">
<a href="#"><img src="img/collec2/CouvStore_JL413.jpg" width="145" height="184"></a> </li>
</ul>
</div>
</body>
</html>
Modifié par BeautifulWeb (12 Sep 2013 - 11:05)