I'm using some column property to list some items in three columns. but there is a problem on safari only :
when I use border-radius property on it, the text inside columns 2 and 3 disapear.
here a codepen link : http://codepen.io/arokh/pen/zGyyKx
#content-main {
margin: 0 auto;
width: 960px;
border-left: 0px solid #ddd;
border-right: 0px solid #ddd;
background: white;
padding: 25px 0 50px;
position: relative;
}
#equipements {
-webkit-column-width: 320px;
-webkit-column-rule: 1px dotted #ccc;
-webkit-column-count: 3;
-webkit-column-gap: 0;
-moz-column-width: 320px;
-moz-column-rule: 1px dotted #ccc;
-moz-column-count: 3;
-moz-column-gap: 0;
column-width: 320px;
column-rule: 1px dotted #ccc;
column-count: 3;
column-gap: 0;
padding: 25px 0px;
margin: 0 ;
background: rgb(255,255,255);
min-height: 0px;
}
#equipements ul.equipements {
width: 232px;
display: block;
padding: 10px;
border-radius: 0;
background:url(../img/remorques/pictos/ok.png) no-repeat 18px 10px transparent;
padding-left: 70px;
padding-right: 18px;
min-height: 70px;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
#equipements ul.equipements li {
display: inline-block;
margin: 0;
padding: 0;
font-size:13px;
line-height: 20px;
min-height: 20px;
cursor: pointer;
padding-left: 12px;
margin-left: 6px;
margin-bottom: 2px;
border-radius: 5px;
color: #122c73;
transition: all 0.5s;
}
#equipements ul.equipements li div.titre {
color: #122c73;
}
#equipements ul.equipements li:hover {
background: #5671b6;
color: #fff;
}
#equipements ul.equipements li:hover div.titre {
color: #fff;
}
#equipements ul.equipements li.select {
background: #122c73;
color: #fff;
}
#equipements ul.equipements li.select div.titre {
color: #fff;
}
.hidden {
display: none;
visibility: hidden;
}
#content-main ul li {
display: inline-block;
text-align: left;
width: 212px;
margin-right: 15px;
padding-bottom: 5px;
overflow: hidden;
position: relative;
font-size: 16px;
line-height: 22px;
}
<div id="content-main">
<div id="equipements" class="Std">
<ul id="categorie_equipement_id2" class="equipements" style="background-image: url(http://pro-etal.fr/img/pictos/picto-cat-longueuretptac.png)">
<li meta-id="6" class="ite-0">
<div class="titre">PTAC variables</div>
<div class="hidden sousTitre">de 750 à 3000 kg</div>
<div class="hidden description"><p>Nos remorques supportent, selon leur longueur d'étal, un Poids Total roulant Autorisé en Charge allant de 750 à 3000 kg.</p>
</div>
<div class="hidden urlPhoto">6/photo-equi-ptac.jpg</div>
</li>
<li meta-id="109" class="ite-1 select">
<div class="titre">Un étal de 2 m à 10 m</div>
<div class="hidden sousTitre">+ 2 m de tables latérales</div>
<div class="hidden description"><p>Nos remorques peuvent mesurer de 2 m à 10 m de long (longueur d'étal. Ajouter 2 m de vente en comptant les tables latérales à l’ouverture).<br>
Plusieurs PTAC (poids total autorisé en charge) vous sont proposés.<br>
Pour en savoir plus, visitez la section « La gamme Pro-étal ».</p>
<p>Notre gamme mag.</p>
</div>
<div class="hidden urlPhoto">109/photo-equi-etal-poissonnier.jpg</div>
</li>
</ul>
<ul id="categorie_equipement_id3" class="equipements" style="background-image: url(http://pro-etal.fr/img/pictos/picto-cat-equipementglobal.png)">
<li meta-id="7" class="ite-2">
<div class="titre">Châssis galvanisé</div>
<div class="hidden sousTitre">Garantie 6 ans anticorrosion et structure</div>
<div class="hidden description">
<p>La galvanisation à chaud est reconnue comme la meilleure protection de l'acier contre la corrosion.</p>
<p>Les structures de nos châssis varient selon le PTAC demandé. Ils sont étudiés au cas par cas selon le schéma d’implantation de la remorque.</p>
</div>
<div class="hidden urlPhoto">7/photo-equi-chassis.jpg</div>
</li>
<li meta-id="8" class="ite-3">
<div class="titre">Essieu freiné auto-amorti</div>
<div class="hidden sousTitre">et commande de frein AL-KO</div>
<div class="hidden description">
<p>Permet un meilleur confort de conduite : l’essieu freiné garantit des ralentissements sans à-coups et une meilleure tenue de route.</p>
<p>Garantie 2 ans train roulant</p>
</div>
<div class="hidden urlPhoto">8/photo-equi-essieu.jpg</div>
</li>
<li meta-id="9" class="ite-4">
<div class="titre">Toiture à relevage hydraulique</div>
<div class="hidden sousTitre">Garantie 2 ans</div>
<div class="hidden description">
<p>Pro-étal est le spécialiste de la toiture hydraulique sans entretien. Ce système permet un gain de place pour votre commerce sur le marché (volets plus compacts), une diminution de la consommation du carburant (moins de prise au vent de votre remorque), et un centre de gravité plus bas pour une meilleure tenue de route. Avec l’hydraulique Chapel, le relevage de la toiture est fiable et se déroule en douceur.</p>
</div>
<div class="hidden urlPhoto">9/photo-equi-hydraulique.jpg</div>
</li>
<li meta-id="11" class="ite-5">
<div class="titre">Volets sandwichs</div>
<div class="hidden sousTitre"> aluminium isolé</div>
<div class="hidden description">
<p>Les panneaux des volets sont en sandwich d’aluminium / styrofoam qui présente l’avantage d’être rigide, léger, brillant et inaltérable tout en présentant un gain de poids de 50 % par rapport au panneau sandwich classique.</p>
</div>
<div class="hidden urlPhoto">11/photo-equi-volets.jpg</div>
</li>
<li meta-id="12" class="ite-6">
<div class="titre">Carrosserie en polyester</div>
<div class="hidden sousTitre"> </div>
<div class="hidden description"><p>La carrosserie galbée, sans parties saillantes, est réalisée en fibre de verre et résine polyester.<br>
Les surfaces en polyester sont réparables en cas de choc, remplaçables facilement, et inaltérables à la corrosion chimique. En outre, les pièces polyester présentent la meilleure solution contre les poinçonnements et les rayures courantes. Leur durée de vie est quasi illimitée.</p>
</div>
<div class="hidden urlPhoto">12/photo-equi-carrosserie.jpg</div>
</li><li meta-id="13" class="ite-7">
<div class="titre">Plan de fermeture en inox</div>
<div class="hidden sousTitre"> </div>
<div class="hidden description"><p>Tout inox, il est très résistant à l'usure et à la corrosion.</p>
</div>
<div class="hidden urlPhoto">13/photo-equi-inox.jpg</div>
</li><li meta-id="15" class="ite-8">
<div class="titre">Poignées de manoeuvre</div>
<div class="hidden sousTitre">sur les volets latéraux</div>
<div class="hidden description"><p>Situées de chaque côté des volets latéraux, elles permettent une bonne prise en main et facilitent les manœuvres.</p>
</div>
<div class="hidden urlPhoto">15/photo-equi-poignees.jpg</div>
</li><li meta-id="61" class="ite-9">
<div class="titre">Roue de secours sous le châssis</div>
<div class="hidden sousTitre"> </div>
<div class="hidden description"><p>La roue de secours est de série, fixée hors coffre sur un porte-roue.</p>
</div>
<div class="hidden urlPhoto">61/photo-equi-roue-secours.jpg</div>
</li><li meta-id="85" class="ite-10">
<div class="titre">Réserves à portillons</div>
<div class="hidden sousTitre"> Réfrigérées</div>
<div class="hidden description"><p>Dans le bas de caisse, la réserve est accessible par le biais de portes ouvrantes à poignées munies de verrous. Les portes des réserves sont isolées. Le nombre de réserves et leurs largeurs varient en fonction de la taille de votre remorque. Elles mesurent 1m de profondeur.</p>
</div>
<div class="hidden urlPhoto">85/photo-equi-reserve-ouvrante.jpg</div>
</li></ul><ul id="categorie_equipement_id4" class="equipements" style="background-image: url(http://pro-etal.fr/img/pictos/picto-cat-electricite.png)"><li meta-id="16" class="ite-11">
<div class="titre">Éclairage Led Downlight</div>
<div class="hidden sousTitre"> Standard - Garantie pièces 2 ans</div>
<div class="hidden description"><p>La toiture est doublée d'un faux plafond en polyester avec un éclairage Led downlight encastré de faible consommation (23 W) pour une durée de vie de 10 ans. La lumière proche de celle du soleil (3 000 K) valorisera vos produits sans altérer leur aspect. Ce système d’éclairage est insensible aux micro coupures et baisses de tension.</p>
</div>
<div class="hidden urlPhoto">16/photo-equi-led-downlight.jpg</div>
</li><li meta-id="17" class="ite-12">
<div class="titre">Tableau électrique de commandes</div>
<div class="hidden sousTitre"> </div>
<div class="hidden description"><p>Encastré dans le bas de caisse, il intègre tous les disjoncteurs, circuits et protections. Il dispose d’un disjoncteur différentiel 30 MA pour une sécurité assurée.</p>
</div>
<div class="hidden urlPhoto">17/photo-equi-disjoncteur.jpg</div>
</li><li meta-id="18" class="ite-13">
<div class="titre">Prise européenne Hypra</div>
<div class="hidden sousTitre"> et sa fiche d'alimentation</div>
<div class="hidden description"><p>La prise européenne d’alimentation est fixée sur le bas de caisse.</p>
</div>
<div class="hidden urlPhoto">18/photo-equi-alimentation.jpg</div>
</li><li meta-id="19" class="ite-14">
<div class="titre">Feux arrières et signalisation</div>
<div class="hidden sousTitre"> </div>
<div class="hidden description"><p>Nos remorques sont équipées de feux de type automobile esthétiques ainsi que de feux de recul.</p>
</div>
<div class="hidden urlPhoto">19/photo-equi-feux.jpg</div>
</li></ul><ul id="categorie_equipement_id5" class="equipements" style="background-image: url(http://pro-etal.fr/img/pictos/picto-cat-refrigeration.png)"><li meta-id="21" class="ite-15">
<div class="titre">Pas de réfrigération nécessaire</div>
<div class="hidden sousTitre">Vente sur lit de glace </div>
<div class="hidden description"><p>Pas de réfrigération : méthode optimale, fusion de la glace à 0°C.</p>
</div>
<div class="hidden urlPhoto">21/photo-equi-pas-de-refrigeration.jpg</div>
</li></ul><ul id="categorie_equipement_id7" class="equipements" style="background-image: url(http://pro-etal.fr/img/pictos/picto-cat-hygiene.png)"><li meta-id="22" class="ite-16">
<div class="titre">Eau chaude sous pression</div>
<div class="hidden sousTitre">Lavabo et robinet temporisé</div>
<div class="hidden description"><p>Notre système d’eau chaude sous pression ne nécessite pas d’énergie sur le marché (Brevet exclusif société Pro-étal). Le lavabo en inox est encastré dans le plan de vente, équipé d’un robinet temporisé. Vous disposez d’un réservoir d’eaux usées sur collecteur unique, rinçable et vidangeable.</p>
<p>Il est accompagné d’un distributeur de savon liquide rechargeable. </p>
</div>
<div class="hidden urlPhoto">22/photo-equi-eau.jpg</div>
</li><li meta-id="23" class="ite-17">
<div class="titre">Dévidoir à papier d'essuyage</div>
<div class="hidden sousTitre"> </div>
<div class="hidden description"><p>Le dévidoir à papier d’essuyage est rechargeable.</p>
</div>
<div class="hidden urlPhoto">23/photo-equi-devidoir.jpg</div>
</li></ul><ul id="categorie_equipement_id8" class="equipements" style="background-image: url(http://pro-etal.fr/img/pictos/picto-cat-vitrine.png)"><li meta-id="26" class="ite-18">
<div class="titre">Remontée vitrée</div>
<div class="hidden sousTitre"> </div>
<div class="hidden description"><p>Une remontée vitrée, droite ou inclinée, est placée sur votre plan de vente.</p>
</div>
<div class="hidden urlPhoto">26/photo-equi-remontee.jpg</div>
</li><li meta-id="27" class="ite-19">
<div class="titre">Plan de vente en polyester</div>
<div class="hidden sousTitre"> </div>
<div class="hidden description"><p>Le plan de vente (fond de la vitrine) en polyester est totalement plat (ou incliné en option). Sans joints, tous les angles sont stratifiés pour une étanchéité parfaite et une durée de vie optimale. Quatre crépines évacuent l'eau vers un collecteur unique. Sa largeur intérieure utile est de 86 cm. Il comporte un vide poche sous le comptoir côté vendeur.</p>
</div>
<div class="hidden urlPhoto">27/photo-equi-plan-polyester.jpg</div>
</li><li meta-id="59" class="ite-20">
<div class="titre">Repose-sac de courtoisie</div>
<div class="hidden sousTitre"> </div>
<div class="hidden description"><p>Comme son nom l’indique, il n’est pas indispensable, mais il invite la clientèle à s’attarder devant votre vitrine. On peut y déposer son sac lors du paiement, et il est aussi très apprécié en période humide. De plus, il offre une sécurité supplémentaire pour vos vitrages durant les trajets en les bloquant en position relevée. D’une robustesse à toute épreuve, il peut supporter une très lourde charge (jusqu’à 100 kgs).</p>
</div>
<div class="hidden urlPhoto">59/photo-equi-repose-sac.jpg</div>
</li></ul><ul id="categorie_equipement_id10" class="equipements" style="background-image: url(http://pro-etal.fr/img/pictos/picto-cat-tablelaterale.png)"><li meta-id="29" class="ite-21">
<div class="titre">2 tables latérales</div>
<div class="hidden sousTitre">en polyester</div>
<div class="hidden description"><p>Deux tables latérales en polyester peuvent offrir deux mètres de plus à votre surface de vente. Elles se replient à l’intérieur de la remorque lors de la fermeture de celle-ci. A la demande, elles sont également dégondables si besoin.</p>
</div>
<div class="hidden urlPhoto">29/photo-equi-tables.jpg</div>
</li></ul><ul id="categorie_equipement_id14" class="equipements" style="background-image: url(http://pro-etal.fr/img/pictos/picto-cat-bachesdeprotection.png)"><li meta-id="36" class="ite-22">
<div class="titre">Entourage de bâches blanches</div>
<div class="hidden sousTitre"> Bâches standard, démontables</div>
<div class="hidden description"><p>L'entourage de bâches vous permettra à la fois de fermer votre commerce côté vendeur, mais aussi de vous protéger des intempéries. Les trois grandes bâches de fond (A,B, et C) s’enroulent sous les volets avec la possibilité d’un démontage rapide. Sous les bâches d'angles, deux bâches ferment hermétiquement l'entourage (bâches X). Les triangles à glissières, agrémentées de festons, complètent la couverture.</p>
</div>
<div class="hidden urlPhoto">36/photo-equi-baches.jpg</div>
</li><li meta-id="83" class="ite-23">
<div class="titre">Impression publicitaire</div>
<div class="hidden sousTitre">sur vos bâches d'entourage</div>
<div class="hidden description"><p>Nous vous proposons d'imprimer sur vos bâches standard les éléments que vous souhaitez : votre logo, des photos de votre exploitation, de vos produits... des textes, couleurs et typographies de votre choix. Nous vous accompagnons dans la réalisation de cette publicité, très impactante pour le public.</p>
</div>
<div class="hidden urlPhoto">83/photo-equi-etal-poissonnier.jpg</div>
</li></ul>
</div></div>
so if you set border-radius: 5px; to 0 in line 54; you'll see the text again...
Any idea to use border radius property and see the text ?
Remove overflow: hidden; from #content-main ul li.
#content-main {
margin: 0 auto;
width: 960px;
border-left: 0px solid #ddd;
border-right: 0px solid #ddd;
background: white;
padding: 25px 0 50px;
position: relative;
}
#equipements {
-webkit-column-width: 320px;
-webkit-column-rule: 1px dotted #ccc;
-webkit-column-count: 3;
-webkit-column-gap: 0;
-moz-column-width: 320px;
-moz-column-rule: 1px dotted #ccc;
-moz-column-count: 3;
-moz-column-gap: 0;
column-width: 320px;
column-rule: 1px dotted #ccc;
column-count: 3;
column-gap: 0;
padding: 25px 0px;
margin: 0 ;
background: rgb(255,255,255);
min-height: 0px;
}
#equipements ul.equipements {
width: 232px;
display: block;
padding: 10px;
border-radius: 0;
background:url(../img/remorques/pictos/ok.png) no-repeat 18px 10px transparent;
padding-left: 70px;
padding-right: 18px;
min-height: 70px;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
#equipements ul.equipements li {
display: inline-block;
margin: 0;
padding: 0;
font-size:13px;
line-height: 20px;
min-height: 20px;
cursor: pointer;
padding-left: 12px;
margin-left: 6px;
margin-bottom: 2px;
border-radius: 5px;
color: #122c73;
transition: all 0.5s;
}
#equipements ul.equipements li div.titre {
color: #122c73;
}
#equipements ul.equipements li:hover {
background: #5671b6;
color: #fff;
}
#equipements ul.equipements li:hover div.titre {
color: #fff;
}
#equipements ul.equipements li.select {
background: #122c73;
color: #fff;
}
#equipements ul.equipements li.select div.titre {
color: #fff;
}
.hidden {
display: none;
visibility: hidden;
}
#content-main ul li {
display: inline-block;
text-align: left;
width: 212px;
margin-right: 15px;
padding-bottom: 5px;
/* remove this -> overflow: hidden;*/
position: relative;
font-size: 16px;
line-height: 22px;
}
<div id="content-main">
<div id="equipements" class="Std">
<ul id="categorie_equipement_id2" class="equipements" style="background-image: url(http://pro-etal.fr/img/pictos/picto-cat-longueuretptac.png)">
<li meta-id="6" class="ite-0">
<div class="titre">PTAC variables</div>
<div class="hidden sousTitre">de 750 à 3000 kg</div>
<div class="hidden description"><p>Nos remorques supportent, selon leur longueur d'étal, un Poids Total roulant Autorisé en Charge allant de 750 à 3000 kg.</p>
</div>
<div class="hidden urlPhoto">6/photo-equi-ptac.jpg</div>
</li>
<li meta-id="109" class="ite-1 select">
<div class="titre">Un étal de 2 m à 10 m</div>
<div class="hidden sousTitre">+ 2 m de tables latérales</div>
<div class="hidden description"><p>Nos remorques peuvent mesurer de 2 m à 10 m de long (longueur d'étal. Ajouter 2 m de vente en comptant les tables latérales à l’ouverture).<br>
Plusieurs PTAC (poids total autorisé en charge) vous sont proposés.<br>
Pour en savoir plus, visitez la section « La gamme Pro-étal ».</p>
<p>Notre gamme mag.</p>
</div>
<div class="hidden urlPhoto">109/photo-equi-etal-poissonnier.jpg</div>
</li>
</ul>
<ul id="categorie_equipement_id3" class="equipements" style="background-image: url(http://pro-etal.fr/img/pictos/picto-cat-equipementglobal.png)">
<li meta-id="7" class="ite-2">
<div class="titre">Châssis galvanisé</div>
<div class="hidden sousTitre">Garantie 6 ans anticorrosion et structure</div>
<div class="hidden description">
<p>La galvanisation à chaud est reconnue comme la meilleure protection de l'acier contre la corrosion.</p>
<p>Les structures de nos châssis varient selon le PTAC demandé. Ils sont étudiés au cas par cas selon le schéma d’implantation de la remorque.</p>
</div>
<div class="hidden urlPhoto">7/photo-equi-chassis.jpg</div>
</li>
<li meta-id="8" class="ite-3">
<div class="titre">Essieu freiné auto-amorti</div>
<div class="hidden sousTitre">et commande de frein AL-KO</div>
<div class="hidden description">
<p>Permet un meilleur confort de conduite : l’essieu freiné garantit des ralentissements sans à-coups et une meilleure tenue de route.</p>
<p>Garantie 2 ans train roulant</p>
</div>
<div class="hidden urlPhoto">8/photo-equi-essieu.jpg</div>
</li>
<li meta-id="9" class="ite-4">
<div class="titre">Toiture à relevage hydraulique</div>
<div class="hidden sousTitre">Garantie 2 ans</div>
<div class="hidden description">
<p>Pro-étal est le spécialiste de la toiture hydraulique sans entretien. Ce système permet un gain de place pour votre commerce sur le marché (volets plus compacts), une diminution de la consommation du carburant (moins de prise au vent de votre remorque), et un centre de gravité plus bas pour une meilleure tenue de route. Avec l’hydraulique Chapel, le relevage de la toiture est fiable et se déroule en douceur.</p>
</div>
<div class="hidden urlPhoto">9/photo-equi-hydraulique.jpg</div>
</li>
<li meta-id="11" class="ite-5">
<div class="titre">Volets sandwichs</div>
<div class="hidden sousTitre"> aluminium isolé</div>
<div class="hidden description">
<p>Les panneaux des volets sont en sandwich d’aluminium / styrofoam qui présente l’avantage d’être rigide, léger, brillant et inaltérable tout en présentant un gain de poids de 50 % par rapport au panneau sandwich classique.</p>
</div>
<div class="hidden urlPhoto">11/photo-equi-volets.jpg</div>
</li>
<li meta-id="12" class="ite-6">
<div class="titre">Carrosserie en polyester</div>
<div class="hidden sousTitre"> </div>
<div class="hidden description"><p>La carrosserie galbée, sans parties saillantes, est réalisée en fibre de verre et résine polyester.<br>
Les surfaces en polyester sont réparables en cas de choc, remplaçables facilement, et inaltérables à la corrosion chimique. En outre, les pièces polyester présentent la meilleure solution contre les poinçonnements et les rayures courantes. Leur durée de vie est quasi illimitée.</p>
</div>
<div class="hidden urlPhoto">12/photo-equi-carrosserie.jpg</div>
</li><li meta-id="13" class="ite-7">
<div class="titre">Plan de fermeture en inox</div>
<div class="hidden sousTitre"> </div>
<div class="hidden description"><p>Tout inox, il est très résistant à l'usure et à la corrosion.</p>
</div>
<div class="hidden urlPhoto">13/photo-equi-inox.jpg</div>
</li><li meta-id="15" class="ite-8">
<div class="titre">Poignées de manoeuvre</div>
<div class="hidden sousTitre">sur les volets latéraux</div>
<div class="hidden description"><p>Situées de chaque côté des volets latéraux, elles permettent une bonne prise en main et facilitent les manœuvres.</p>
</div>
<div class="hidden urlPhoto">15/photo-equi-poignees.jpg</div>
</li><li meta-id="61" class="ite-9">
<div class="titre">Roue de secours sous le châssis</div>
<div class="hidden sousTitre"> </div>
<div class="hidden description"><p>La roue de secours est de série, fixée hors coffre sur un porte-roue.</p>
</div>
<div class="hidden urlPhoto">61/photo-equi-roue-secours.jpg</div>
</li><li meta-id="85" class="ite-10">
<div class="titre">Réserves à portillons</div>
<div class="hidden sousTitre"> Réfrigérées</div>
<div class="hidden description"><p>Dans le bas de caisse, la réserve est accessible par le biais de portes ouvrantes à poignées munies de verrous. Les portes des réserves sont isolées. Le nombre de réserves et leurs largeurs varient en fonction de la taille de votre remorque. Elles mesurent 1m de profondeur.</p>
</div>
<div class="hidden urlPhoto">85/photo-equi-reserve-ouvrante.jpg</div>
</li></ul><ul id="categorie_equipement_id4" class="equipements" style="background-image: url(http://pro-etal.fr/img/pictos/picto-cat-electricite.png)"><li meta-id="16" class="ite-11">
<div class="titre">Éclairage Led Downlight</div>
<div class="hidden sousTitre"> Standard - Garantie pièces 2 ans</div>
<div class="hidden description"><p>La toiture est doublée d'un faux plafond en polyester avec un éclairage Led downlight encastré de faible consommation (23 W) pour une durée de vie de 10 ans. La lumière proche de celle du soleil (3 000 K) valorisera vos produits sans altérer leur aspect. Ce système d’éclairage est insensible aux micro coupures et baisses de tension.</p>
</div>
<div class="hidden urlPhoto">16/photo-equi-led-downlight.jpg</div>
</li><li meta-id="17" class="ite-12">
<div class="titre">Tableau électrique de commandes</div>
<div class="hidden sousTitre"> </div>
<div class="hidden description"><p>Encastré dans le bas de caisse, il intègre tous les disjoncteurs, circuits et protections. Il dispose d’un disjoncteur différentiel 30 MA pour une sécurité assurée.</p>
</div>
<div class="hidden urlPhoto">17/photo-equi-disjoncteur.jpg</div>
</li><li meta-id="18" class="ite-13">
<div class="titre">Prise européenne Hypra</div>
<div class="hidden sousTitre"> et sa fiche d'alimentation</div>
<div class="hidden description"><p>La prise européenne d’alimentation est fixée sur le bas de caisse.</p>
</div>
<div class="hidden urlPhoto">18/photo-equi-alimentation.jpg</div>
</li><li meta-id="19" class="ite-14">
<div class="titre">Feux arrières et signalisation</div>
<div class="hidden sousTitre"> </div>
<div class="hidden description"><p>Nos remorques sont équipées de feux de type automobile esthétiques ainsi que de feux de recul.</p>
</div>
<div class="hidden urlPhoto">19/photo-equi-feux.jpg</div>
</li></ul><ul id="categorie_equipement_id5" class="equipements" style="background-image: url(http://pro-etal.fr/img/pictos/picto-cat-refrigeration.png)"><li meta-id="21" class="ite-15">
<div class="titre">Pas de réfrigération nécessaire</div>
<div class="hidden sousTitre">Vente sur lit de glace </div>
<div class="hidden description"><p>Pas de réfrigération : méthode optimale, fusion de la glace à 0°C.</p>
</div>
<div class="hidden urlPhoto">21/photo-equi-pas-de-refrigeration.jpg</div>
</li></ul><ul id="categorie_equipement_id7" class="equipements" style="background-image: url(http://pro-etal.fr/img/pictos/picto-cat-hygiene.png)"><li meta-id="22" class="ite-16">
<div class="titre">Eau chaude sous pression</div>
<div class="hidden sousTitre">Lavabo et robinet temporisé</div>
<div class="hidden description"><p>Notre système d’eau chaude sous pression ne nécessite pas d’énergie sur le marché (Brevet exclusif société Pro-étal). Le lavabo en inox est encastré dans le plan de vente, équipé d’un robinet temporisé. Vous disposez d’un réservoir d’eaux usées sur collecteur unique, rinçable et vidangeable.</p>
<p>Il est accompagné d’un distributeur de savon liquide rechargeable. </p>
</div>
<div class="hidden urlPhoto">22/photo-equi-eau.jpg</div>
</li><li meta-id="23" class="ite-17">
<div class="titre">Dévidoir à papier d'essuyage</div>
<div class="hidden sousTitre"> </div>
<div class="hidden description"><p>Le dévidoir à papier d’essuyage est rechargeable.</p>
</div>
<div class="hidden urlPhoto">23/photo-equi-devidoir.jpg</div>
</li></ul><ul id="categorie_equipement_id8" class="equipements" style="background-image: url(http://pro-etal.fr/img/pictos/picto-cat-vitrine.png)"><li meta-id="26" class="ite-18">
<div class="titre">Remontée vitrée</div>
<div class="hidden sousTitre"> </div>
<div class="hidden description"><p>Une remontée vitrée, droite ou inclinée, est placée sur votre plan de vente.</p>
</div>
<div class="hidden urlPhoto">26/photo-equi-remontee.jpg</div>
</li><li meta-id="27" class="ite-19">
<div class="titre">Plan de vente en polyester</div>
<div class="hidden sousTitre"> </div>
<div class="hidden description"><p>Le plan de vente (fond de la vitrine) en polyester est totalement plat (ou incliné en option). Sans joints, tous les angles sont stratifiés pour une étanchéité parfaite et une durée de vie optimale. Quatre crépines évacuent l'eau vers un collecteur unique. Sa largeur intérieure utile est de 86 cm. Il comporte un vide poche sous le comptoir côté vendeur.</p>
</div>
<div class="hidden urlPhoto">27/photo-equi-plan-polyester.jpg</div>
</li><li meta-id="59" class="ite-20">
<div class="titre">Repose-sac de courtoisie</div>
<div class="hidden sousTitre"> </div>
<div class="hidden description"><p>Comme son nom l’indique, il n’est pas indispensable, mais il invite la clientèle à s’attarder devant votre vitrine. On peut y déposer son sac lors du paiement, et il est aussi très apprécié en période humide. De plus, il offre une sécurité supplémentaire pour vos vitrages durant les trajets en les bloquant en position relevée. D’une robustesse à toute épreuve, il peut supporter une très lourde charge (jusqu’à 100 kgs).</p>
</div>
<div class="hidden urlPhoto">59/photo-equi-repose-sac.jpg</div>
</li></ul><ul id="categorie_equipement_id10" class="equipements" style="background-image: url(http://pro-etal.fr/img/pictos/picto-cat-tablelaterale.png)"><li meta-id="29" class="ite-21">
<div class="titre">2 tables latérales</div>
<div class="hidden sousTitre">en polyester</div>
<div class="hidden description"><p>Deux tables latérales en polyester peuvent offrir deux mètres de plus à votre surface de vente. Elles se replient à l’intérieur de la remorque lors de la fermeture de celle-ci. A la demande, elles sont également dégondables si besoin.</p>
</div>
<div class="hidden urlPhoto">29/photo-equi-tables.jpg</div>
</li></ul><ul id="categorie_equipement_id14" class="equipements" style="background-image: url(http://pro-etal.fr/img/pictos/picto-cat-bachesdeprotection.png)"><li meta-id="36" class="ite-22">
<div class="titre">Entourage de bâches blanches</div>
<div class="hidden sousTitre"> Bâches standard, démontables</div>
<div class="hidden description"><p>L'entourage de bâches vous permettra à la fois de fermer votre commerce côté vendeur, mais aussi de vous protéger des intempéries. Les trois grandes bâches de fond (A,B, et C) s’enroulent sous les volets avec la possibilité d’un démontage rapide. Sous les bâches d'angles, deux bâches ferment hermétiquement l'entourage (bâches X). Les triangles à glissières, agrémentées de festons, complètent la couverture.</p>
</div>
<div class="hidden urlPhoto">36/photo-equi-baches.jpg</div>
</li><li meta-id="83" class="ite-23">
<div class="titre">Impression publicitaire</div>
<div class="hidden sousTitre">sur vos bâches d'entourage</div>
<div class="hidden description"><p>Nous vous proposons d'imprimer sur vos bâches standard les éléments que vous souhaitez : votre logo, des photos de votre exploitation, de vos produits... des textes, couleurs et typographies de votre choix. Nous vous accompagnons dans la réalisation de cette publicité, très impactante pour le public.</p>
</div>
<div class="hidden urlPhoto">83/photo-equi-etal-poissonnier.jpg</div>
</li></ul>
</div></div>
Related
I've been stuck with a problem with a sticky element in a web form. It works as it should (moves along with column headers and sticks in position upon reaching the preset "top" coordinates... however, it shows up before it should! This causes me to end up with a green rectangle blocking the view at the bottom of the page.
I guess it has to do with its parent container and the fact that there's another sticky element above the one causing trouble. But I can't figure out the solution.
I'm attaching the HTML and CSS for reference. The problematic element has a class name "whitebkgrd_worksession_2" (the first instance in the CSS is embbeded in a media query.)
Thanks!
<section>
<h2 class="worksessionsticky">En sesión de trabajo con Gerente de Servicio y Líder de Calidad</h2>
<fieldset class="WorkSession">
<div class="whitebkgrd_worksession"></div>
<p class="form8header1">Encuesta de Pulso</p>
<p class="form8header2">Sí</p>
<p class="form8header3">No</p>
<p class="form8header4">Comentarios</p>
<p class="form8header5">Material de apoyo para DMA</p>
<label class="form8item1">1. ¿Existe correlación entre resultados de PULSO y CSI?
<br>
<br>PULSO CSI / NPS > Platforma CSI / NPS & VOC ---> Requiere
Plan de acción</label>
<input class="form8item1radio1" type="radio" name="section2q1" id="ah" value="Accept2" required>
<input class="form8item1radio2" type="radio" name="section2q1" id="ai" value="Reject2">
<textarea class="form8item1comment" placeholder="Escribe tus notas aquí"></textarea>
<div class="borderline12"></div>
<p class="multianswer5">El Distribuidor ha difundido y asegurado que cada
integrante en servicio aplique:</p>
<label class="form8item2_1">2. Infografía de Pulso (Enfoque y mejores prácticas)</label>
<input class="form8item2_1radio1" type="radio" name="section2q2_1" id="aj" value="Accept2" required>
<input class="form8item2_1radio2" type="radio" name="section2q2_1" id="ak" value="Reject2">
<label class="form8item2_2">3. Script de Pulso (¿Cómo invitar a los Clientes a contestar pulso?)</label>
<input class="form8item2_2radio1" type="radio" name="section2q2_2" id="al" value="Accept2" required>
<input class="form8item2_2radio2" type="radio" name="section2q2_2" id="am" value="Reject2">
<textarea class="multicomm5" placeholder="Escribe tus notas aquí"></textarea>
<div class="borderline13"></div>
<p class="multianswer6">La notificación de HOT ALERTS en la aplicación de Pulso
funciona correctamente para:</p>
<label class="form8item3_1">4. Gerente de Servicio</label>
<input class="formitem3_1radio1" type="radio" name="section2q3_1" id="an" value="Accept2" required>
<input class="formitem3_1radio2" type="radio" name="section2q3_1" id="ao" value="Reject2">
<label class="form8item3_2">5. Líder de Calidad</label>
<input class="formitem3_2radio1" type="radio" name="section2q3_2" id="ap" value="Accept2" required>
<input class="formitem3_2radio2" type="radio" name="section2q3_2" id="aq" value="Reject2">
<label class="form8item3_3">Personal asignado para atender Clientes (especificar qué puestos tienen)</label>
<textarea class="multicomm6" placeholder="Escribe tus notas aquí"></textarea>
<div class="borderline14"></div>
<p class="form8itemadded">El Gerente de Servicio y Líder de Calidad deberán mostrar si:</p>
<label class="form8itemadded_1">6. Conocen dónde revisar su calificación de CSI/NPS de Pulso</label>
<input class="formitemaddedradio1" type="radio" name="section2qadded" id="at2" value="Accept2" required>
<input class="formitemaddedradio2" type="radio" name="section2qadded" id="au2" value="Reject2">
<label class="form8itemadded_2">7. Cumplen con el objetivo del 70% de Encuestas de Pulso vs OR (público y garantía)</label>
<input class="formitemadded_2radio1" type="radio" name="section2qadded2" id="at2_2" value="Accept2" required>
<input class="formitemadded_2radio2" type="radio" name="section2qadded2" id="au2_2" value="Reject2">
<textarea class="multicommadded" placeholder="Escribe tus notas aquí"></textarea>
<div class="borderline15"></div>
<label class="form8item4">8. ¿El Distribuidor analiza la calidad de información en Encuestas de Pulso?</label>
<input class="formitem4radio1" type="radio" name="section2q4" id="at" value="Accept2" required>
<input class="formitem4radio2" type="radio" name="section2q4" id="au" value="Reject2">
<textarea class="multicomm7" placeholder="Escribe tus notas aquí"></textarea>
<p class="form8item4note1">Si alguno de los puntos de análisis no se realiza, el punto 5 se encuentra en incumplimiento (marcar la casilla “NO”):</p>
<p class="form8item4note2">-% de encuestas sin comentarios vs total de encuestas en el mes</p>
<p class="form8item4note3">-% de encuestas comentarios SENTIMIENTO NEGATIVO vs total de encuestas en el mes</p>
<p class="form8item4note4">-% de Hot Alerts en Pulso vs total de encuestas en el mes</p>
<p class="form8item4note5">-Acciones puntuales de mejora con base en el análisis de información de la Encuesta de Pulso</p>
<div class="borderline16"></div>
<label class="form8item2ndadded">9. ¿Cuenta el Distribuidor con un proceso de recuperación de clientes por HA de Pulso (evidencia de procesos y responsables, así como casos documentados)?</label>
<input class="formitem2ndaddedradio1" type="radio" name="section2qadded3" id="at3" value="Accept2" required>
<input class="formitem2ndaddedradio2" type="radio" name="section2qadded3" id="au3" value="Reject2">
<textarea class="multicommadded2" placeholder="Escribe tus notas aquí"></textarea>
<div class="borderline17"></div>
<div class="form8jobaid1_back">
</div>
<p class="form8jobaid1">Reporte mensual revisado
<br>Resultados CX</p>
<div class="form8jobaid2_back">
</div>
<p class="form8jobaid2"><a target="_blank">Infografía digital Pulso</a>
<br><a target="_blank">Script aplicación encuesta de Pulso</a></p>
<div class="form8jobaid3_back">
</div>
<p class="form8jobaid3"><a target="_blank">Manual de usuario de plataforma de Pulso</a></p>
<div class="whitebkgrd_worksession_2"></div>
<p class="form8header1_2">CSI & VOC</p>
<p class="form8header2_2">Sí</p>
<p class="form8header3_2">No</p>
<p class="form8header4_2">Comentarios</p>
<p class="form8header5_2">Material de apoyo para DMA</p>
<label class="form8item5">10. ¿Existe un proceso para asegurar la calidad de los registros en su DMS para las encuestas de CSI?</label>
<input class="form8item5radio1" type="radio" name="section2q5" id="av" value="Accept2" required>
<input class="form8item5radio2" type="radio" name="section2q5" id="aw" value="Reject2">
<textarea class="form8item5comment" placeholder="Escribe tus notas aquí"></textarea>
<div class="borderline18"></div>
<label class="form8item6">11. ¿Cuenta con esquema retador y alcanzable de bonificación por cumplimiento de CSI y “0” HA para Asesores de Servicio?</label>
<input class="form8item6radio1" type="radio" name="section2q6" id="ax" value="Accept2" required>
<input class="form8item6radio2" type="radio" name="section2q6" id="ay" value="Reject2">
<textarea class="form8item6comment" placeholder="Escribe tus notas aquí"></textarea>
<div class="borderline19"></div>
<label class="form8item7">12. ¿El Distribuidor conoce las 3 prioridades de mejora con base a sus VERBATIMS? (Sentimiento Negativo)</label>
<input class="form8item7radio1" type="radio" name="section2q7" id="az" value="Accept2" required>
<input class="form8item7radio2" type="radio" name="section2q7" id="aaa" value="Reject2">
<textarea class="form8item7comment" placeholder="Escribe tus notas aquí"></textarea>
<div class="borderline20"></div>
<label class="form8item8">13. ¿Cuenta con revisiones programadas con su equipo de
servicio para revisar PULSO y desempeño de CSI / NPS (Plataforma de InMoment)? ¿Tiene evidencia?</label>
<input class="form8item8radio1" type="radio" name="section2q8" id="aab" value="Accept2" required>
<input class="form8item8radio2" type="radio" name="section2q8" id="aac" value="Reject2">
<textarea class="form8item8comment" placeholder="Escribe tus notas aquí"></textarea>
<div class="borderline21"></div>
<label class="form8item9">14. ¿El Gerente de Servicio revisa con su equipo el One
Pager de Posventa?</label>
<input class="form8item9radio1" type="radio" name="section2q9" id="aad" value="Accept2" required>
<input class="form8item9radio2" type="radio" name="section2q9" id="aae" value="Reject2">
<textarea class="form8item9comment" placeholder="Escribe tus notas aquí"></textarea>
<div class="borderline22"></div>
<label class="form8item10">15. ¿Cuenta con acciones puntuales en su Plan de Mejora considerando los resultados de CSI / NPS & Verbatims?</label>
<input class="form8item10radio1" type="radio" name="section2q10" id="aaf" value="Accept2" required>
<input class="form8item10radio2" type="radio" name="section2q10" id="aag" value="Reject2">
<textarea class="form8item10comment" placeholder="Escribe tus notas aquí"></textarea>
<div class="borderline23"></div>
<label class="form8item11">16. ¿El personal de Servicio ha acreditado el WBT del
Proceso Revisado de atención en Servicio?</label>
<input class="form8item11radio1" type="radio" name="section2q11" id="aah" value="Accept2" required>
<input class="form8item11radio2" type="radio" name="section2q11" id="aai" value="Reject2">
<textarea class="form8item11comment" placeholder="Escribe tus notas aquí"></textarea>
<p class="form8item11note">Verificar si han revisado el VIDEO y que cuenten con la infografía digital</p>
<div class="form8jobaid4_back">
<p class="form8jobaid4"><a target="_blank">Reportes de calidad de registros</a></p>
</div>
<div class="form8jobaid5_back">
<p class="form8jobaid5"><a target="_blank">Esquema base comisiones por CSI</a></p>
</div>
<div class="form8jobaid6_back">
<p class="form8jobaid6"><a target="_blank">Dashboard verbatims - Encuestas de CSI</a></p>
</div>
<div class="form8jobaid7_back">
<p class="form8jobaid7">OnePager posventa CSI</p>
</div>
<div class="form8jobaid8_back">
<p class="form8jobaid8"><a target="blank">Proceso rediseñado "Atención a clientes en Servicio"</a>
<br><a target="_blank">Video e infografía digital</a></p>
</div>
</fieldset>
<p class="page2footer">Acordar acción requerida por parte del Distribuidor dentro del PLAN DE ACCIÓN para respuestas “NO”.</p>
</section>
</main>
</fieldset>
</section>
</form>
</body>
</html>
CSS:
#media (orientation: portrait){
label, p, input, placeholder {
font-size: 0.8em
}
.worksessionsticky {
font-size: 1em;
}
.form3header1, .form7header1,
.form3item1, .form3item2,
.form7item1, .form7item2,
.counter, .percentage {
font-size: 0.65em;
}
.receptionsticky, .followupsticky, .deliverysticky, .worksessionsticky {
position: sticky;
top: 85px;
z-index: 1;
-webkit-overflow-scrolling: auto;
backface-visibility: hidden;
width: 102%;
padding-top: 15px;
}
.form8header1, .form8header2, .form8header3,
.form8header4, .form8header5, .form8header1_2,
.form8header2_2, .form8header3_2, .form8header4_2,
.form8header5_2 {
position: sticky;
top: 140px;
z-index: 0;
padding-top: 25px;
-webkit-overflow-scrolling: auto;
backface-visibility: hidden;
}
.whitebkgrd_worksession_2 {
position: sticky;
top: 130px;
left: 0px;
bottom: 0;
z-index: 0;
padding-top: 9px;
-webkit-overflow-scrolling: auto;
backface-visibility: hidden;
grid-column: 1 / 6;
width: 108%;
height: 78px;
margin-left: 0;
background-color: lightgreen;
grid-row: 20;
}
}
.whitebkgrd_worksession_2 {
position: sticky;
z-index: 0;
top: 130px;
left: 0px;
bottom: 0;
padding-top: 9px;
-webkit-overflow-scrolling: auto;
backface-visibility: hidden;
grid-column: 1 / 6;
width: 108%;
height: 78px;
margin-left: 0;
background-color: lightgreen;
grid-row: 20;
}
I've encountered a pretty weird CSS error which stops CSS from properly being applied. Check out the screenshot I took from the Chrome inspection tool.
Weird CSS in inspector
The code is pretty straightforward:
<div class="addownsong">
<span class="hidesongadder"><i class="fa fa-times"></i></span>
<h4>Artiest</h4>
<input id="artist-name" type="text" style="background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQVQ4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg=="); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: auto;">
<h4>Titel</h4>
<input id="track-name" type="text">
<div class="minutes">
<h4>Minuten</h4>
<input id="track-minutes" type="text" min="0" max="59">
</div>
<div class="timedivider">
<h4>:</h4>
</div>
<div class="seconds">
<h4>Seconden</h4>
<input id="track-seconds" type="text" min="0" max="59">
</div>
<p><strong>Wil je een scanbare Spotify code toevoegen aan je topplaatje? Gebruik onderstaande zoekbalk om het juiste nummer te vinden!</strong></p>
<input style="text-align: center;border-color:#df0d84" id="songsearch2" type="text" placeholder="Vind je favoriete nummer op basis van titel">
<div id="songsearch2-results"></div>
<div id="selected-spotify-code"></div>
<input hidden="" id="uploaded-image">
<div class="dropzone dropzonebox dz-clickable" id="my-awesome-dropzone"><div class="dz-message" data-dz-message=""><span>Sleep een foto hierheen of klik om te uploaden</span></div></div>
<div style="color:#ff0000;margin-top:10px;"><center><strong>Let op: voor het beste resultaat, voeg je een vierkante foto toe</strong></center></div>
<div style="background-color:#ddd;color:#545454;border-color:#ddd;" class="createButton placeholderButton">Voeg eerst alle gegevens toe</div>
<div style="display: none;" class="createButton addCreation">Voeg je creatie toe!</div>
</div>
I tried uncovering closing/opening errors for divs, but they're all properly showing. Any ideas?
How do I align my 3 buttons horizontal side by side? I think it looks bad as it is now.
class= btn btn-danger
How do I write the css for that?
my code
<div class="row">
<div class="col-sm-4">
<h3>Stationær & bærbar reparationer</h3>
<p>Vi kan udskifte alle typer hardware de mest almindelige reparationer omfatter</p>
LÆS MERE
</div>
<div class="col-sm-4">
<h3>Fjernelse af virus</h3>
<p>Hvis din computer er inficeret med virus kan vi hjælpe dig med at rense ud i dit system. Vi kan herudover også hjælpe dig med at sikre dit system mod kommende virus angreb.</p>
LÆS MERE
</div>
<div class="col-sm-4">
<h3>Data recovery</h3>
<p>Hvis din harddisk er defekt skifter vi den billigt og hurtigt, vi kan genskabe dine data tilbage i de fleste tilfælde. eller hvis Windows er gået ned, kan vi også redde din data. </p>
LÆS MERE
</div>
</div>
</div>
Two options.
Add css to give h3 and p element fixed height (adjust numbers)
.col-sm-4 p {
height: 200px;
}
.col-sm-4 h3 {
height: 50px;
}
OR
Extract buttons to a new row.
<div class="row">
<div class="col-sm-4">
<h3>Stationær & bærbar reparationer</h3>
<p>Vi kan udskifte alle typer hardware de mest almindelige reparationer omfatter</p>
</div>
<div class="col-sm-4">
<h3>Fjernelse af virus</h3>
<p>Hvis din computer er inficeret med virus kan vi hjælpe dig med at rense ud i dit system. Vi kan herudover også hjælpe dig med at sikre dit system mod kommende virus angreb.</p>
</div>
<div class="col-sm-4">
<h3>Data recovery</h3>
<p>Hvis din harddisk er defekt skifter vi den billigt og hurtigt, vi kan genskabe dine data tilbage i de fleste tilfælde. eller hvis Windows er gået ned, kan vi også redde din data. </p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
LÆS MERE
</div>
<div class="col-sm-4">
LÆS MERE
</div>
<div class="col-sm-4">
LÆS MERE
</div>
</div>
</div>
Edit: Adding code
but i see that not the way to do it, if i should use that class again, i may have to add one more class to the parent element and retarget it as you said, just need to figure out how :) i am just a noob and pretty new at this.
but it looks good so far i think
My new PC service site
I wrote some code for an advanced liquid slider. But as my header slider contains some major content like h-tags p-tags and some images. I asked myself "can I consider each slide as an article". Because I can't find the correct answer maybe somebody can help me. The question is, is my code correctly nested and the right use of Semantic Elements. The code is:
<header id="masthead" class="site-header" role="banner">
<div id="main-slider" class="liquid-slider">
<article id="slider-1" class="liquid-slide-wrapper" style="background: url(images/back-99.jpg) 50% 50% /cover; repeat:no-repeat; min-height:450px;">
<section class="section-text-left">
<header>
<h1 class="title" style=" color:#f7740a; display:none;">Professionele, betaalbare website nodig?</h2>
<h2 style=" color:#fff; display:none;">Zelf uw website aanpassen?</h3>
</header>
<p style="display:none; color:#fff;">Onze unieke websites worden afgeleverd met een wordpress CMS systeem.<br>
Hiermee kan u zelf uw website aanpassen!<br> Vat de kudu bij de horens en contacteer ons voor meer info!
</p>
<p style="display:none;"><button type="button" class="btn btn-primary btn-lg">Mail Ons</button> <button type="button" class="btn btn-transparent btn-lg">0494 / 77 22 61</button></p>
</section>
<section class="section-img-right clearfix">
<img class="slider-img-right fadeInRight animated" style="display:none; width:100%; max-width:692px; height:auto;" src="images/imac.png" />
<img class="slider-img-right fadeIn animated-slow" style="display:none; width:100%; max-width:692px; height:auto;" src="images/straf-webdesign.png" />
<img class="slider-img-right fadeIn animated-slow" style="display:none; width:100%; max-width:692px; height:auto;" src="images/responsive-webdesign.png" />
</section>
</article>
<article id="slider-2" style="background: url(images/background-7.png) 50% 50% /cover; repeat:no-repeat; min-height:450px;">
<section class="section-text-left">
<header>
<h1 class="title" style=" color:#f7740a; display:none;">JustOnWeb wordt Kudu Concepts!</h2>
<h2 style="display:none; color:#000;">Een nieuwe naam, met een professionelere aanpak!</h3>
<header>
<p style="display:none; color:#fff;">Een website bestaat uit meer dan een lay-out. <br>Met kudu Concepts gaan we verder daar waar anderen stoppen!<br>
We bedenken een volledige filosofie voor uw website en <br> combineren dit met onze kennis van Online Marketing!
</p>
</section>
</article>
</div>
</header>
According to W3School semantic here : http://www.w3schools.com/html/html5_semantic_elements.asp
< section > contain < article >
it is not recommanded to use < section > inside < article > and inside < header >
According W3C, a section is "a thematic grouping of content, typically with a heading."
< header > is on top of parent element, so on top of body (the header) but also on top of sections or articles or any other div
In your code :
< h1 > should be close with < / h1 > and not h2, same for < h2 >
On http://associationtsunami.github.com/tsunami/, when you press the left arrow key '<' the box rotates and you get the '(i)' information icon. When you click on this, you get the 'About' dialog opening.
But also the entire page increases in height! Where is this extra height is coming from?
Here is the index.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Association Tsunami</title>
<link rel="stylesheet" type="text/css" href="css/cube.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/2.10.0/d3.v2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/cube.js" type="text/javascript" charset="utf-8"></script>
<script src="js/client.js" type="text/javascript" charset="utf-8"></script>
<!--[if lt IE 9]><script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js"></script><![endif]-->
<script>
$(document).ready(function () {
windowResize();
});
$(window).resize(function () {
windowResize();
});
window.onorientationchange = function () {
windowResize();
};
</script>
</head>
<body class="body_content">
<div id="wrapper">
<!--Cube Code from here-->
<article class="viewport">
<section class="cube">
<div id="top">
<h1>UNSONPARLA 2012 -></h1>
<p>Info about the Festival</p>
<p>Festival, Festival, Festival</p>
</div>
<div id="face">
<h1>Association Tsunami</h1>
<p>L'association Tsunami a pour but de développer la musique électronique hors norme, la musique acousmatique et la musique contemporaine instrumentale et mixte.</p>
<p>L'association gère:</p>
<ul>
<li>Le festival des musiques d'aujourd'hui Un son par là> qui existe depuis 2007 avec 2 années à Carré d'Art et 3 années dans les temples de la ville de Nîmes.</li>
<li>Le SPAM (Station Polymorphe d'Acoustique musicale) 2bis rue du grand couvent 30000 Nîmes qui est un lieu de résidence d'artistes liés au son, un lieu de présentation, un lieu de concert et de convivialité mais aussi un lieu de formation sur des programmes informatiques liés au son (pour novices, compositeurs ou DJ), le but étant de faire découvrir de nouveaux horizons de recherches sonores, et enfin un lieu d'ateliers pour la composition et la recherche et l'initiation à de nouvelles formes artistiques (tous public) ...</li>
<li>L'Ensemble O.Y.A.A.T.O qui est un ensemble de musicien qui interprète des œuvres du répertoire de la musique contemporaine, acousmatique, électronique et aussi d'art sonore.</li>
<li>L'Acousmonium SPAM (orchestre de haut parleurs) avec une quarantaine d'enceintes autonomes gérée par un pupitre de diffusion; ce qui permet la projection sonore et la mise en espace du son. L'Acousmonium SPAM fait partie des 10 plus gros acousmoniums d'Europe.</li>
</ul>
</div>
<div id="side3"></div>
<div id="side4">
<h1>Another link Page</h1>
<p>“A 3D cube can be created solely in CSS, with all six faces.”</p>
Sample div containing Links:
Yahoo
</div>
<div id="side5">
<h1>Page 5</h1>
<p>Some text</p>
<p>Festival, Festival, Festival</p>
<p>Festival, Festival, Festival</p>
<p>Festival, Festival, Festival</p>
<p>Festival, Festival, Festival</p>
<p>Festival, Festival, Festival</p>
<p>Festival, Festival, Festival</p>
<p>Festival, Festival, Festival</p>
<p>Festival, Festival, Festival</p>
<p>Festival, Festival, Festival</p>
</div>
<div id="bottom">
<h1>We can add an image</h1>
<img src="image/tsunami-bg.png"/>
</div>
</section>
</article>
</div>
<div id="about" title="About" style="display:none;">
<p>Asisium was established in 2012 by a group of experienced professionals in the construction industry with diverse but complimentary backgrounds in project management, engineering, construction, quantity surveying, architecture and law.</p>
<p>Led by two founding partners with over 35 years experience, we offer a range of consultancy services for the property development and construction industry. Our head office is based in London, UK, but we provide our services internationally throughout Europe, USA, Hong Kong, U.A.E and Myanmar (Burma).</p>
</div>
<div id="equipe" title="Equipe" style="display:none">
Direction artistique :
JLuc Gergonne (Compositeur et Musicien)
Communication :
JMarie Bernard (Infographie)
Carolle Gaillac (Chargée de communication)
Technique :
Camille Giuglaris (ingénieur du son et musicien)
Norman Khine (Développeur de projets informatiques)
Pédagogie :
JMichel Olivares (ingénieur du son et formateur)
Administration:
Marie-Hélène Mas (Comptabilité/Administration)
Carole Bourgognon (Assistante à la coordination de projet)
</div>
</body>
</html>
and the rest of the code can be found https://github.com/AssociationTsunami/tsunami
Your #about div has two <p> tags in it. The amount of text in the second paragraph is running out of space, causing it to stick out below #about, exceeding its height of 315px. You can add a style of overflow: auto; or overflow-y: auto; to #about. That'll add a scroll bar instead of having the text make the page larger.
This picture shows how it looks now. I added a green border around #about to show that the div keeps its assigned height, but the paragraphs don't stay within its bounds.
With overflow-y: auto; applied to #about, it lets the user scroll the content; giving it somewhere to go.