[SP 2.0/vb] Master page con layout 2 colonne

martedì 16 dicembre 2008 - 09.11

Devil Profilo | Junior Member

Ciao a tutti,
sto provando da un pò a realizzare, per la mia applicazione web, una master page dalla struttura semplice:

-una riga per l'intestazione con logo e testo
-una colonna di sinistra contenente il menu
-la colonna di destra per i contenuti
-una riga a piè di pagina per il footer

Vorrei inoltre fare in modo che
- la pagina si adatti automaticamente alle varie risoluzioni dello schermo
- il footer si posizioni sempre nella parte bassa della finestra del browser indipendentemente dalla quantità dei contenuti o del menù.

Sapreste indicarmi un esempio di struttura e il relativo css?

Grazie ciao

freeteo Profilo | Guru

Ciao,
il modo più semplice è usare nella masterpage una table:
<style> #main { width:100%; height:100%; border-collapse: collapse; } td { border:solid silver 1pt; } #sinistra { width:100pt; height:100%; } #destra { } #testa { background:#f0f0f0; height:60pt; } #piede { background:#f0f0f0; height:20pt; } </style> .... <table id="main"> <tr> <td id="testa" colspan="2"></td> </tr> <tr> <td id="sinistra"></td> <td id="destra"></td> <tr/> <tr> <td id="piede" colspan="2"></td> </tr> </table> ...
* lo stile è indicativo per farti capire il risultato, tu sistemalo come ti serve.
Tipicamente nel "td" di sinistra metti il menù e in quello di destra metti un "ContentPlaceHolder" in modo che lo usi come tue pagine effettive via via

se volessimo fare le cose perfette dovremmo non usare le "table" ossia in stile "table-less", ma come dico io meglio pensare a "table-less I can" ossia "il meno che posso" perchè alla fine è inutile complicarsi la vita per cercare di fare tutto senza, a volte usarne una ogni tanto, ti semplifica il lavoro.

Ciao.

Matteo Raumer
[MVP Visual C#]
http://blogs.dotnethell.it/freeteo

Devil Profilo | Junior Member

ciao..

Tralasciando il table-less, che ho tentato ma con scarsi risultati, ho provato un esempio che usava sia div che table e effettivamente il footer stava in basso ma non riuscivo a sistemare correttamente le varie parti della pagina.

Come mi hai consigliato ho un buon risultato però non riesco a far stare sempre in basso il footer!

In progettazione di VWD sembra corretta ma se lo lancio in IE il footer è attaccato sopra:


1280x1024 97Kb


Consigli?

freeteo Profilo | Guru

Strano, ma che css hai usato?
perhcè il fatto che stia sempre in basso, è dato dal "height:100%;" della td "sinistra" come puoi notare dal mio css.

L'ho provato su tutti i browser e funziona...verifica se non ci sia qualcos'altro che vada sopra come stile a quanto impostato li.

Ciao.

Matteo Raumer
[MVP Visual C#]
http://blogs.dotnethell.it/freeteo

Devil Profilo | Junior Member

Questo è il css

#main { width:100%; height:100%; border-collapse: collapse; }
td { border:solid silver 1pt; }
#sinistra { width:100pt; height:100%; }
#destra { }
#testa { background:#f0f0f0; height:60pt; }
#piede { background:#f0f0f0; height:20pt; }

questo è il codice

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

il risultato l'hai visto sopra.

Che siano le sottotabelle che metto dentro le celle per gestire i label e i button a creare confusione?
cosa ne pensi?

freeteo Profilo | Guru

Ciao,
il problema è la riga "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional...." che sporca lo stile, sembra che vada a comprimere lo spazio utile della pagina, così da annullare l'effettivo riempimento totale (height:100%) dello stile.

Strano, sinceramente non ne capisco il motivo, ma facendo qualche prova è risultato essere li, il problema, e quindi ti basta toglierla.

ps: il fatto di mettere il "td" nello stile con il bordo, quando usi un menù di asp.net, ti mette i bordi anche per le td generate dal controllo.
Ti consiglio di toglierlo, io l'avevo messo per farti vedere i bordi, a titolo d'esempio.

Ciao.

Matteo Raumer
[MVP Visual C#]
http://blogs.dotnethell.it/freeteo

Devil Profilo | Junior Member

PERFETTO!!

..era proprio lì il problema...e mi sa che anche nelle altre mie prove mi fregava proprio quella riga.

grazie per il tempo dedicatomi

ciao e alla prossima
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 !
Copyright © dotNetHell.it 2002-2024
Running on Windows Server 2008 R2 Standard, SQL Server 2012 & ASP.NET 3.5