Navigazione

    Privacy - Termini e condizioni
    © 2020 Search On Media Group S.r.l.
    • Registrati
    • Accedi
    • CATEGORIES
    • Discussioni
    • Non letti
    • Recenti
    • Hashtags
    • Popolare
    • Utenti
    • Stream
    • Interest
    • Categories
    1. Home
    2. marcobors
    3. Post
    M

    marcobors

    @marcobors

    • Profilo
    • Chi segue 0
    • Da chi è seguito 0
    • Discussioni 1
    • Post 1
    • Migliore 0
    • Gruppi 0
    Iscrizione Ultimo Accesso
    Località Firenze Età 40
    0
    Reputazione
    1
    Post
    0
    Visite al profilo
    0
    Da chi è seguito
    0
    Chi segue
    User Newbie

    Post creati da marcobors

    • Usare position: absolute in zurb foundation

      Buonasera a tutti,

      Spero di aver scelto la sezione giusta per questa domanda - appena iscritto, abbiate pazienza se non ho afferrato bene tutte le regole del forum.

      Sto sviluppando sito con Zurb Foundation e mi chiedevo se esiste un equivalente di .killer in foundation. Il mio problema è il seguente:

      ho tre div .columns inseriti all'interno di un div .row, dei quali il div .columns centrale è il più alto dei tre; io ho bisogno di fissare il primo .columns al fondo del div .row, così da lasciare uno spazio vuoto in alto (per il testo) e allineare i primi due div .columns alla base del div row. Ho provato dando al div .row position:relative e al primo div .columns position:absolute e bottom:0, ma così facendo il primo div .columns esce dal flusso e gli altri due mi si spaginano. Normalmente risolverei il problema con un div .killer, ma mi pare di capire che Foundation abbia i sui killer ed è un rischio andarne a inserire di nuovi.

      Ricopio qui sotto il codice sorgente e il relativo css, ridotti all'osso per semplificare la comprensione.

      Codice sorgente:
      <div class="row secondBand">

      <div class="large-4 columns leftCol">
          <h2>Gli ultimi prodotti</h2>
          <div class="orbit-container slideshow-wrapper"> *qui c'è uno slider orbit* </div>       
      

      </div>

      <div class="large-4 columns central">
      <div class="banner">img</div>
      <div class="banner">img</div>
      <div class="banner">img</div>
      </div>

      <div class="large-4 columns">
      <div class="banner">img</div>
      <div class="banner">img</div>
      </div>

      </div>

      CSS:.row.secondBand {padding: 0; position: relative;}

      .row.secondBand .large-4.columns {width: 30%; padding: 0;}

      .row.secondBand .large-4.columns.leftCol {position: absolute; bottom: 0;}

      .row.secondBand .large-4.columns.central {margin: 0 5%;}

      .row.secondBand .large-4.columns .banner {position: relative; clear: both; margin-bottom: 2em;}

      Il problema, appunto, è che ancorando .large-4.columns.leftCol al fondo di .row.secondBand gli altri .large-4.columns si allargano nella pagina e .large-4.columns.central si sovrappone a .large-4.columns.leftCol.

      C'è nessuno che sappia come risolvere questo problema usando le classi di Foundation?

      Se il testo non è chiaro, chiedete pure.

      Grazie mille!

      postato in Help Center: consigli per il tuo progetto
      M
      marcobors