Bonjour,
Sur l'une des mes pages, je présente une série de produits dans une série de boîtes contenant le nom du produit et la description. Le tout est sous forme de liste dans mon code, et généré dynamiquement via ma bdd.
J'utilise column-count en 2 colonnes, mais bien évidemment ça n'est pas reconnu par IE9 et donc mise en page affreuse! Je me suis donc tournée vers Modernizr, avec un script troué ici Mais je n'arrive pas à comprendre comment le faire fonctionner...
page en ligne
html:
Sur l'une des mes pages, je présente une série de produits dans une série de boîtes contenant le nom du produit et la description. Le tout est sous forme de liste dans mon code, et généré dynamiquement via ma bdd.
J'utilise column-count en 2 colonnes, mais bien évidemment ça n'est pas reconnu par IE9 et donc mise en page affreuse! Je me suis donc tournée vers Modernizr, avec un script troué ici Mais je n'arrive pas à comprendre comment le faire fonctionner...
page en ligne
html:
<div id="textarea"><h2>Articles de plein air</h2>
<ul class="produits">
<li>
<h3><img src="../../Images/photosProduits/BH-SPY.png" alt="" />BH-SPY</h3>
<!--<p></p>-->
<ul><li>Tuque SPYPOINT, noir</li> </ul>
</li>
<li>
<h3><img src="../../Images/photosProduits/CQ-5.png" alt="" />CQ-5</h3>
<!--<p></p>-->
<ul><li>Casquette camo SPYPOINT avec 5 DEL intégrées<br>
</li><li>Pile incluse</li> </ul>
</li>
<li>
<h3><img src="../../Images/photosProduits/CQ-SPY.png" alt="" />CQ-SPY</h3>
<!--<p></p>-->
<ul><li>Casquette SPYPOINT
</li><li>Style camouflage</li> </ul>
</li>
<li>
<h3><img src="../../Images/photosProduits/CT-1.png" alt="" />CT-1</h3>
<!--<p></p>-->
<ul><li>Gourde en aluminium, 1L, avec mousqueton.
</li><li>Style camouflage</li> </ul>
</li>
<li>
<h3><img src="../../Images/photosProduits/F-8.png" alt="" />F-8</h3>
<!--<p></p>-->
<ul><li>Flacon en aluminium, 237mL (8OZ.), style camouflage</li> </ul>
</li>
<li>
<h3><img src="../../Images/photosProduits/GD-01.png" alt="" />GD-01</h3>
<!--<p></p>-->
<ul><li>Gourde en aluminium (1L.)<br>
</li><li>Style camouflage</li> </ul>
</li>
<li>
<h3><img src="../../Images/photosProduits/HL-10.png" alt="" />HL-10</h3>
<!--<p></p>-->
<ul><li>Lampe frontale de 10 DEL<br>
</li><li>3 niveaux d'intensité (3, 6 ou 10 DEL)<br>
</li><li>Résistante à l'eau<br>
</li><li>Durée de vie des DEL de 100 000 heures<br>
</li><li>Inclinaison ajustable<br>
</li><li>Style camouflage<br>
</li><li>Inclus 3x pile AAA</li> </ul>
</li>
<li>
<h3><img src="../../Images/photosProduits/HL-1PW.png" alt="" />HL-1PW</h3>
<!--<p></p>-->
<ul><li>Lampe frontale de 1 DEL de haute intensité<br>
</li><li>2 niveaux d'éclairage<br>
</li><li>Lumière de sécurité clignotante
</li><li>Résistante à l'eau<br>
</li><li>Durée de vie des DEL de 100 000 heures<br>
</li><li>Inclinaison ajustable<br>
</li><li>Style camouflage<br>
</li><li>Inclus 3 piles AAA</li> </ul>
</li>
<li>
<h3><img src="../../Images/photosProduits/HL-6.png" alt="" />HL-6</h3>
<!--<p></p>-->
<ul><li>Lampe casquette de 6 DEL
</li><li>3 niveaux d'intensité (2, 4 ou 6 DEL)<br>
</li><li>Pile incluse</li> </ul>
</li>
<li>
<h3><img src="../../Images/photosProduits/KIT-LFT.png" alt="" />KIT-LFT</h3>
<!--<p></p>-->
<h4>Ensemble plein air</h4> <ul><li>Lampe de poche noire avec 9 DEL blanches
</li><li>Outil multifonction en acier inoxydable résistant avec 12 fonctions pratiques
</li><li>Étui en nylon
</li><li>Flacon de 180mL (6OZ.) avec dessin unique de cerf de Virginie</li> </ul>
</li>
<li>
<h3><img src="../../Images/photosProduits/MT-11.png" alt="" />MT-11</h3>
<!--<p></p>-->
<ul><li>Outil multifonction en acier inoxydable résistant avec 11 fonctions pratiques et étui en nylon. Lame de 8cm.
</li><li>Style camouflage</li> </ul>
</li>
<li>
<h3><img src="../../Images/photosProduits/optiMax.png" alt="" />OPTI-MAX</h3>
<!--<p></p>-->
<h4>Optimiseur de Télescope</h4> <ul><li>Protège vos yeux et vos lunettes
</li><li>Accélère le tir
</li><li>Maximise la luminosité
</li><li>Élimine la réflexion solaire
</li><li>Protège de la pluie et la neige
</li><li>Technologie et fabrication Allemande
</li><li><strong>Modèles disponibles:</strong><br>OPTI-38 (38mm)<br>OPTI-41 (41mm)<br>OPTI-43 (43mm)</li> </ul>
<img src="../../Images/photosProduits/optiMax_onScope.png" alt="Opti-Max sur télescope" />
<iframe width="391" height="220" src="http://www.youtube.com/embed/JtcHETe1XwI" frameborder="0" allowfullscreen></iframe>
</li>
<li>
<h3><img src="../../Images/photosProduits/VF-1.png" alt="" />VF-1</h3>
<!--<p></p>-->
<ul><li>Thermos en acier inoxydable, 1L.
</li><li>Style camouflage</li>
</ul>
</li>
</ul>.csscolumns .produits{
list-style: none;
margin:0 auto;
-moz-column-count: 2; /* Firefox */
-webkit-column-count:2; /* Safari and Chrome */
-ms-column-count:2; /* IE 10 */
column-count:2;
-moz-column-gap:20px; /* Firefox */
-webkit-column-gap:20px; /* Safari and Chrome */
-ms-column-gap:20px; /* IE 10 */
column-gap:20px;
width: 100%;
}
ul.produits>li{
background: rgba(235, 210, 183, 0.1);
border: solid 1px #CD8F2E;
display: inline-block;
font-size: 1em;
margin: 0 0 20px;
width: 393px;
padding: 10px;
}
ul.produits li img{ max-width: 391px;}
ul.produits li h3 img{
float: left;
margin: 0 20px 10px 0;
vertical-align: text-top;
max-width: 140px;
}
ul.produits li h3{text-align: left;}
#IE ul.produits li h3{ text-align: center;}
ul.produits li h4{ text-transform: uppercase;}
ul.produits ul {margin-left: 20px;}
#IE ul.produits ul {margin-left: 160px;}
ul.produits ul li{
font-size: 0.9em;
list-style:disc;
}