Newsgroup: it.lavoro.professioni.webmaster
Titolo: [css] layout... stato dell'arte

Ciao,
lo so che è un problema trattato più e più volte. Vorrei però sapere a che
livello di controllo siamo arrivati nella progettazione di un layout basato
su css così costituito:
- Header di larghezza 100%.
- 3 colonne, di cui le due laterali a larghezza fissa e quella centrale
"liquida".
- Footer di larghezza 100%.
- Le colonne laterali possono essere più lunghe di quella centrale senza
sovrapposizioni col footer.
- Se il contenuto delle colonne laterali è più corto del contenuto di quella
centrale, le colonne laterali si estendono ugualmente fino al footer.
Si tratta insomma di un caso molto semplice se trattato con le tabelle.
Se esiste un sistema davvero efficace e non assurdamente complesso da
implementare credo proverò ad utilizzarlo, altrimenti... beh, sono talmente
avvilito che non mi resta che arrendermi alla triste osservazione che i css
avranno la vita dura se non vengono mooooolto migliorati sotto l'aspetto
delle possibilità di impaginazione. Io ci ho provato...
Ciao!
--
Wildchild
Openoffice.org: l'alternativa gratuita (e buona) a MS Office.
http://it.openoffice.org

 su css cosě costituito:
molto semplice con CSS
www.constile.org
ciao

Luca ha scritto:

Ti consiglio di leggere bene i messaggi, prima di rispondere. Nessuno dei
layout di 
constile.org
 č in grado di fare quello che ho chiesto.


 lo so che è un problema trattato più e più volte. Vorrei però sapere a che
Ciao,
allo stato attuale assicurare tutto quello che chiedi con i soli CSS
non è molto fattibile. Per la gestione delle altezze quantomeno, il
resto lo puoi realizzare tranquillamente.
Tranne la gestione dell'uniformità di altezza non ancora implementata,
il layout usato per 
http://www.bazzmann.com
 dovrebbe essere quello che
cerchi tu.
Per il resto ti rimando ad una interessante discussione di gennaio:
http://lists.bazzmann.com/mailman/private/w3c-hack/2003-January/000356.html
(preavviso: è un'area privata, per leggerne i contenuti bisogna
             iscriversi)
Bai!
Marco
-- 
Bazzmann.Com - Accessibilita', usabilita', webdesign e standard W3C
::-----------------------------::---------------------------------::
http://www.bazzmann.it
  | Consulenza, servizi e soluzioni.
http://www.bazzmann.com
 | Notizie, approfondimenti, articoli, guide.

 layout di 
constile.org
 è in grado di fare quello che ho chiesto.
io ti consiglio di guardare bene il sito prima di fare polemiche
ciao

 iscriversi)
Ci fosse magari il link al modulo di registrazione :))
Ciao
CB

 Ci fosse magari il link al modulo di registrazione :))
Eh... hai ragione! :)
Ora stiamo lavorando sul CMS di base (
b.com
 a tutt'oggi è
"manuale") e sulla risoluzione di quei bachi ancora presenti
come quello che segnali tu. :)
Le mailing sono disponibili da qui:
http://www.bazzmann.com/mailing/
La newsletter da qui:
http://www.bazzmann.com/newsletter/
Ciao,


 implementare credo proverò ad utilizzarlo,
la soluzione per il footer e le colonne l'ho trovata utilizzando una
scappatoia in javascript.
non ho testato il tutto con molti browser, ma solo con IE, e Mozilla
su Win.
ben accetto qualche test con altri browser .
da perfezionare... ma ora non ho voglia! :)
--
visuddhi { info at visuddhi dot com } { icq# 44339752 }
if it is to be, it is up to me { 
www.visuddhi.com
 }
absolutely free, VisuBox { 
www.visuddhi.com/visubox
 }

Luca ha scritto:

Io non voglio fare nessuna polemica. Il sito lo conosco molto bene. Se dei
in grado di segnalarmi in particolare il tutorial o l'esempio che risolva i
problemi che ho sollevato sarò ben felice si riguardarmi meglio il sito.



http://lists.bazzmann.com/mailman/private/w3c-hack/2003-January/000356.html
Grazie!


 dei contenuti?
Nel mio caso sarebbe un problema perchè devo gestire un sistema dinamico
basato su un template che deve valere per tutte le pagine, sia quelle piene
di contenuti, sia quelle con poche righe...


Wildchild wrote:
 >
 > Ti riferisci alla colonna centrale che deve essere più alta delle 
laterali?
Dipende dal layout che vuoi creare. Io ad esempio ho voluto delineare le
due colonne da una linea di demarcazione. Per fare in modo che questo
accada in modo elegante, richiede che l'area del contenuto (quindi la
colonna centrale per la prima pagina) sia più alta rispetto alle altre.
Almeno questa è la soluzione che ho trovato un anno fa. Ora ne sto
sperimentando anche altre per il nuovo layout, ma non mi soddisfano
ancora. :)
Parliamo sempre di soli CSS, senza Javascript.
 > Ora provo a darci un'occhiata. Ma avete usato anche degli script per
 > aggirare alcuni dei problemi?
