Newsgroup: it.comp.www.html
Titolo: [CSS] SantaKlauss aiutami tu!

Scusate l'oggetto, ma i consigli con cui ho tentato di costruire la pagina
mi sono stati dati in particolare da SantaKlauss!
Il risultato purtroppo è questo:
http://www.rivistaonline.com/Rivista/PrimoPiano.aspx
mentre iov vorrei che fosse questo:
[head------------------------------]
[titolo------------------------------]
[menu------------------------------]
[sin------][articoli-----][archivio----]
[sinfoot--][footer-------------------]
e footer è quella barra nera che se ne sta in alto?!? Come mai?
Vi posto il CSS:
body {
 background-color: White;
 width: 100%;
 margin: 0px 0px;
}
#head {
 background-color: Red;
 background-image: url(../images/...gif);
 background-repeat: repeat;
 width: 100%;
 height: 20px;
}
#titolo {
 background-color: #42494C;
 background-image: url(../images/....gif);
 background-repeat: no-repeat;
 margin-right: 0px;
 margin-left: 0px;
 width: 100%;
 height: 80px;
}
#menu {
 background-color: Gray;
 background-image: url(../images/....gif);
 background-repeat: repeat;
 width: 100%;
 height: 20px;
}
#sin {
 position: relative;
 background-color: Black;
 float: left;
 width: 153px;
 height: auto;
}
#articoli {
 position: relative;
 background-color: White;
 background-image: url(images/....gif);
 background-position: right;
 background-repeat: no-repeat;
 margin-top: 10px;
 margin-left: 163px;
 margin-right: 210px;
 width: auto;
 height: auto;
 font-family: Tahoma;
 font-size:10px;
}
#archivio {
 position: relative;
 background-color: White;
 margin-top: 10px;
 float: right;
 width: 200px;
 height: auto;
 font-family: Tahoma;
 font-size:10px;
}
#sinfoot {
 position: relative;
 background-color: Red;
 background-image: url(../images/....gif);
 background-position: right;
 background-repeat: no-repeat;
 clear: both;
 float: left;
 margin-right: -3px;
 margin-top: 0px;
 width: 153px;
 height: 30px;
}
#footer {
 position: relative;
 background-color: Black;
 background-image: url(../images/....gif);
 background-position: left;
 background-repeat: no-repeat;
 margin-top: 0px;
 width: auto;
 height: 30px;
 font-family: Tahoma;
 font-size:10px;
 color: Red;
}
GRAZIE!!!

 [sinfoot--][footer-------------------]
[...code cut...]
Bè, anche se la grafica è davvero accattivante (complimenti!)
la pagina non credo che sia tutta lì.
Ci sono un po' di errorini quà e là. Alcune considerazioni:
1) dichiarare position:relative senza coordinate non
    ha effetto, e inoltre con i float può fare pasticci.
2) dichiarazioni tipo  width: auto, width: 100% o height:auto
    sono totalmente ininfluenti e hanno solo la funzione di
    appesantire il css.
3) se usassi gli shorthand background e margin ridurresti
    di quasi la metà il css e sarebbe molto + leggibile.
4) come ho suggerito tempo fa:
    <cite>Inoltre per le pagine di prova, è sempre bene usare un "filler"
     cioè del testo per riempire le sezioni. Tutti usano "Lorem ipsum",
     qui c'è il generatore: 
http://www.lipsum.com/
 .
     A me non piace perchè non conosco il latino, e di soluto uso
     la Divina Commedia:
 
http://www.crs4.it/Letteratura/DivinaCommedia/Inferno/Canto01.html
    </cite>
5) La proprietà "background-position" richiede due valori: nell' ordine
    x-pos e y-pos. Esempio di coppie valide: center top o right
    bottom o center center oppure 0 10px ecc...
Ora posso riporre la penna rossa e passare ai suggerimenti.
Hai spezzato il footer in due parti: sinfoot e footer.
Il "sinfoot" ha il clear impostato, e quindi com'e' giusto che sia, si posiziona
appena sotto il menù. Mentre il footer subisce il float del menù e quindi
si dispone al suo fianco. Questo è il motivo per cui non va.
Ma scusami non era meglio usare un immagine unica di sfondo per il footer?
Il fatto è che "sinfoot" non ha nessun contenuto strutturale, è solo un
abbellimento grafico.
Ciao e buon lavoro,
    SantaKlauss

Partendo dalle ineccepibili considerazioni di babbonatale
c'č una cosa che puoi iniziare a fare:
metti il div #archivio prima del div #articoli.
enjoy it

 Bè, anche se la grafica è davvero accattivante...
