Visualizzazione dei risultati da 1 a 5 su 5
  1. #1
    Utente di HTML.it
    Registrato dal
    Sep 2004
    Messaggi
    366

    posizionare 4 div in due colonne

    Ciao,
    ho 4 div da posizionare. (Allego sotto un semplice schema per far vedere).
    Quello che mi chiedo è il metodo migliore per posizionarli in quel modo. Se possibile, avendo le dimensioni dei div e degli spazi dinamici, che variano in base alla dimensione dello schermo (finestra del browser).

    Innazitutto, ho pensato ovviamente alla proprietà display. Racchiudendo ogni riga in un div più grande. Questi due div contenitori settati con display: block mentre i due div contenuti, settati con display: inline.

    E' la soluzione migliore o ne esistono di più eleganti?

    Poi, come posso fare per fare in modo che le dimensioni e gli spazi (padding) dei div cambino in base alla dimensione dello schermo?

    Grazie!




  2. #2
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Per la spaziatura omogenea in orizzontale, basta usare il float e il margin:auto.
    Pero` la stessa cosa non funziona in verticale (almeno io non conosco un metodo equivalente a quello orizzontale).

    Presumo che tu conosca a priori le dimensioni dei blocchi blu (espresse in px oppure in em)
    Quindi se conosci le dimensioni del contenitore, la cosa e` semplice con i posizionamenti assoluti.
    Se non le conosci, puoi lavorare con JS sul lato client (cioe`, dopo aver completato il caricamento della pagina, fai girare il JS che sposta i blocchi in base alle dimensioni effettivo).

    Tieni presente che ci sono alcuni trucchi per trasformare il problema in uno piu` semplice, tipo incorniciare lo spazio dei 4 blocchi con uno sfondo, e riportarlo al problema del contenitore di dimensione nota (non sempre e` applicabile, ma vale la pena provarci). Per questi trucchi grafici, puoi cercare o chiedere nel forum di grafica.

  3. #3
    Utente di HTML.it
    Registrato dal
    Sep 2004
    Messaggi
    366
    Le dimensioni dei blochi blu le posso definire io come voglio.
    Ma se le posiziono con absolute, devo dargli il numero di pixel di posizione rispetto all'angolo in alto adestra (se non ricordo male), e non sapendo la dimensione dello schermo, sarà poi difficile definire una posizione ottimale.

    L'intenzione è quella di avere una visualizzazione coerente e ottimale sia per i tablet da 7" sia per i monitor di computer da 30".

    L'ideale sarebbe anche variare la dimensione dei blocchi blu, ma credo che li sia un po' difficile (in realtà forse basta definire fisso un container che li includa e definire le dimensioni in base a quel container. Ma che dimensioni assegno al container?! Quelle non possono essere variabili).

    A meno che usare diversi fogli di stile e in base alla dimensione dello schermo, usare un foglio di stile piuttosto che un altro. Dividendo le possibili dimensioni dello schermo in 2-3 gruppi.

  4. #4
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Usare fogli di stile in base alla dimensione in px e` una cosa possibile (ci sono diverse discussioni sull'argomento in questo forum).
    Pero` forse ti basta usare dimensioni in %. Ma questo lo devi decidere in base a cosa va inserito nei blocchi blu.

    Faccio un'ipotesi:
    codice:
    HTML:
    <body>
      <div id="contenit">
        <div id="Blocco1"> <p>Div 1</p></div>
        <div id="Blocco2"> <p>Div 2</p></div>
        <div id="Blocco3"> <p>Div 3</p></div>
        <div id="Blocco4"> <p>Div 4</p></div>
      </div>
    </body>
    
    
    CSS:
    html, body {
      height: 100%;   /* queste due sono essenziali */
      width: 100%;
      overflow: hidden;   /* o vedi tu che valore dare - conviene in questo caso definire l'overflow */
    }
    
    #contenit {
      height: 100%;   /* queste due sono essenziali */
      width: 100%;
      position: absolute;   /* o anche relative */
      overflow: hidden;
      background: pink;    /* questo e` per le prove */
    }
    #contenit div {
      position: absolute;
      width: 30%;   /* supponendoli grandi uguali */
      height: 30%;
      background: blue;
    }
    
    #Blocco1 {
      left: 13%;    /* un terzo dello spazio libero dai blocchi */ 
      top: 13%;
    }
    #Blocco2 {
      left: 66%;
      top: 13%;
    }
    #Blocco3 {
      left: 13%;
      top: 66%;
    }
    #Blocco4 {
      left: 66%;
      top: 66%;
    }
    Naturalmente ho messo le dimensioni e posizioni piu` o meno a caso, per cui vedi tu se la cosa puo` andare
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  5. #5
    Utente di HTML.it
    Registrato dal
    Sep 2004
    Messaggi
    366
    Ok, è perfetto!
    Non sapevo che le posizioni (top, left) potessero prendere valori percentuali. Pensavo solo px.

    Ritorno a studiarmi bene i css, sono agli inizi.

    Grazie!

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