No, nessuno script. Solo markup e CSS.
 > Grazie!
Di nulla! :)


   centrale, le colonne laterali si estendono ugualmente fino al footer.
Trovato chissa' dove sul web, riporto fedelmente:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"
http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd
">
<HTML lang=it xmlns="
http://www.w3.org/1999/xhtml
">
<HEAD>
<TITLE>Layout con i CSS</TITLE>
<META http-equiv=content-type content="text/html; charset=iso-8859-1">
<STYLE type=text/css>
	BODY {
		BACKGROUND: #868686;
		TEXT-ALIGN: center;
		PADDING-RIGHT: 0px;
		PADDING-LEFT: 0px;
		PADDING-BOTTOM: 0px;
		MARGIN: 0px;
		FONT: 80% verdana,helvetica,sans-serif;
		PADDING-TOP: 0px
		}
 
		#testa {
			MARGIN: 1em auto;
			WIDTH: 97%;
			TEXT-ALIGN: left
			}
 
		#corpo {
			MARGIN: -1em auto;
			WIDTH: 97%;
			TEXT-ALIGN: left
			}
 
		#piedipagina {
			MARGIN: 1em auto;
			WIDTH: 97%;
			TEXT-ALIGN: left
			}
 
		#testa {
			BORDER-RIGHT: #000 1px solid;
			PADDING-RIGHT: 0px;
			BORDER-TOP: #000 1px solid;
			PADDING-LEFT: 0px;
			BACKGROUND: #ccc;
			PADDING-BOTTOM: 1em;
			BORDER-LEFT: #000 1px solid;
			PADDING-TOP: 1em;
			BORDER-BOTTOM: 0px solid #000;
			}
 
		#corpo {
			BORDER-RIGHT: #000 1px solid;
			BORDER-TOP: #000 1px solid;
			BACKGROUND: url(sfondo_colonna1.png) #f0f0f0 repeat-y;
			BORDER-LEFT: #000 1px solid;
			BORDER-BOTTOM: #000 1px solid;
			POSITION: relative
			}
 
		#corpo-colonna1 {
			PADDING-RIGHT: 0px;
			PADDING-LEFT: 0px;
			LEFT: 0px;
			PADDING-BOTTOM: 1em;
			WIDTH: 160px;
			PADDING-TOP: 1em;
			POSITION: absolute;
			TOP: 0px
			}
 
		#corpo-colonna2 {
			BORDER-RIGHT: 1px solid #000;
			PADDING-RIGHT: 10px;
			PADDING-LEFT: 10px;
			BACKGROUND: #fff;
			PADDING-BOTTOM: 1em;
			MARGIN: 0px 200px 0px 160px;
			BORDER-LEFT: 1px solid #000;
			PADDING-TOP: 1em
			}
 
		#corpo-colonna3 {
			PADDING-RIGHT: 0px;
			PADDING-LEFT: 0px;
			RIGHT: 0px;
			PADDING-BOTTOM: 1em;
			WIDTH: 200px;
			PADDING-TOP: 1em;
			POSITION: absolute;
			TOP: 0px
			}
 
		#piedipagina {
			BORDER-RIGHT: #000 1px solid;
			PADDING-RIGHT: 0px;
			BORDER-TOP: 0px solid #000;
			PADDING-LEFT: 0px;
			BACKGROUND: #ccc;
			PADDING-BOTTOM: 4px;
			BORDER-LEFT: #000 1px solid;
			PADDING-TOP: 4px;
			BORDER-BOTTOM: #000 1px solid
			}
</STYLE>
</HEAD>
<BODY>
<!-- testa -->
<DIV id=testa>#testa</DIV>
<!-- /testa -->
<!-- corpo -->
<DIV id=corpo>
  <DIV id=corpo-colonna1>#corpo-colonna1</DIV>
  <DIV id=corpo-colonna2>#corpo-colonna2</DIV>
  <DIV id=corpo-colonna3>#corpo-colonna3</DIV>
</DIV>
<!-- /corpo -->
<!-- pie' di pagina -->
<DIV id=piedipagina>#piedipagina</DIV>
<!-- pie' di pagina -->
</BODY>
</HTML>
Credo che risponda alle tue richieste, anche se vado troppo di fretta 
per esserne certo al 100%... Con qualche tweak dovresti trovare quello 
che cerchi.
-- 
 \\
  \\__ Falco Stellare - 
falco.ste...@libero.it
       <<Togli il TAPPO per avere l'indirizzo giusto>>

 Trovato chissa' dove sul web, riporto fedelmente:
[...]
Nix.... anche in questo caso la colonna centrale deve essere + lunga delle
laterali...
