[HTML] Slideshow si sovrappone a <div>

iTonto

Utente Attivo
8 Feb 2018
99
1
18
www.fiverr.com
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.

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;
}
 

macus_adi

Utente Attivo
5 Dic 2017
1.141
65
48
IT/SW
Scusa hai inserito JQuery, poi nel web hai trovato un pezzetto di codice, e sicuramente hai inserito anche script src="codice_slide_show" giusto?
OK... Adesso o posti tutto il codice, con relativo css, o posti URL della pagina web da vedere....
É come andare dal meccanico senza macchina!
 

iTonto

Utente Attivo
8 Feb 2018
99
1
18
www.fiverr.com
In realtà JQuery era già all'interno della slideshow che ho usato, non l'ho inserita io. Comunque ecco il codice: https://jsfiddle.net/09x3y8bu/

Visto così non è molto chiaro. Con delle immagini forse si capisce meglio:

Schermo intero:




Schermo ridotto:




Vorrei fare in modo che lo spazio tra la slideshow e la colonna rimanga così com'è, sia a schermo intero che ridotto.
 

macus_adi

Utente Attivo
5 Dic 2017
1.141
65
48
IT/SW
#slideshow > div { position: absolute; width: 100%; }
Non sono riuscito a vedere cosa fa questa slideshow in quanto l'hai caricata poco fa... , ma non sembra granché.
Ad ogni modo visto che hai utilizzato meccanismi manuali, dovresti combinare css e js resize così da avere lo stesso effetto...
 

iTonto

Utente Attivo
8 Feb 2018
99
1
18
www.fiverr.com
La mia slideshow fondamentalmente è uguale a quella postata da te, anche nell'effetto fade in/fade out. Il problema è che il container <div id="slideshow">, quando massimizzo il browser, cresce in altezza e va a sovrapporsi all'elemento sovrastante.
 

macus_adi

Utente Attivo
5 Dic 2017
1.141
65
48
IT/SW
Quella che ti ho postato io è una libreria, quella che hai scritto tu no, è una gestione temporale.... É differente... Cmq devi lavorare sugli eventi window resize e scoll per avere chò che chiedi.... buon lavoro
 
  • Like
Reactions: iTonto