Visualizzazione dei risultati da 1 a 2 su 2
  1. #1
    Utente di HTML.it L'avatar di Rickycast
    Registrato dal
    Apr 2007
    residenza
    CHIERI (TO)
    Messaggi
    230

    Bootstrap 4 - creare una finestra di testo responsive sopra un Carousel

    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.

  2. #2
    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
    codice:
    <section id="contenitore_top">
    <div id="testo_sopra">
        <h1>Tuo testo</h1>
    </div>
    
    ...codice slide ...
    
    </section>
    Css
    codice:
    #contenitore_top{
    display:block;
    position:relative;
    }
    
    #testo_sopra{
    position:absolute;
    display:block;
    z-index:100;
    top:0;
    left:0;
    right:0;
    bottom:0;
    }

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.