Newsgroup: it.comp.www.html
Titolo: Css: impaginazione scombinata...

Ciao,
sto tentando di sostituire gli skin table che ho su un sito DNN con degli 
skin Div. Con i Div, manipolando lo kkin.css, Riesco ad impaginare 
correttamente ma se riduco le dimensioni della pagina i blocchi allioneati 
orizzontalmente si sfalsano in verticale provocando un effetto orrendo. Con 
le table tutto rimane allineato. Ma e' normale??
grazie 
--
Newsgroup robomoderato - gli articoli vengono approvati automaticamente

 effetto orrendo. Con le table tutto rimane allineato. Ma e' normale??
Si`, e` normale, anche se puoi attenuare in diversi modi l'effetto. E` 
anche voluto, in certi casi, per esempio per mostrare le stesse 
informazioni su device con display ridotto (palmari, cellulari) senza 
costringerli allo scroll orizzontale.
Con le table si possono fare cose che i css non permetto, e coi css si 
possono fare cose che le table non permettono.
Non puoi semplicemente "convertire" un layout in un altro, devi ripensarlo.
Bye.


 Ma e' normale??
Dipende dal foglio di stile.


 possono fare cose che le table non permettono. 
Non è completamente vero.
Diversi browsers recenti supportano finalmente display: table
Ciao  Manlio


 --
Ok, ma quali correzioni normalmente si fanno nel foglio di stile per poter 
mantenere l'allineamento verticale dei panels ? 



Eh, il fatto e' che il layout e' proprio *nato* per i css pero' l'effetto 
scroll e' presente. Che tu sappia quali interventi si fanno x mantenere 
l'allineamento orizzontale dei panels?
grazie 


 mantenere l'allineamento orizzontale dei panels?
Per esempio mettendo la width in percentuale invece che a un valore fisso, 
ma entri nel campo dei layout fluidi (ma lo fai anche con le tabelle), 
oppure puoi mettere il tutto dentro un contenitore di larghezza fissa ed 
eventualmente impostargli un overflow: auto in modo che appaia lo scroller 
orizzontale (e` equivlente a dare un width alla <table>, per esempio).
Bye.


 --
Grazie


 contenitore di larghezza fissa? mi fai, x favore, un'esempio di codice?
<div id="container">
 <div id="b1">...</div>
 <div id="b2">...</div>
</div>
#container {
 width: 950px;
}
#b1 {
 width: 350px;
 float: left;
}
#b2 {
 width: 600px;
 float:left; /* o right */
}
Bye.


 --
Grazie Alessandro, ho provato ma non va bene perche' con il contenitore a 
larghezza fissa non mi visualizza bene nelle risoluzioni piu' elevate : 1400 
ecc..
Ho riprovato con i Div e css ma non capisco questa situazione:
file ascx:
<div id="headerwrapper">
                                <div id="BannerPaneLeft"   align="left" 
runat="server" class="banner"></div>
		<div id="BannerPane"         align="right" runat="server" 
class="banner1"></div>
		<div id="BannerPane1"       align="right" runat="server" 
class="banner2"></div>
                               <div id="BannerPaneRight" align="right" 
runat="server" class="banner3"></div>
		<div class="clearboth">&nbsp;</div>
	</div>
--------------------------------
file css:
#headerwrapper width:100%; height:auto; background:#EFEFEF; }
.banner{ width:10%; float:left; padding:10px; }
.banner1{ width:20%; float:left; padding:10px; }
.banner2{ width:20%; float:left; padding:10px; }
.banner3{ width:15%; float:right; padding:10px; }
in pratica se sommi le percentuali dei vari .banner si arriva a 65% e non 
100%, se aumento, ad esempio, il primo ( .banner ) a width:11% , l'ultimo 
( .banner3 ) mi *scivola* in basso sotto gli altri ( sempre posizionato a 
destra ) nelle risoluzioni 1024 e 800.
Ma se stabilisco le percentuali di occupazione non dovrebbero essere 
rispettate in ogni risoluzione?  cos'e' che fa *scivolare* il panel, il 
contenuto?
Grazie 


 risoluzione?  cos'e' che fa *scivolare* il panel, il contenuto?
Il padding va a sommarsi (doppio, perche` e` sia a destra che a sinistra) 
al width, quindi banner sara`largo il 10% del suo contenitore piu` 20 
pixel, banner1 sara` il 20% del suo contenitore + 20 pixel, ecc.
In pratica qui hai 80 pixel orizzontali occupati solo dai padding, a cui 
devi aggiungere il 65% del contenitore. Se il contenitore e` largo 1000 
pixel, avrai 650+80 = 730 pixel. Se il contenitore e` largo 200 avrai 130
+80 = 210, che e` piu` largo del contenitore, quindi l'ultimo elemento va 
a capo.
Quello che stai cercando e` un layout fluido, a quanto vedo.
Togli i padding ai vari padding e arriva a un po' meno del 100% come 
larghezza (altrimenti con gli arrotondamenti rischi di sforare).
Se ti serve il padding dovrai impostarlo in un altro elemento contenuto 
nei vari .bannerx
Ah, align, se non sbaglio, e` deprecata. Usa i css: text-align:right
Bye.
