Dialog box makes background higher - css

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.

Related

How to align text with a imagen using Bootstrap and Css

Im creating a web app and I need to know how to align images with text. Right now, I have this:
What I want it to have the image on the left with it description on the right. The code Im using is this:
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="https://images-na.ssl-images-amazon.com/images/I/91epzdXTTHL._SX300_.jpg" alt="Lights" style="width:20%">
<div class="caption">
<pelicula tipo="accion" calificacion="Mayores de 13" estreno="26 de abril de 2019" ></pelicula>
<titulo>Titulo: Avengers Engame</titulo><br />
<director>Dirección: Joe and Anthony Russo</director><br />
<productor>Producción: Kevin Feige</productor><br />
<guion>Guión: Cristhoper Markus y Stephen McFeely</guion><br />
<musica>Música: Alan Silvestri</musica><br />
<duracion>Duración: 181 minutos</duracion><br />
<productora>Productora: Marvel Studios</productora><br />
<Presupuesto>Presupuesto: 356.000.000 $</Presupuesto><br />
<Recaudacion>Recaudación: 2.800.000.000 $</Recaudacion><br /
<Comentarios> Comentario: Una de las peliculas mas esperadas del año. El desenlace final la guerra del infinito. </Comentarios><br />
</div>
</div>
</div>
</div>

You could provide a Codepen example, it would be useful to other developers.
Anyway, you can accomplish this with the flexbox:
.thumbnail {
display: flex;
}
Another way would be to use the bootstrap grid or using CSS float.

use bootstrap flex to do https://getbootstrap.com/docs/4.5/utilities/flex/
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex align-items-center p-2 text-white-50 rounded shadow-sm" style="background-color:var(--purple)">
<img src="https://images-na.ssl-images-amazon.com/images/I/91epzdXTTHL._SX300_.jpg" alt="Lights" style="width:30%">
<div class="lh-100 ml-3">
<div class="caption">
<pelicula tipo="accion" calificacion="Mayores de 13" estreno="26 de abril de 2019"></pelicula>
<titulo>Titulo: Avengers Engame</titulo><br />
<director>Dirección: Joe and Anthony Russo</director><br />
<productor>Producción: Kevin Feige</productor><br />
<guion>Guión: Cristhoper Markus y Stephen McFeely</guion><br />
<musica>Música: Alan Silvestri</musica><br />
<duracion>Duración: 181 minutos</duracion><br />
<productora>Productora: Marvel Studios</productora><br />
<Presupuesto>Presupuesto: 356.000.000 $</Presupuesto><br />
<Recaudacion>Recaudación: 2.800.000.000 $</Recaudacion><br / <Comentarios> Comentario: Una de las peliculas mas esperadas del año. El desenlace final la guerra del infinito. </Comentarios><br />
</div>
</div>

This is very simple with flex function in css. Add display: flex; to .thumbnail class. If you don't know about display flex refer below sites.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://www.w3schools.com/css/css3_flexbox.asp
<div class="row">
<div class="col-md-4" style="background: yellowgreen;">
<div class="thumbnail" style="display: flex;padding: 10px;">
<img src="https://images-na.ssl-images-amazon.com/images/I/91epzdXTTHL._SX300_.jpg" alt="Lights" style="width:20%;">
<div class="caption" style="margin-left: 20px; ">
<pelicula tipo="accion" calificacion="Mayores de 13" estreno="26 de abril de 2019" ></pelicula>
<titulo>Titulo: Avengers Engame</titulo><br />
<director>Dirección: Joe and Anthony Russo</director><br />
<productor>Producción: Kevin Feige</productor><br />
<guion>Guión: Cristhoper Markus y Stephen McFeely</guion><br />
<musica>Música: Alan Silvestri</musica><br />
<duracion>Duración: 181 minutos</duracion><br />
<productora>Productora: Marvel Studios</productora><br />
<Presupuesto>Presupuesto: 356.000.000 $</Presupuesto><br />
<Recaudacion>Recaudación: 2.800.000.000 $</Recaudacion><br /
<Comentarios> Comentario: Una de las peliculas mas esperadas del año. El desenlace final la guerra del infinito. </Comentarios><br />
</div>
</div>
</div>