Grazie... stiamo facendo un gran lavoro, e se non ci fosse l'università...
Grazie per tutti i consigli... hai anche ragione sul footer... non so perché
non ci avevo pensato... invece per quanto riguarda il resto provo tutto e mi
riservo la possibilità di chiederti ulterirmente consiglio! ;o)
Infine per favore, vorrei chiederti un'altra cosa... non vorrei ovviamente
utilzzare tabelle all'interno del corpo centrale, quindi vorrei creare delle
'class' per fare una cosa del genere:
http://www.rivistaonline.com/css.jpg
Il problema è che il testo mi va sempre sopra o sotto l'immagine anche se
questa rimane a destra... sai dirmi come posso fare?
Grazie!
PS: non mancherà un ringraziamento per te sul disclaimer! ;o)

> metti il div #archivio prima del div #articoli.
Si il problema era proprio questo... anche se spero che i consigli di
SantaKlauss mi aiutino per quanto riguarda Netscape e Opera... perché anche
con la tua soluzione qui è un mezzo casino!
Grazie!

 3) se usassi gli shorthand background e margin ridurresti
A parte quelle che gia' sono nel CSS che parti dovrei sostituire con margin?
Cekko mi diceva che gli hai consigliato di utilizzare div#corpo, come mai
questa dicitura non la trovo su nessun tutorial?
Grazie,
David.

 David.
Figurati.
    SantaKlauss
P.S: l' immagine che hai messo on line e indicato nell' altro
post non si carica.

 post non si carica.
A me parte... fammi sapere!
Grazie ancora!

 con la tua soluzione qui è un mezzo casino!
Immaginavo che non fosse sufficiente:
altri due consigli:
1) se #sinfoot ti serve solo per la grafica, eliminalo e passa colore ed
immagine di background su #sin (brr, un div che si chiama 'peccato' :->)
facendo attenzione a posizionarla in basso e a destra: per rendere il tutto
visibile ti basterà dare a #sin un padding-bottom di 30px
2) crea un blocco container (div#corpo, div#container chiamalo come vuoi)
per #articoli e #archivio: eviterai di avere lo stesso problema di prima nel
caso in cui il contenuto di archivio rendesse il blocco più alto di
#articoli.
Se poi anche #footer, analogamente a #sx, serve solo come elemento grafico,
elimina anche quello e passa colore ed immagine di backgound al nuovo tag,
anche questo con un padding-bottom di 30px
fammi sapere
zefiro

Seguendo le indicazioni si SK ho creato un unico footer, se rivedi la pagina
linkata.
Ma non capisco cosa vuoi dire quando dici di eliminare anche footer?!?

 Ma non capisco cosa vuoi dire quando dici di eliminare anche footer?!?
Il fatto è questo: se non prevedi di inserirci del testo (tipo un <p> per
intenderci), è inutile avere un div che serve solo per contenere un
background. A livello strutturale è superfluo, e quasi sempre si riesce
a sistemarlo come sfondo di un div con contenuti reali. Questo
intendeva zefiro.
Ciao,
    SantaKlauss

 intendeva zefiro.
Ho capito, ma non saprei come altro mettere quel footer.
Comunque grazie...
C'e' solo un'altra cosa che non mi torna (o meglio una sola che mi viene in
mente), se volessi prolungare fino in fondo il DIV a sinistra (quello con
float:left per intenderci), come dovrei fare? Nel mio caso aveva lo sfondo
nero e vorrei farlo arrivare fino al footer, seguendo la lunghezza dei
contenuti centrali.
Buonanotte,
David.

 contenuti centrali.
Prova così:
1) modifica menu_pp.gif aggiungendo a destra un quadratino con la @ su
sfondo nero
2) aggiungi  allo stylesheet la seguente istruzione
     div#corpo{Black url(../images/menu_pp.gif) left
bottom;padding-bottom:30px}
3) togli l'immagine di background da #sin
4) incenerisci quel cazzo di footer che non serve a niente :-)
5) facci sapere
zefiro
ps. bellissimo quell'intervista ad Agnolotto: non saprei come meglio
definirlo. Saluti da un radicale.

 contenuti centrali.
Il trucco è questo. Usare un contenitore per menu e contenuti di sx:
<div id="main">
    <div id="menu">ecc...</div>
    <div id="content">ecc...</div>
</div>
Mettere sfondo nero a main, trasparente (o nero) a menu
e bianco (o cmq non nero) a content (mantenendo un margin-left
pari alla larghezza del menu). Così sembrerà che il footer
si estende in altezza come i contenuti.
Ciao,
    SantaKlauss

 pari alla larghezza del menu). Così sembrerà che il MENU'


> 4) incenerisci quel cazzo di footer che non serve a niente :-)
Scusate ma quel footer deve scendere quanto è lunga la pagina, se lo tolgo
dovrei mettere l'immagine come sfondo di cosa???

 dovrei mettere l'immagine come sfondo di cosa???
ascolta ti ho risposto sul nuovo newsgroup free.it.comp.lang.html: qua ci
sta una vita a postare