Visualizzazione dei risultati da 1 a 6 su 6

Discussione: Layout quest

  1. #1

    Layout quest

    Volevo sapere come faccio a ottenere due box affiancati che a seconda del contenuto si allungano e il footer resta sempre attaccato al margine inferiore dei due box.

    il codice è queto e si vede evidentemente qual'è il mio problema

    _______________________

    <html>
    <head>
    <title>prova</title>
    <style type="text/css">
    #header {position: relative; width: 715px; background-color: #ffabcd}
    #boxcentro {position: relative; width:715; background-color: #0000ff}
    #boxsin {position: relative; width: 500px; left: 5px; background-color: #00ff00}
    #boxdex {position: absolute; width: 200px; top: 0px; left: 510px; background-color: #ff0000}
    #footer {position: relative; width: 715px; background-color:#ffabcd}
    </style>
    </head>
    <body>
    <div id="header">
    header
    </div>
    <div id="boxcentro">
    <div id="boxsin">


    BOX DI SINISTRA</p>


    BOX DI SINISTRA</p>


    BOX DI SINISTRA</p>


    BOX DI SINISTRA</p>


    BOX DI SINISTRA</p>


    BOX DI SINISTRA</p>


    BOX DI SINISTRA</p>
    </div>
    <div id="boxdex">


    BOX DESTRA</p>


    BOX DESTRA</p>


    BOX DESTRA</p>


    BOX DESTRA</p>


    BOX DESTRA</p>


    BOX DESTRA</p>


    BOX DESTRA</p>


    BOX DESTRA</p>


    BOX DESTRA</p>


    BOX DESTRA</p>


    BOX DESTRA</p>


    BOX DESTRA</p>


    BOX DESTRA</p>
    </div>
    </div>
    <div id="footer">
    footer
    </div>
    </div>
    </body>
    </html>
    ___________________

    GRAZIE

    ps : non voglio usare tabelle ma solo CSS. TNX

  2. #2
    Ciao spero di esserti di aiuto,
    mi fa piacere pensare che tu non voglia
    creare layout con le solite e vecchie tabelle
    ma voglia sperimentare e capire come
    riuscire ad ottenere lo stesso risultato con
    div e css.

    Io come te preferisco i css e i div, anche se
    ovviamente il lavoro diventa leggermente più
    complesso se non si hanno le idee chiare.

    Per posizionare due o più box affiancati io utilizzo
    il comando float, mi permette di creare layout fluidi,
    adattandosi così ad ogni risoluzione.

    Per farti un esempio pratico di ciò che dico però ti
    devo rimandare ad una pagina di esempio, dove invece
    che due colonne ve ne sono 3, ma il discorso è analogo.

    La pagina in questione è generata da un'applicazione che
    ho fatto, che non è un csm, ma un online layout design,
    ovvero ti permette di editare al volo il layout della tua
    pagina tramite i css.

    Con il tasto dx si attiva un menù che ti permette di vedere
    lo stile di ogni singolo blocco.

    Spero che questo possa esserti di aiuto, e se mi dai una tua
    opinione sulla mia applicazione ti sarei molto grato.

    http://demo.iport.it/demo.html


    Ciao Nicola

  3. #3
    Se possono esserti utili questi piccoli esempi...

    - www.re1.it/pierofix

    alla voce layout.


  4. #4
    Grazie per l'aiuto

  5. #5
    Hai per caso visto i miei esempi? Ti risultano comprensibili?

    Scusa se ti chiedo ma mi interessa capire se possono tornare utili a qualcuno...


  6. #6
    Ho visto il layout liquido a tre colonne, è sicuramente utile come esempio, è comprensibile, ma richiede una lettura del codice almeno un paio di volte per capire come hai impostato il layout ("almeno a me"), dovresti mettere qualche commentoe usare di più i colori di sfondo ... anche se la pagina risultasse meno gradevole l'uso dei colori la renderebbe sicuramente più comprensibile ...

    Naturalmente dipende tutto da a chi vuoi che sia utile...
    e a che livello
    da amatoriale a webmaster ...

    Ciao ...

    P.S: ..... Il mio obiettivo, oggi, è farvi cambiare browser. Ve lo dico subito, così per mettere le cose in chiaro. ......

    Buona fortuna

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.