Wordpress Contact Form don't send files in attachment

I've got a little problem with CF7. The plugin works good in wordpress, but when I put the file field on the form, the wordpress doesn't send the e-mail, if I take off the file field, it works perfectly.
EDIT -----------
Form HTML:
<div class="row-fluid formulario-cotacao">
<div class="span12">
<h3>Seus Dados de Contato</h3>
[text* your-name watermark "Nome:"]
[email* your-email watermark "E-mail:"]
[tel* tel-987 id:telId class:telClass watermark "Telefone:"]
[textarea your-message watermark "Mensagem:"]
</div>
<div class="span12">
<h3>Tipo de Seguro Desejado</h3>
[checkbox* tipo-seguro id:tipo-seguro class:tipo-seguro label_first use_label_element "seguro de automóvel" "seguro de motos" "consórcio" "seguro de vida" "planos de saúde" "seguro de caminhões" "seguro prestamista" "carta verde" "previdência privada" "seguro viagem"]
</div>
<div class="span12">
[text outros id:outros class:outros watermark "Outros Seguros Desejados:"]
</div>
<div class="span12">
<p>Enviar arquivo</p>
<p>[file arquivo limit:3000000 filetypes:jpg|doc|png|pdf id:arquivo class:arquivo]</p>
</div>
<p class="text-center">[submit id:cotar class:cotar "solicitar cotação"] <input type="reset" value="limpar campos" /> </p>
</div>
IN MESSAGE BODY:
<h1 style="font-family:Arial, Helvetica, sans-serif; font-size:22px; line-height:26px; color:#06F;">Cotação do Web Site</h1>
<p><b>Nome: </b><br/> [your-name]</p>
<p><b>E-mail: </b><br/> [your-email]</p>
<p><b>Telefone: </b><br/> [tel-987]</p>
<p><b>Mensagem: </b><br/> [your-message]</p>
<p><b>Outros seguros desejados: </b> <br/> [outros]</p>
<p><b>Arquivo:</b> <img src="[arquivo]"> <br> [arquivo]</p>
<br/><br/><br/><br/>
<h3 style="font-family:Arial, Helvetica, sans-serif; font-size:22px; line-height:26px; color:#06F;">
<b>Tipo de Seguro Desejado</b>
</h3><br/>
<p> [tipo-seguro]</p>
IN ATTACHMENT FIELD:
[arquivo] // <-- this is my input file field
Someone already had the same problem?

Css column-count error on safari

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>

Correct use of section article and heading

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 >

Bootstrap modal with URL rewriting

The structure of my pages is:
Page1.aspx
Page2.aspx
Page3.aspx
With URL rewriting I have this struture:
Folder1/Page1
Folder1/Page2
Page3
If I put a modal inside Page3.aspx, the modal works perfectly.
If I instead put a modal inside Page1.aspx or Page2.aspx, the modal doesn't work.
Here is my code:
<img src="../images/RecuperoDati/Brochure1.jpg" class="img-responsive" data-toggle="modal" data-target="#Modal1"/>
....
<!-- Modal 1-->
<div class="modal fade" id="Modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel1">rftyguhij</h4>
</div>
<div class="modal-body center">
<img src="../images/RecuperoDati/Brochure1.jpg"/>
</div>
<div class="modal-footer">
Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione. È sopravvissuto non solo a più di cinque secoli, ma anche al passaggio alla videoimpaginazione, pervenendoci sostanzialmente inalterato. Fu reso popolare, negli anni ’60, con la diffusione dei fogli di caratteri trasferibili “Letraset”, che contenevano passaggi del Lorem Ipsum, e più recentemente da software di impaginazione come Aldus PageMaker, che includeva versioni del Lorem Ipsum.
</div>
</div>
</div>
</div>
If I read the HTML with the browser, the id is Modal1. So what Is wrong?

It's difficult to say when you've only given some of the code, but my guess is you URL rewriting is changing the path you need to use for bootstrap.js.
E.g. in Page3 if your path to the JS is ./js/bootstrap.js then in Page1, which becomes Folder1/Page1, you would need ../js/bootstrap.js instead.

Resources