PDA

Visualizza la versione completa : Bootstrap 4 - creare una finestra di testo responsive sopra un Carousel


Rickycast
23-09-2019, 18:54
Non sono sicuro che questa mia discussione debba stare in questa sezione o i quella CSS, lascio ai moderatori la scelta.
Nel sito che devo realizzare mi chiedono di posizionare sopra ad un Carousel (realizzato con Bootstrap 4) un riquadro fisso e semitrasparente che contenga alcune frasi di testo. Quindi, mentre il Carousel continua a cambiare le immagini, il riquadro di testo deve rimanere fermo al suo posto. Ovviamente tutto l'insieme deve essere responsive. Non sono riuscito a trovare una soluzione, che però penso esista perché mi è stato mostrato un Sito che funziona proprio come ho descritto. Quello che non posso sapere è se questo Sito sia stato realizzato con Bootstrap o con altri sistemi: il sorgente è ovviamente molto stringato e per me inutilizzabile.
Non ho avuto nessuna difficoltà nel creare il Carousel, che è completamente responsive e molto fluido nel funzionamento. Mi manca questa seconda parte (per ora) e spero che qualcuno possa darmi i suggerimenti necessari a realizzarla.
Se serve posto lo script che ho realizzato, ma è comunque derivato da quanto è possibile trovare sia in Bootstrap che in W3C.

graffithouse
25-09-2019, 11:50
Basta inserire il carosello in un contenitore con posposizione relative, e inserire un altro box, oltre a quello dello slide con posizione assoluta, magari con z-index a 100 e qui inserisci i tag H1 cosi da mantenere il responsive sul testo.

Esempio
HTML


<section id="contenitore_top">
<div id="testo_sopra">
<h1>Tuo testo</h1>
</div>

...codice slide ...

</section>


Css


#contenitore_top{
display:block;
position:relative;
}

#testo_sopra{
position:absolute;
display:block;
z-index:100;
top:0;
left:0;
right:0;
bottom:0;
}

Rickycast
21-10-2019, 16:10
Molte grazie graffithouse, adesso provo e se avrò ancora problemi posterò nuovamente.

Rickycast
21-10-2019, 18:33
Ancora grazie, fa quello che mi serve.
Ho integrato il CSS per posizionare il testo al centro dello schermo ad una distanza fissa dal margine superiore e con distanze fisse dai bordi orizzontali, aggiungendo anche uno sfondo sfumato:


.testo_sopra{
position:absolute;
display:block;
z-index:100;
top:0;
left:0;
right:0;
bottom:0;

color:#FFFFFF;
margin:0px 25px 6px 25px;
font-family:"Futura Bk BT", Tahoma, Verdana, Arial;
font-size:24px;
letter-spacing: 2px;
margin: 60px 200px auto 200px;
height: 90px;
text-align: center;
background-color:#FFFF00;
opacity: 0.5;
}




Mi togli una curiosità: perché hai usato un id anziché una Class? io ho usato una Class e funziona comunque.

graffithouse
23-10-2019, 11:02
Le classi si riferiscono ad oggetti che si ripetono sulla pagina, mentre gli id si riferiscono ad oggetti unici all'interno di una pagina.

Loading