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

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

  3. #3
    Utente di HTML.it L'avatar di Rickycast
    Registrato dal
    Apr 2007
    residenza
    CHIERI (TO)
    Messaggi
    240
    Molte grazie graffithouse, adesso provo e se avrò ancora problemi posterò nuovamente.

  4. #4
    Utente di HTML.it L'avatar di Rickycast
    Registrato dal
    Apr 2007
    residenza
    CHIERI (TO)
    Messaggi
    240
    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:
    codice:
    .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.

  5. #5
    Le classi si riferiscono ad oggetti che si ripetono sulla pagina, mentre gli id si riferiscono ad oggetti unici all'interno di una pagina.

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 © 2021 vBulletin Solutions, Inc. All rights reserved.