+ Rispondi alla Discussione
Risultati da 1 a 6 di 6

Layout 3 colonne a larghezza fissa: una a SX, una nel mezzo e una a DX

Ultimo Messaggio di axxe16 il:
  1. #1
    User
    Data Registrazione
    Nov 2007
    Località
    web/htdocs
    Messaggi
    36

    Layout 3 colonne a larghezza fissa: una a SX, una nel mezzo e una a DX

    Ciao a tutti, vorrei realizzare una pagina con 3 colonne a larghezza fissa

    colonna 1 = 200px allineata a SX
    colonna 2 = 400px centrata in mezzo allo schermo
    colonna 3 = 200px allineata a DX

    sono riuscito ad ottenere il risultato con il posizionamento assoluto, ma se visualizzo la pagina con una risoluzione bassa le 3 colonne si sovrappongono.

    ho trovato vari esempi in alcuni siti web, ma non sono riuscito a risolvere il problema, potete aiutarmi?
    ciao

  2. #2
    User L'avatar di axxe16
    Data Registrazione
    Jun 2006
    Località
    Padova
    Messaggi
    216
    Segui axxe16 su Twitter Aggiungi axxe16 su Google+ Aggiungi axxe16 su Facebook Aggiungi axxe16 su Linkedin Visita il canale Youtube di axxe16
    il posizionamento assoluto è un modo ma forse in questo caso è meglio usare il float.
    fai le tre colonne con tre id più un contenitore che da la dimensione al tutto e lo centra:
    Codice:
    #colonnaSx {float:left; width:200px;}
    #colonnaDx {float:right; width:200px;}
    #colonnaCentrale { margin-left:200px; margin-right:200px;}
    #container {width:800px; margin:auto;}
    L'ordine con cui inserire gli elementi nella pagina è importante:
    Codice:
    <div id="container">
    <div id="colonnaSx">loerm Ipsum...</div>
    <div id="colonnaDx">loerm Ipsum...</div>
    <div id="colonnaCentrale">loerm Ipsum...</div>
    </div>

  3. #3
    User
    Data Registrazione
    Nov 2007
    Località
    web/htdocs
    Messaggi
    36
    Citazione Originariamente Scritto da axxe16 Visualizza Messaggio
    il posizionamento assoluto è un modo ma forse in questo caso è meglio usare il float.....
    ciao, ho provato con il codice che mi hai dato ma non viene come vorrei io.
    le 3 colonne sono centrate nel mezzo del display.
    invece io vorrei la colonna sinistra appoggiata a sinistra
    la colonna destra appoggiata a destra
    e la colonna centrale larga tot nel mezzo

    ad essere fluidi vorrei che fossero i 2 spazi bianchi in mezzo alle 3 colonne, in quanto le 3 colonne le vorrei di larghezza fissa.

    io ho trovato esempi a 3 colonne ma le 3 colonne sono sempre adiacenti fra loro, invece io vorrei:

    COLONNA SX--------------COLONNA CENTRALE-------------COLONNA DX

    se il monitor fosse piu piccolo allora vorrei:

    COLONNA SX------COLONNA CENTRALE-----COLONNA DX

    mi spiego male lo so

  4. #4
    User L'avatar di axxe16
    Data Registrazione
    Jun 2006
    Località
    Padova
    Messaggi
    216
    Segui axxe16 su Twitter Aggiungi axxe16 su Google+ Aggiungi axxe16 su Facebook Aggiungi axxe16 su Linkedin Visita il canale Youtube di axxe16
    no no ora ti sei spiegato bene... allora si può fare sia con i float che con il posizionamento assoluto...
    forse è concettualmente più semplce con il posizionamento assoluto...
    allora:
    Codice:
    <div id="container">
    <div id="colonnaSx">loerm Ipsum...</div>
    <div id="colonnaDx">loerm Ipsum...</div>
    <div id="colonnaCentrale">loerm Ipsum...</div>
    </div>
    l'ordine in questo caso non è importante

    Codice:
    #container {min-width:850px; position:relative}
    #colonnaSx {position:absolute; left:0; top:0; width:200px;}
    #colonnaDx {position:absolute; right:0; top:0; width:200px;}
    #colonnaCentrale {width:400px; margin:auto;}
    non l'ho provato ma ad okkio dovrebbe andare. Unico difetto, le colonne si sovraporranno su ie6 che non supporta min-width per risolvere la cosa devi usare un js che simula il comportamento di min-width. Esiste l'ottimo minMax() (un plugin di jQuery che puoi trovare qui: davecardwell.co.uk/javascript/jquery/plugins/jquery-minmax/ )

  5. #5
    User
    Data Registrazione
    Nov 2007
    Località
    web/htdocs
    Messaggi
    36
    è perfetto!!!!!
    grazie 1000!!

  6. #6
    User L'avatar di axxe16
    Data Registrazione
    Jun 2006
    Località
    Padova
    Messaggi
    216
    Segui axxe16 su Twitter Aggiungi axxe16 su Google+ Aggiungi axxe16 su Facebook Aggiungi axxe16 su Linkedin Visita il canale Youtube di axxe16
    prego!

+ Rispondi alla Discussione

^ Permessi di Scrittura

  • Tu non puoi inviare nuove discussioni
  • Tu non puoi inviare risposte
  • Tu non puoi inviare allegati
  • Tu non puoi modificare i tuoi messaggi
  •  
  • Il codice BB è Attivato
  • Le faccine sono Attivato
  • Il codice [IMG] è Attivato
  • Il codice [VIDEO] è Attivato
  • Il codice HTML è Disattivato
  • Trackbacks Attivato
  • Pingback Attivato
  • Refback Attivato

SEO by vBSEO 3.6.0 PL2 ©2011, Crawlability, Inc.