Newsgroup: it.lavoro.professioni.webmaster
Titolo: Artisti del CSS...layout pagina...rompicapo!

Ciao a tutti.
Avrei bisogno di un aiuto.
Dato questo layout ...
http://www.ghereh.org/test/test_tabella.htm
...è possibile realizzarlo mediante CSS e senza uso di tabelle?
Caratteristiche:
a) la colonna verde deve avere una larghezza fissa ed essere sempre centrata rispetto alla pagina
b) le colonne gialle sono simmetriche e la loro larghezza è elastica.
...ho iniziato a buttare giu' una pagina di prova con relativo CSS ma non ho ottenuto il risultato voluto (il problema sono le 
colonne gialli).
http://www.ghereh.org/test/test_css.htm
questo è la bozza css:
body {
 margin-top: 0;
 margin-right: 0;
 margin-left: 0;
 margin-bottom: 0;
 text-align: center;
}
div#top {
 width: 100%;
 height: 200px;
 background-color: #A52A2A;
}
div#left {
 height: 1200px;
 background-color: Yellow;
 float: left;
 width: auto;
}
div#center {
 width: 450px;
 height: 1200px;
 background-color: #32CD32;
}
div#right {
 height: 1200px;
 background-color: Yellow;
 float: right;
 width: auto;
}
Grazie dell'attenzione.
saluti
StiO 

guarda a questa pagina.
c'è proprio quello che cerchi.
http://www.html.it/layout_css/layout_css_08.htm
se non ti basta puoi leggere la guida intera a questa pagina
http://www.html.it/layout_css/
per quanto riguarda la grafica e la bellezza del tuo layout puoi cercare 
l'ispirazione tra le centinaia di bellissime realizzazioni a questa 
pagina 
http://www.csszengarden.com/tr/italiano/
a me per esempio piace tantissimo il layout di questa pagina
http://www.csszengarden.com/tr/italiano/?cssfile=/166/166.css&page=1
buon lavoro!!
ciao
Ruiz

 
http://www.csszengarden.com/tr/italiano/?cssfile=/166/166.css&page=1
effettivamente i css sono molto potenti :-))
ciao
StiO

 a larghezza fissa e di quelle esterne fluide...e non viceversa.
io ho capito il tuo problema.
ti ho anche indicato la pagina della guida.
a te non resta da far altro che adattarla ai tuoi interessi.
devi considerare il layout come 3 colonne.
se con quel codice puoi rendere elastica la colonna centrale puoi 
adattartelo e rendere elastiche quelle laterali.
mi sembra abbastanza elementare.
se poi non ci riesci puoi prenderne uno da csszengarden.
:-))

 Ruiz
Sarò io miope, ma non riesco a trovare la pagina con l'elenco dei layout 
  dalla quale hai scelto il tuo preferito!!!

   dalla quale hai scelto il tuo preferito!!!
