Visualizzazione dei risultati da 1 a 5 su 5
  1. #1
    Utente di HTML.it L'avatar di longline
    Registrato dal
    Sep 2001
    Messaggi
    5,363

    Layout con un menu e due div a scorrimento

    Ciao a tutti, avrei bisogno di una mano per un layout.
    Ho una pagina a cui vorrei dare questa disposizione:

    - in alto un menu orizzontale
    - eventuali altri sottomenu orizzontali
    - il resto della pagina sottostante dovrebbe essere diviso in due DIV

    I div dovrebbero:
    - occupare tutto lo spazio in orizzontale
    - occupare tutto lo spazio in verticale rimanente sotto ai menu
    - avere la barra di scorrimento verticale

    Di seguito due esempi di come vorrei realizzare la cosa:




    I menu li ho già fatti, su quelli non ho problemi. Purtroppo però non ho la minima idea di come realizzare i due DIV sottostanti.

    Potete aiutarmi? Grazie!

  2. #2
    Utente di HTML.it
    Registrato dal
    Jan 2010
    residenza
    Pianeta Terra
    Messaggi
    1,614
    - occupare tutto lo spazio in orizzontale
    puoi fare un contenitore principale con i due contenitori dentro.

    ai due contenitori li dai una percentuale del 49% (considerando un po di spazio tra i contenitori).
    Al div principale li dai sempre una percentuale

    - occupare tutto lo spazio in verticale rimanente sotto ai menu
    codice:
    body>#container_principale{ height: auto; min-height: 100%; margin-top: dipende dal menu;}//se includi il  menu nel contenitore --> senza margin-top
    - avere la barra di scorrimento verticale
    Per renderlo un attimino più simpatico, puoi guardare QUI.

    E' un idea buttato giù in 2 secondi, quindi da correggere.

    Ma +/- dovrebbe andare.

    Per una bella risata vai QUI

  3. #3
    Utente di HTML.it L'avatar di longline
    Registrato dal
    Sep 2001
    Messaggi
    5,363
    I tuoi suggerimenti mi hanno dato idee interessanti su come risolvere. Però non so come affiancare i due div-colonna.
    codice:
    <div id="contenitoreplanner">
      	<div class="colonnaplanner">
      		prima colonna
      	</div>
      	<div class="colonnaplanner">
      		seconda colonna
      	</div>  
    </div>
    codice:
    #contenitoreplanner
      	{
      	width: 100%;
      	background-color: #EEEEEE;
      	max-height: 90%;
      	height: 200px;
      	}
    
    div.colonnaplanner
      	{
      	width: 48%;
      	background-color: #DDDDDD;
      	color: red;
      	}
    Risultato:


  4. #4
    Utente di HTML.it L'avatar di longline
    Registrato dal
    Sep 2001
    Messaggi
    5,363
    Ho risolto mettendo una colonna con Float: right e l'altra con Float: left

  5. #5
    Utente di HTML.it
    Registrato dal
    Jan 2010
    residenza
    Pianeta Terra
    Messaggi
    1,614
    Esatto.

    Infatti, il mio suggerimento era da correggere.

    Poi c'ho pensato dopo che almeno un float lo potevo pure inserire.

    Per una bella risata vai QUI

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.