• R
    User •

    Layout a 3 colonne con height:100%

    Salve a tutti anzitutto, sono un nuovo iscritto 🙂

    Vado subito al problema, ho scaricato questo layout html.it/articoli/esempi/articoli_pro/tuttofloat/tuttofloat.html - che ha l'impaginazione che mi interessa, cioè con lo sfondo di entrambe le sidebar che si estende con l'allungarsi del corpo centrale
    Aprendolo però, ho notato che i vari div non hanno un loro backround, bensì lo sfondo è un'unica immagine impostata sul #container

    a me servirebbe invece che i div laterali abbiano un loro sfondo indipendente e che ovviamente si estenda per la lunghezza del corpo centrale.
    Ecco il codice

    html:[HTML]
    <div id="container">
    <div id="header"></div>
    <div id="main">
    <div id="content"></div>
    <div id="nav"></div>
    </div>
    <div id="extra"></div>
    <div id="footer"></div>
    </div>[/HTML]

    css:
    [html]html,body{margin:0;padding:0}
    body{font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif;
    background: #FFFFCC;color: #555;text-align:center}
    h1{margin: 0;padding: 30px 0 10px 5px;font-size: 600%;color: #FF744C}
    h2,h3,h4{margin:0;padding-left: 5px;line-height: 30px;color: #333}
    h2{font-size: 160%}
    h3{font-size:130%}
    h4{font-size:120%}
    p{margin: 0 5px;padding: 0 0 0.7em}
    div#container{width:760px;margin: 0 auto;
    background: url(3col.jpg) repeat-y;text-align:left}
    div#header{background: #DBF8B4}
    div#main{float:left;width:540px}
    div#content{float:right;width:400px}
    div#nav{float:left;width:140px;font-size:85%}
    div#extra{float:right;width:220px;font-size:95%}
    div#footer{clear:both;width:100%;padding-top:5px;background: #D0B4F8}[/html]

    Grazie a chiunque mi aiuti 🙂
    Ciao

    0
  • L
    User Attivo •

    Ciao Redmile e benvenuto sul forum,
    la cosa che chiedi è di difficile soluzione e comunque il modo da te linkato è la soluzione più elegante.

    Una soluzione potrebbe essere di impostare la proprietà height per i vari div ma poi ti impone altri limiti.
    Sei sicuro di non riuscire a modificare l'immagine di sfondo del container in modo da ottenere il risultato sperato?

    Per fare esattamente quello che vuoi tu non puoi fare a meno di javascript.

    Ciao
    Valentino

    0
  • R
    User •

    Come temevo, purtroppo. Mi sono informato e più o meno pare che si opti per questa soluzione. Sto cominciando ora l'approccio ai layout css (a proposito, secondo te qualche libro è necessario o va bene il fai da te online?) ed è un pò "traumatico" sinceramente 😄

    Non pensavo però che bisognasse ricorrere a questi trucchi con una cosa che col tabellare è semplicissima. Grazie lo stesso 😉

    0
  • L
    User Attivo •

    Ciao
    secondo la mia modesta opinione la lettura completa di un buon libro ti dà delle basi alle quali non puoi rinunciare. Successivamente può andare bene anche lo studio online (per questo il sito del W3C, come anche i confronti su questo forum, sono ottimi).

    Durante la fase di studio mantieni un occhio di riguardo alla scrittura di codici cross-browser visto che è uno dei problemi più ricorrenti:x.

    Non pensavo però che bisognasse ricorrere a questi trucchi con una cosa che col tabellare è semplicissima.I css possono sembrare limitati, ne capirai la vera valenza imparando a conoscerli.

    Allora.... Buona lettura e Buona Pasqua

    0
  • R
    User •

    Buona Pasqua anche a te e grazie ancora :smile5:

    0
Effettua l'accesso per rispondere