guarda qui:
http://www.mezzoblue.com/zengarden/alldesigns/
-- 
questo articolo e` stato inviato via web dal servizio gratuito 
http://www.newsland.it/news
 segnala gli abusi ad 
ab...@newsland.it

   dalla quale hai scelto il tuo preferito!!!
guarda qui:


 mi sembra abbastanza elementare.
caro Ale,
Ho provato ma proprio non ci riesco.
Ho provato a rendere elastiche le colonne laterali ma la terza colonna va comunque a capo e la prima non si adatta rispetto alla 
centrale fissa;visto che però consideri la cosa "abbastanza elementare" sarei davvero curioso se tu mi illuminassi in merito.
grazie
StiO

Caro StiO
se non ci riesci devi riprovare.
e riprovare.
e provare ancora.
quando ti ho risposto al primo messaggio,avevo intenzione di darti una 
mano.e ti ho indicato dove poter trovare aiuto e informazioni.per 
imparare,non postarti il codice gia adattato alle tue esigenze.
non voglio rispondere alla tua provocazione,anche perchè non devo 
dimostrare niente a nessuno.
piuttosto chi si rivolge ad altri per chiedere aiuto dovrebbe essere piu 
umile.
cmq avrai sbagliato qualcosa nel codice.
postalo e vediamo se si può correggere.

 postalo e vediamo se si può correggere.
La meta è questa 
http://www.ghereh.org/test/test_tabella.htm
Io per ora sono arrivato qui:
CSS: "test.css"
BODY {
 MARGIN: 0px;
 TEXT-ALIGN: center
}
DIV#top {
 WIDTH: 100%;
 HEIGHT: 200px;
 BACKGROUND-COLOR: #a52a2a
}
DIV#left {
 float: left;
 width: 30em;
 HEIGHT: 1200px;
 BACKGROUND-COLOR: yellow;
}
DIV#center {
 HEIGHT: 1200px;
 BACKGROUND-COLOR: #32cd32;
 width: 450px;
}
DIV#right {
 float: right;
 width: 30em;
 HEIGHT: 1200px;
 BACKGROUND-COLOR: yellow
 HEIGHT: 1200px;
 BACKGROUND-COLOR: yellow;
}
Questo l'HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd
">
<HTML><HEAD><TITLE>Untitled Document</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<LINK href="Untitled Document_file/test.css" type=text/css rel=stylesheet>
</HEAD>
<BODY>
<DIV id=top>TOP</DIV>
<DIV id=left>ELASTICA SIMMETRICA</DIV>
<DIV id=center>CENTRATA FISSA 450px </DIV>
<DIV id=right>ELASTICA SIMMETRICA</DIV></BODY>
</HTML>
saluti
StiO

Forse si può scendere a compromessi :)
Hai la grafica completa di come dovrebbe essere alla fine?
Irene

 
[CUT]
Ecco la soluzione: 
http://www.kishnel.com/test.html
-- 
Symbel
Se non si rischiasse mai nella vita, Michelangelo avrebbe dipinto il
pavimento della cappella Sistina.
http://www.symbel.it
 [website]
http://www.spifferi.it
 [blog]


BINGO!!
grazie Symbel.
Hai fatto un ottimo lavoro, davvero, immaginavo fosse complesso
ma non fino a questo punto;
Grazie al tuo contributo, provabilmente riuscirò a fare un bel sito "table free".
Ciao e complimenti per il tuo blog.
StiO

 Irene
Grazie Irene ma Symbel ha risolto il rompicapo...non appena avrò
terminato il sito posterò il link così capirete il perchè di questo  "sbattone!".
ciao
StiO

 Grazie al tuo contributo, provabilmente riuscirò a fare un bel sito "table free".
Se esistesse solo il browser Mozilla Firefox o Internet Explorer seguisse i
dettami del W3C i bei siti "table free" sarebbero molto più diffusi e il
codice sarebbe meno complesso.
Buon lavoro :-)
-- 
Symbel
Un uomo sulla Luna non sarà mai interessante quanto una donna sotto al
Sole.


 che ti chieda di mostrarmi la via misteriosa.
non era nelle mie intenzioni farti sentire demente.volevo semplicemente 
farti notare che ci potevi arrivare benissimo da te solo leggendo 
qualche tutorial.
ho visto che symbel è stato piu veloce a postare la soluzione che 
cercavi,quindi mi sembra inopportuno fornirti il css che ti avevo preparato.
se posso darti un piccolo consiglio,invece degli "id" usa "class"
in questo modo puoi riutilizzare il codice.
buon lavoro.
una curiosità.che tipo di sito stai mettendo su?
aspetto il link !

 aspetto il link !
Un sito che cerca di integrare diversi linguaggi come HTML, FLASH, PHP,
 in maniera armonica e accessibile (senza fare piu' versioni di sito).
Ci vorrà un po', ma appena pronto vi posterò sicuramente l'indirizzo.
ciao
StiO 


Uhm, perplesso, ho l'impressione che ci sia qualche incongruenza, ma mi 
riservo, magari ho inteso male cosa intendi per INTEGRARE.
Cooper.
-- 
BlueWare WebStudio
 [web:] 
http://www.blueware.it
 [msn:] 
coo...@blueware.it
 [icq:] 146781935 

 Cooper.
secondo me intende dire che sta mettendo su un sito dinamico.



Con flash generato lato server da PHP?
'bye


Il fatto che abbia detto PHP lo lascia pensare anche a me, ma il fatto che 
abbia detto di integrare... PHP, HTML (ovvio) e FLASH...
Cmq si, sono d'accordo con te.


 abbia detto di integrare... PHP, HTML (ovvio) e FLASH...
php + flash è possibile.
non so fino a che punto.però ho letto qualcosa sul sito di sephiroth.
http://www.sephiroth.it/swfreader.php

 secondo me intende dire che sta mettendo su un sito dinamico.
Appunto, nulla di speciale, finora abbiamo creato siti Flash con
parti dinamiche (PHP+MySql)...ora vogliamo creare qualcosa
di piu' trasparente e accessibile,tutto qui.