giovedì 21 gennaio 2010

Tag Form dimensionabile...

Tristemente mi sono accorto di qualche nuovo limite ... alla facciazza di Yoda "tentare no fare e riuscire si"... caro Yoda
tentare ha il suo bel perchè CREDIMI.

Nella maggior parte dei casi quando si realizza un sito, è buona norma studiare il layout su una pagina di test, per vedere
se va. Se non lo fate, credetemi è giunto il momento di farlo...

Seguite questo banale esempio

a)create una pagina html semplice semplic che abbia un lay out simle al seguente



Per fare cio vi servono

questi stili
.main {width:100%; height:100%;background:white;}
rappresenta tutta l'area

.header{width:100%;height:100px ;background:red;}
rappresenta la zona rossa

.left {width:200px; height:100%;background:yellow;float:Left;}
rappresenta la zona gialla

.right{height:100%; background:green;}
rappresenta la zona verde


html
head
style quanto sopra /style
/head
body
div class="main"
div class="header" /div
div class="left" /div
div class="right" /div
/div
/body
/html

E puf .. ecco che abbiamo la nostra pagina... fatta e perfetta.

b) Ora torniamo sulla pagina di visual studio...

E nella migliore delle ipotesi otteniamo questo ... Tutto condensato in malo modo...

Da che cosa dipende ?? nella maggior parte dei casi i limiti sono imposti dal validatore, che implica delle costrizioni
a livello di interpretazione. Ossia i brws quando incappano in una pagina con validatore applicano delle regole precise
statiche a come dovrà essere interpretato il file. Quindi chiusure di tag stili e tanto tanto altro.

MA ... non è il nostro caso...

il nostro nemico è il Tag Form.. che tutti snobbiamo ... perchè apparentemente sappiamo che è un qualcosa di
emblematicamente inesitente, ma non è così. Anzi occupa spazio ed è pericolosamente invasivo.

provate ad aggiungere alla vostra paginetta di test il succccitato tag..


html
head
style quanto sopra /style
/head
body
form
div class="main"
div class="header" /div
div class="left" /div
div class="right" /div
/div
/form
/body
/html


e otterrete l'immagine sopra (quella schiacciata... )
Per visual studio (vb/c#) la soluzione è molto semplice.. ma "rischiosa" se come nella maggior parte dei casi il
form E' TUTTA LA PAGINA, allora vi troverete bene, se non benissimo a compiere il breve gesto di
aggiungre

form{width:100%; height:100%;}

al vostro foglio di stile.... e se avete risolto... bhe fatevi i complimenti perchè avete scoperto qualcosa di nuovo.

( ma come czz si fa a indentare il codice in sto chiodo di blog??? ) saluti !!

Nessun commento: