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

    height:100% sborda fuori dalla pagina: soluzioni?

    Dunque sto facendo diverse prove su un layout float di base, in quanto mi sto avvicinando al layouting 100% tablefree (così posso tirarmela con amici e colleghi :P) ma zoppico su una questione credo abbastanza basilare. Prima di tutto ecco qui il mio codicillo:

    codice:
    //STILE
    
    * {
    padding:0;
    margin:0;
    }
    
    html {height:100%;}
    body {height:100%;}
    div#Container {height:100%;}
    div#Header {height:140px;}
    div#Body {height:100%;}
    div#Footer {height:60px;}
    
    //HTML
    
    <body>
    <div id="Container">
    	<div id="Header">
    		<h1>Header</h1>
    	</div>
    	<div id="Body">
    		Loren Ipsum
    	</div>
    	<div id="Footer">
    		<h3>Footer</h3>
    	</div>
    </div>
    </body>
    Il problema consiste nel fatto che il div "Body" è si al 100% della pagina, ma non mi tiene conto delle dimensioni di header e footer, quindi la dimensione totale è di 100% della schermata + altezza header + altezza footer.

    Quello che vorrei ottenere è quello che nei tempi passati si otteneva con

    codice:
    <body>
    <table height=100%>
     <tr>
      <td height=140></td>
     </tr>
     <tr>
      <td height=100%></td>
     </tr>
     <tr>
      <td height=60></td>
     </tr>
    </table>
    </body>
    il codice l'ho buttato giù alla veloce ma di sicuro capirete il concetto

    inoltre sono alla ricerca di qualche buon articolo di referenza per rendere il mio codice CSS cross-browser, e per ora non ho trovato nulla di valido: consigli?

  2. #2
    le misure in % si riferiscono al contenitore
    sviluppa per Firefox e poi modifichi (hack e trucchetti vari) per gli altri browsers

  3. #3
    Per gli hack:
    http://css-discuss.incutio.com/?page=CssHack

    Leggi anche i link che trovi nel 3d "Articoli interessanti dal Web" nel forum HTML, a cui io modestamente collaboro. Se ti serve qualche link speciale, mandami un pvt ke faccio una ricerca. Ciao !!!

  4. #4
    Firefox interpreta il codice CSS in maniera più rigorosa e completa, mentre IE6 secondo me non ha le idee molto chiare.
    Se puoi prova anche le ultime release di Opera e ti accorgerai della differenza. Cia0o0o0o0o0o0....................

    :maLOL:

  5. #5
    Ho trovato un modo un po' particolare ma molto efficace per risolvere la questione del 100%, che utilizza header e footer fissi su un livello superiore con su un livello inferiore il contenuto "allontanato" dal bordo tramite due div vuoti della dimensioni dell'header e del footer. Qualcuno ci ha già scritto un articolo in italiano? io ho dovuto impazzire un bel po' per cercare la soluzione, se non è un doppione posso scrivere giù qualcosa

    grazie per i link cmq

  6. #6
    è improbabile che sia una tecnica rivoluzionaria... posta un link e ti daremo i nostri pareri... probabilmente esiste una soluzione + semplice... ma non è detto!

  7. #7
    Il mio problema consisteva che, impostando come 100% l'altezza di un div, non mi teneva conto delle dimensioni (fisse e impostate in pixel) di header e footer.
    Come da specifiche infatti si adattava al 100% del contenitore, quindi la pagina, al quale si AGGIUNGEVANO le altezza di header e footer, come ad esempio succede in questo esempio.

    Invece è possibile ottenere lo stesso risultato visivo del 100% d'altezza strutturando la pagina in questo modo:



    Sul livello superiore header e footer sono appoggiati l'uno al bordo sopra e l'altro sul bordo sotto; nel livello inferiore il div contenente il corpo della pagina è incastrato in mezzo a due div vuoti delle dimensioni di header e footer, che impediscono che finisca sotto ad header e footer reali

  8. #8
    ahhhhh ok devo ammettere che non avevo capito il tuo problema nè la tua soluzione fino ad adesso...
    propongo una soluzione alternativa che devo ancora testare ma mi sembra che funzioni: metti tutti e 3 i div dentro ad un altro e dai a quello 100% (adesso quindi occupa 100% della pagina) poi dai anche al corpo 100%...
    che dici? funziona?

  9. #9
    non credo, è una strada che ho provato subito anche io (è quella che viene istintiva uscendo dall'impostazione a tabelle)ma si ripropone lo stesso problema di "sbordatura pagina" in quanto sono costretto ad aasegnare 100% di altezza al div "incriminato", al suo contenitore, al body e perfino all'HTML (grazie all'amatissimo IE6). In questo modo il 100% letto rimane sempre quello dell'HTML...

    quello che proponi tu è, se non ho capito male, questo

    codice:
    html {height:100%;}
    body {height:100%;}
    div#Container {height:100%;}
    div#Header {height:140px;}
    div#Body {height:100%;}
    div#Footer {height:60px;}
    Funziona giusto se imposto diciamo header 20%, body 70% e footer 10% ma non posso permettere che header e footer siano a dimensioni variabili

    Vale la pena farne un articolo più approfondito? Fra l'altro ho notato che riesco a integrarlo perfettamente con la tecnica delle "false colonne"

  10. #10
    Aspetta un 3/4 giorni... se nessuno ti dice cose tipo: ah sì l'ho già visto là... scrivi un articolo

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 © 2024 vBulletin Solutions, Inc. All rights reserved.