Sera,
ho una slideshow che quando metto il browser a pieno schermo va a sovrapporsi al <div> che ha sopra, se il browser è a dimensione ridotta non succede.
CSS:
ho una slideshow che quando metto il browser a pieno schermo va a sovrapporsi al <div> che ha sopra, se il browser è a dimensione ridotta non succede.
HTML:
<div class="row2">
<div class="col1-2">
<img src="images/corner.png"><h2>ARTE, CULTURA E SOCIETA'</h2>
<div class="p">L'Umbria è ricca di personaggi importanti che ne hanno costellato la storia, sia in
ambito artistico sia in ambito politico, culturale e religioso.</div>
<div class="p">Partendo da quest'ultimo è impossibile non citare San Francesco d'Assisi, la persona
più illustre dell'Umbria, che fondò l'ordine che da lui poi prese il nome e che è venerato come santo
dalla Chiesa cattolica. Oltre che per l'opera spirituale, Francesco è riconosciuto anche come uno degli
iniziatori della tradizione letteraria italiana nonché come patrono d'Italia.<br>Altro santo di grande
importanza è sicuramente San Valentino, la cui storia risale all'epoca romana quando l’allora papa
Gelasio I per porre fine ai lupercalia (gli antichi riti pagani dedicati al dio della fertilità Luperco
che venivano celebrati ogni 15 febbraio) decise di anticiparli al giorno precedente, dedicato appunto
a San Valentino, facendolo diventare in un certo modo il protettore degli innamorati.<br>Altri santi
minori, ma non per questo meno importanti, sono San Benedetto da Norcia, Santa Chiara d'Assisi, Santa
Rita da Cascia e Sant'Ercolano.</div>
<div class="p">In ambito artistico molto famose sono le opere di Pietro Vannucci detto il Perugino,
pittore italiano e maestro di Raffaello a cui si devono opere come l'Adorazione dei Magi, il
Battesimo di Cristo, Cappella Sistina, Consegna delle chiavi e lo Sposalizio della Vergine.<br>
Bernardino di Betto Betti detto il Pinturicchio, maestro nell'arte della pittura su tavola, dell'affresco
e della miniatura lavorò per alcune delle più importanti personalità del suo tempo e fu uno dei grandi
maestri della scuola umbra del secondo quattrocento, con Pietro Perugino e il giovane Raffaello.<br>In
architettura va menzionato Galeazzo Alessi che eseguì numerosi interventi sui monumenti della sua città
natale e che realizzò Palazzo Marino a Milano dove intervenne anche sul Duomo.<br>Anche nello spettacolo
l'Umbria ha il suo pezzo forte che si manifesta nella persona di Monica Bellucci, attrice in numerose
pellicole di spessore e modella di fama internazionale.</div>
</div>
</div>
<div class="col2-2">
<div id="slideshow">
<div>
<img class="slimg" src="images/sanfrancesco.jpg">
<span class="cap">San Francesco</span>
</div>
<div>
<img class="slimg" src="images/sanvalentino.jpg">
<span class="cap">San Valentino</span>
</div>
<div>
<img class="slimg" src="images/gelasio.jpg">
<span class="cap">Papa Gelasio I</span>
</div>
<div>
<img class="slimg" src="images/luperco.jpg">
<span class="cap">Luperco</span>
</div>
<div>
<img class="slimg" src="images/sanbenedettonorcia.jpg">
<span class="cap">San Benedetto da Norcia</span>
</div>
<div>
<img class="slimg" src="images/santachiaraassisi.jpg">
<span class="cap">Santa Chiara d'Assisi</span>
</div>
<div>
<img class="slimg" src="images/santaritacascia.jpg">
<span class="cap">Santa Rita da Cascia</span>
</div>
<div>
<img class="slimg" src="images/santercolano.jpg">
<span class="cap">Sant'Ercolano</span>
</div>
</div>
<div id="slideshow2">
<div>
<img class="slimg" src="images/perugino.jpg">
<span class="cap">Pietro Vannucci detto il Perugino</span>
</div>
<div>
<img class="slimg" src="images/perugino2.jpg">
<span class="cap">Adorazione dei Magi (Perugino)</span>
</div>
<div>
<img class="slimg" src="images/perugino3.jpg">
<span class="cap">Battesimo di Cristo (Perugino)</span>
</div>
<div>
<img class="slimg" src="images/perugino4.jpg">
<span class="cap">Consegna delle Chiavi (Perugino)</span>
</div>
<div>
<img class="slimg" src="images/perugino5.jpg">
<span class="cap">Sposalizio della Vergine (Perugino)</span>
</div>
<div>
<img class="slimg" src="images/pinturicchio.jpg">
<span class="cap">Bernardino di Betto Betti detto il Pinturicchio</span>
</div>
<div>
<img class="slimg" src="images/pinturicchio2.jpg">
<span class="cap">Interno della Libreria Piccolomini</span>
</div>
<div>
<img class="slimg" src="images/pinturicchio3.jpg">
<span class="cap">Disputa di Gesù coi dottori (Cappella Baglioni)</span>
</div>
<div>
<img class="slimg" src="images/pinturicchio4.jpg">
<span class="cap">Resurrezione di Cristo con papa Alessandro VI inginocchiato (Appartamento Borgia)</span>
</div>
<div>
<img class="slimg" src="images/galeazzoalessi.jpg">
<span class="cap">Galeazzo Alessi</span>
</div>
<div>
<img class="slimg" src="images/bellucci.jpg">
<span class="cap">Monica Bellucci</span>
</div>
</div>
</div>
</div>CSS:
HTML:
#slideshow {
margin: 0;
position: relative;
margin-bottom: 10px;
width: 100%;
height: 501px;
padding: 0;
box-shadow: 0 0 5px rgba(0,0,0,0.4);
}
#slideshow > div {
position: absolute;
width: 100%;
}
#slideshow .slimg {
width: 100%;
height: 501px;
}
#slideshow .cap {
position: absolute;
width: 100%;
top: 451px;
left: 0;
margin: 0;
padding: 5px 0 15px 0;
background-color: rgba(242,242,242,.6);
color: #FFFFFF;
text-align: center;
}
#slideshow2 {
margin: 0;
position: relative;
width: 100%;
height: 501px;
padding: 0;
box-shadow: 0 0 5px rgba(0,0,0,0.4);
}
#slideshow2 > div {
position: absolute;
width: 100%;
}
#slideshow2 .slimg {
width: 100%;
height: 501px;
}
#slideshow2 .cap {
position: absolute;
width: 100%;
top: 451px;
left: 0;
margin: 0;
padding: 5px 0 15px 0;
background-color: rgba(242,242,242,.6);
color: #FFFFFF;
text-align: center;
}
.col2-2 {
float: right;
width: 47.5%;
padding: 0;
margin-top: -1011px;
margin-right: 30px;
}
.row2:after {
content: "";
display: table;
clear: both;
}
