Visualizzazione dei risultati da 1 a 3 su 3
  1. #1

    Layout a tre colonne "dinamiche"

    Ciao,

    devo realizzare un semplice layout a tre colonne usando div. Unica peculiarità è fornire la possibilità di "nascondere" una colonna settando (runtime) la relativa width:0px; (o in un altro modo se me lo suggerite).

    Questo perché devo creare dei "template" per le pagine di un portale ed ogni div verrà usato come contenitore. In taluni casi solo due colonne (anzichè tre) servono, per cui la necessità è quella di potere "nascondere" una delle colonne, ma lasciare cmq alle altre la possibilità di usare lo spazio ad essa dedicato.

    Per esercitarmi ho realizzato un layout a tre colonne usando solo float. Tuttavia quando imposto per la colonna più a destra width:0px; quest asparisce correttamente, ma la colonna centrale e di sinistra (contenute a loro volta in un div id="main con float:left) rimangono fisse alle dimensioni assegnate esplicitamente (giustamente). Tuttavia se per queste colonne imposto width:auto (o non imposto la width affatto) esse si prendono tutto lo spazio della pagina facendo scivolare in basso la terza colonna.

    Come posso ottenere il layout voluto con la funzionalità di poternascondere dinamicamente una colonna?
    Grazie

  2. #2
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Devi esplicitare meglio cosa intendi per "dinamico", che nel linguaggio del Web vuol dire due o tre cose diverse a seconda del contesto.

    Dinamico lato client
    tramite JS (o altro strumento - anche solo CSS, in qualche caso) la colonna viene a cambiare larghezza: la dinamicita` viene decisa dall'utente, mediante la pressione di un bottone o la posizione del mouse

    Dinamico lato server
    e` il server che definisce le larghezze, una volta conosciuto il contenuto dei vari pezzi: in tal caso la dinamicita` e` "a priori", e non necessita di interventi da parte dell'utente / non dipende da come si comporta l'utente

    Altre soluzioni diverse/intermedie
    da definire meglio

    Ma forse nel tuo caso devi solo definire due layout, molto simili tra loro, di cui uno a tre colonne e l'altro a due: in tal caso puoi usare due CSS diversi, oppure definire nomi diversi (id o classi) ai tuoi blocchi principali: esempio:
    codice:
    body {
     ...
    }
    #menu3 {
      width: 30%;
      ...
    }
    #corpo3 {
      width: 50%;
    }
    #margin3 {
      width: 19%;
    }
    #menu2 {
      width: 34%;
      ...
    }
    #corpo2 {
      width: 65%;
    }
    E nelle pagine HTML, in un caso:
    codice:
    <body>
      <div id="menu3">
        ....
      </div>
      <div id="corpo3">
        ....
      </div>
      <div id="margin3">
        ....
      </div>
    </body>
    Nell'atro caso:
    codice:
    <body>
      <div id="menu2">
        ....
      </div>
      <div id="corpo2">
        ....
      </div>
    </body>
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  3. #3
    Ciao,

    intendevo "dinamico" nel senso del Server. Ovvero io vorrei creare un template unico da usare per ogni pagina. Il template avrà tre colonne, ma in alcune pagine solo due colonne saranno necessarie, quindi la terza (per esempio quella più a destra) verrà nascosta.

    Non è quindi richiesto intervento dall'utente. Quello che vorrei io è che quano imposto la terzo colonna con larghezza nulla, le altre colonne automaticamente si allarghino ad occuparne lo spazio.

    Al momento con il layout da me crato(usando solo float) questo non avviene perché ho impostato le colonne ad una dimensione fissa (eg. widht:220px), quindi anche quando la terza colonna ha larghezza nulla, queste non si muovono.
    Il termine dinamico lo intendevo per questo, cioè azzerando la larghezza della terza colonna, adattare il layout continuando ad udare sempre lo stesso template.

    Spero di essere stato più chiaro. Grazie di nuovo

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.