Newsgroup: it.comp.www.html
Titolo: [CSS[ Facile facile..

Facile facile (non x me)...
Sono un po' arruginito...
Mi dite come si fa ad /emulare/ ciň che faccio qui sotto con una tabella?
<tr>
    <td align="left"></td>
    <td align="right"></td>
</tr>
Insomma, vorrei mettere del testo *sulla stessa riga*, all'interno di un
contenitore <div> uno a dx, l'altro a sx.
Altra piccolissima cosa.
Posso stabilite delle posizioni in px assolute all'interno di un
contenitore <div>?
Mi spiego...
Se ho come struttura di una pagina x es:
<div Id="Testata"></div>
<div Id="Centrale"></div>
<div Id="Coda"></div>
Posso creare 2 colonne all'interno di "Centrale" che abbiano entrambe 0px
top e rispettivamente 0px a dx e sx in modo che il corpo centrale sia
flottante, e soprattutto cosě che le 2 colonne inizino in altezza dal div
Centrale, sotto Testata?
Spero di essermi spiegato.
Ciao e grazie
-- 
Guglielmo
Non per difendere il diavolo, perň bisogna ammettere che tutto ciň che č
stato scritto su di lui, č stato scritto da amici di Dio...

Guglielmo ha scritto:
| Mi dite come si fa ad /emulare/ ciň che faccio qui sotto con una tabella?
|
| <tr>
|     <td align="left"></td>
|     <td align="right"></td>
| </tr>
|
| Insomma, vorrei mettere del testo *sulla stessa riga*, all'interno di un
| contenitore <div> uno a dx, l'altro a sx.
Ciao Guglielmo, ecco qui la soluzione con stili in linea:
<div style="border: 1px solid #000">
    <p style="float: left">Ciao</p>
    <p style="float: right">by SantaKlauss</p>
    <div style="clear: both"></div>
</div>
| Altra piccolissima cosa.
| Posso stabilite delle posizioni in px assolute all'interno di un
| contenitore <div>?
| Mi spiego...
| Se ho come struttura di una pagina x es:
| <div Id="Testata"></div>
| <div Id="Centrale"></div>
| <div Id="Coda"></div>
|
| Posso creare 2 colonne all'interno di "Centrale" che abbiano entrambe 0px
| top e rispettivamente 0px a dx e sx in modo che il corpo centrale sia
| flottante, e soprattutto cosě che le 2 colonne inizino in altezza dal div
| Centrale, sotto Testata?
Mhhmm, flottante non č la parola giusta...forse intendevi fluido?
Se stai pensando ad un layout a tre colonne, ci sono due modi per ottenerlo:
- mettere le colonne laterali float e usare i margini nel corpo centrale,
- oppure usare i posizionamenti assoluti (per poter consentire il posizionamento
assoluto all' interno div centrale, ti basta aggiungere position: relative nella sua regola,
infatti il posizionamento assoluto č riferito al primo antenato posizionato).
Per capire i posizionamenti assoluti: 
www.brainjar.com
Per il layout a tre colonne:
http://webhost.bridgew.edu/etribou/layouts/index.html
http://glish.com/css/
http://www.constile.org/template/layout_a_tre_colonne/
http://www.constile.org/template/nuovo_layout_a_tre_colonne/
e tantissimi altri (basta cercare su google: three columns css layout)
Saluti,
    SantaKlauss


in 52 righe ha scritto:
<cut>
Grazie Santa!
Avevo immaginato la soluzione fosse in float.
Per il layout a 3 colonne, sì intendevo fluido, e mi sa devo andare a
rispolverare qualche nozione sui link che mi hai dato.
In realtà sto impazzendo xkè sto cercando di non mettere nemmeno una
tabella, però penso che a volte con le tabelle si risolvano molti problemi
molto + velocemente..
Che ne pensate voi? Siete di quelli che a tutti i costi ineggiano al "a
morte le tabelle" o le usate con discrezione?
Ciao
PS a questo punto visto che santa mi ha letto, scusate x il doppio post..
-- 
Guglielmo
SENTI CHI PARLA
"Le persone che dicono di dormire come un bambino, di solito non ne hanno
uno".

Guglielmo ha scritto:
| Grazie Santa!
| Avevo immaginato la soluzione fosse in float.
Figurati!
| Per il layout a 3 colonne, sì intendevo fluido, e mi sa devo andare a
| rispolverare qualche nozione sui link che mi hai dato.
| In realtà sto impazzendo xkè sto cercando di non mettere nemmeno una
| tabella, però penso che a volte con le tabelle si risolvano molti problemi
| molto + velocemente..
Credo che i tempi siano abbastanza maturi per abbandonare
completamente le tabelle per creare layout. Imparare a creare un
layout table-less significa anche avere una buona padronanza dei css.
Inoltre, se hai urgenza di fare un sito, di template già pronti ne trovi
un sacco e hai tempo per imparare a capirli nel dettaglio in seguito.
Fai uno sforzo e ripassa bene i css. Per hobby, diletto o per lavoro,
quello che studi te lo ritroverai utile. Tre link su tutti per imparare,
rispolverare o approfondire i css:
www.w3schools.com
www.brainjar.com
www.richinstyle.com
| PS a questo punto visto che santa mi ha letto, scusate x il doppio post..
Nessun problema. Tieni conto che il ng è moderato, e i post che
mandi te li trovi nel ng almeno venti minuti dopo.
Ciao,
    SantaKlauss

 </div>
 
Senti Santa...
Solo adesso rivedo questa parte del tuo mess.
Avevo risolto da solo quindi non ci ho prestato molta attenzione.
Mi spieghi cosa hai fatto col seconso div?
Ho provato a levarlo e mi da solo una linea in alto???
Why??? PErchè hai scelto di metterli dentro p e non in 2 div?
Ciao e grazie
-- 
Guglielmo
DIMMI CON CHI VAI...
E' sbagliato giudicare un uomo dalle persone che frequenta. Giuda, per
esempio, aveva degli amici irreprensibili.

 Natalino Balasso

Guglielmo  ha scritto :
| Mi ricordo che una volta ho visto dei siti con una marea di layout gia
| pronti (senza spiegazioni di come sono fatti), me ne sapresti indicare
| qualcuno?
I link che ti ho indicato in un mio post precedente sono gli unici che ho
sottomano tra i preferiti:
http://webhost.bridgew.edu/etribou/layouts/index.html
http://glish.com/css/
http://www.constile.org/template/layout_a_tre_colonne/
http://www.constile.org/template/nuovo_layout_a_tre_colonne/
Ma ce ne sono tantissimi altri (basta cercare su google: three columns css layout)
| PS Link in italiano?
Mi spiace ma principalmente navigo su siti in lingua inglese... l' unico
che conosco in italiano è 
www.constile.org
 ma dovrebbe esserci qualcosa
anche su 
www.html.it
Ciao!
    SantaKlauss

SantaKlauss ha scritto:
| > <div style="border: 1px solid #000">
| >     <p style="float: left">Ciao</p>
| >     <p style="float: right">by SantaKlauss</p>
| >     <div style="clear: both"></div>
| > </div>
Guglielmo ha risposto:
| Senti Santa...
| Solo adesso rivedo questa parte del tuo mess.
| Avevo risolto da solo quindi non ci ho prestato molta attenzione.
| Mi spieghi cosa hai fatto col seconso div?
Serve per due motivi:
- per permettere al div + esterno di contenere i due paragrafi
   float-tanti (ma cmq si potrebbe avere lo stesso effetto fissando
   un' altezza del primo div)
- per far si che quello che metti dopo il div più esterno non si disponga
  tra i float (è quello a cui serve il clear).
Dai uno sguardo qui per capire meglio:
http://www.complexspiral.com/publications/containing-floats/
Una soluzione alternativa, senza usare il div che da il clear, è:
<div style="height: 1em; border: 1px solid #000">
    <p style="float: left">Ciao</p>
    <p style="float: right">by SantaKlauss</p>
</div>
<div style="clear: both">
    <!-- qui ci metti il resto -->
</div>
Sinceramente preferisco questa soluzione in quanto, rispetto alla
prima, non necessita di elementi extra, l' unico diffetto è che bisogna
fissare l' altezza del div che contiene i due float.
| Ho provato a levarlo e mi da solo una linea in alto???
In sostanza perchè il div, senza dimensione fissata o un div interno
che fà il clear, assume altezza nulla.
|PErchè hai scelto di metterli dentro p e non in 2 div?
I div possono contenere testo, è vero, ma abitualmente uso
i div come solo come contenitori e per il testo uso dei paragrafi
o degli header (a proposito, se si tratta di titoli forse va meglio
una coppi di h1,h2,h3 o h4).
Credo che sia una separazione migliore tra contenitore e contenuto.
Ciao,
    SantaKlauss

 Mago Oronzo (Raul Cremona)