dotNetHell.it - Forum - Tradurre layout con <table> usando solo <div>

Tradurre layout con usando solo

lunedì 18 agosto 2008 - 13.39

Elenco Threads

Stanze Forum

Aggiungi ai Preferiti

Cerca nel forum

paquito_ita Profilo | Senior Member

224 messaggi | Data Invio: lun 18 ago 2008 - 13:39

Ciao,
devo "tradurre" il layout di un portale che usa <table> utilizzando solo <div>, quindi nel rispetto degli attuali standard CSS.
Il codice sottostante si riferisce ad una "masterPage" (stesso codice HTML per ogni pagina) il cui layout consiste in uno o più container (evidenzati in grassetto):
codice:

 Il codice sorgente non è stato renderizzato qui
perchè non c'è sufficiente spazio.
Clicca qui per visualizzarlo in una nuova finestra

Poi ogni pagina realizza il proprio layout specifico impostando il contenuti dei suddetti contenitori. Di seguito un esempio:
codice:

[#target="menuContainer"/]
[$ToolsMenu()]

[#target="contentContainer"/]
[.Module("PanelMenu", "ToDoMenu")]

[#target="footerContainer"/]
[.Module("View","ToDo")]

La soluzione ideale sarebbe un layout a 3 colonne (una delle quali impostata a width:0, se non serve) in cui sia possibile inserire in ciascun "contenitore" (div) elementi a piacere.
Mi sono affacciato da poco ai CSS e ho iniziato a seguire vari tutorial (anche sul layout a 3 colonne), ma con risultati non soddisfacenti.
Sapreste indicarmi un modo efficace per tradurre il layout con table usando solo div? In particolare (se possibile) facendo in modo che le dimensioni di ciascun box si adatti dinamicamente al contenuto inseritovi.

Grazie in anticipo

dante Profilo | Junior Member

70 messaggi | Data Invio: ven 12 set 2008 - 01:01

Ciao!

Innanzi tutto la tabella e gli stili sono impostati male...

Ti consiglio di studiare i css e l'xhtml(è lo standard. tra un anno o due lo standard sara' l' html5 ma sarà basato sull'xml, da quel che leggo in giro)

Ora la risposta:

il layout a 3 colonne è molto semplice da creare.
Dovresti prima definire come dovrà comportarsi e quindi se dovrà essere fisso, fluido o elastico.
Fisso: non ha bisogno di spiegazioni ;)

Fluido: la pagina viene ridimensionata in base alla risoluzione.

Elastico: è l'unico metodo un pò più "complicato"; le dimensioni variano in base alla dimensione del font del browser, che di norma è 16px.

L' unita' di misura utilizzata si chiama "em". 1em = dimensione font del browser(nel caso sia 16px: 1em=16px, 0.5em=8px e così via).

per quel che riguarda il "nascondere" un div ti basta creare 2 fogli di stile.
il primo a 3 colonne ed il secondo a 2.

spero di averti "indirizzato" in qualche modo

ps: il primo consiglio che ti dò e quello di non testare le tue pagine web solo su un browser ma almeno sui più famosi dato che si comportano in modo diverso( "Lo scoglio" più grosso è ie dato che non aderisce completamente al W3C)

ti auguro un buon lavoro,
Dante

Torna su

Stanze Forum

Elenco Threads

Partecipa anche tu! Registrati!

Hai bisogno di aiuto ?
Perchè non ti registri subito?

Dopo esserti registrato potrai chiedere
aiuto sul nostro Forum oppure aiutare gli altri

Consulta le Stanze disponibili.

Registrati ora !