Salve a tutti, vorrei chiedervi una mano per il posizionamento di 3 div come segue:div.jpg
Come in figura vorrei mettere i due div neri uno sopra l'altro con attaccato ad entrambi il div in rosso. Tutti e 3 i div si trovano all'interno di un contenitore con altra che si trova all'interno di un altro div insieme ad altra "robba".
L'unica soluzione che ho trovato in rete è fare qualche prova con la "position:relative". Avete altre soluzioni o qualche esempio che mi aiuti?
Se puoi evitare il posizionamento ne guadagni in salute e stress ...
Comunque la soluzione e` inserire i due blocchi neri all'interno di un contenitore, e poi a questo e al blocco rosso dai un float (probabilmente left)
Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
No domande tecniche in messaggi privati
Dovresti fare in questo modo, poi aggiungi le distanze se li vuoi separati e aumenti le dimensioni a tuo piacimento
codice:<html> <head> </head> <style> #blocco1{ width: 150px; height: 200px; float: left; } #rosso{ width: 400px; height: 200px; float: left; border: 1px solid red; } .nero{ width: 150px; height: 100px; float: left; border: 1px solid #000; } </style> <body> <div id="blocco1"> <div class="nero"> </div> <div class="nero"> </div> </div> <div id="rosso"> </div> </body> </html>
Grazie mille per l'aiutoOriginariamente inviata da Mich_
Se puoi evitare il posizionamento ne guadagni in salute e stress ...
Comunque la soluzione e` inserire i due blocchi neri all'interno di un contenitore, e poi a questo e al blocco rosso dai un float (probabilmente left)
Ho messo nell'html i div in questo ordine.codice:<div id="box"> <div>rosso</div> <div>nero1</div> <div>nero2</div> <div>
Poi nei CSS il box ha float:left e il rosso float:right e le dimensioni del box sono fatte in modo tale da essere precise per i 3 div.
Cosi funziona a meraviglia
E` anche una soluzione.Grazie mille per l'aiuto
Ho messo nell'html i div in questo ordine.codice:<div id="box"> <div>rosso</div> <div>nero1</div> <div>nero2</div> <div>
Poi nei CSS il box ha float:left e il rosso float:right e le dimensioni del box sono fatte in modo tale da essere precise per i 3 div.
Cosi funziona a meraviglia
Non sempre e` possibile cambiare l'ordine dei blocchi nell'HTML (ci possono essere problemi con i browser non visuali).
Con quell'ordine nell'HTML funziona anche dando float:right a tutti i blocchi - in alcuni casi simili il float:left e` usato per altri scopi (ad esempio per sistemare il contenitore dentro il body, oppure altri blocchi all'interno del blocco rosso).
Questa nota e` per i "posteri" (se qualcuno volesse la stessa cosa e facesse una ricerca nel forum).
Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
No domande tecniche in messaggi privati
Un piccolo consiglio che posso darti è, se usi il "float: left" in una zona del sito, usa sempre quello, eviti strani posizionamenti e incolonnamenti vari.Grazie mille per l'aiuto
Ho messo nell'html i div in questo ordine.codice:<div id="box"> <div>rosso</div> <div>nero1</div> <div>nero2</div> <div>
Poi nei CSS il box ha float:left e il rosso float:right e le dimensioni del box sono fatte in modo tale da essere precise per i 3 div.
Cosi funziona a meraviglia
Per il resto devi scegliere tu come gestire il sito, io ti ho scritto come avrei sviluppato il codice per creare quell'immagine in modo più simile possibile
Thank you guys
Permessi di invio
Rispondi quotando