[Spiug]

Finora ho sempre utilizzato la tabelle per impostare il layout e della pagina e dei vari elementi ma ora vorrei convertire tutto con i CSS che "dicono" siano più veloci da usare permettono maggiori risultati.

La vecchia impostazione potete vederla tuttora nel mio vecchi sito, ovvero quì, e ripeto che i vari box sono stati creati con l'uso delle tabelle, dove ci sono celle per gli angoli e celle per i lati (dove l'immagine si ripete utilizzando per forza i css).
Quì vi lascio pure il codice perhè capiate come è strutturata:

<table border="0" cellspacing="0" cellpadding="0">

  <tr>
	 <td valign='top' rowspan="2"><img src='sxalto.gif'/></td>
	 <td height='13' style='{background-image: url(alto.gif); background-repeat : repeat-x;}'></td>
	 <td valign='top' rowspan="2" style='{background-image: url(dxalto.gif);}'><img src='dxalto.gif'/></td>
  </tr>

  <tr>
	 <td height="23"></td>
  </tr>
  <tr>
	 <td width='28' valign='top' style='{background-image: url(sx.gif); background-repeat : repeat-y;}'></td>
	 <td>BLA BLA BLA...testo del box</td>
	 <td width='28' valign='top' style='{background-image: url(dx.gif); background-repeat : repeat-y;}'></td></tr>
  <tr>
	 <td valign='bottom' rowspan="2"><img src='sxbasso.gif'/></td>
	 <td height="23"></td>
	 <td valign='bottom' rowspan="2"><img src='dxbasso.gif'/></td>
  </tr>
  <tr>
	 <td height='13' valign='top' style='{background-image: url(basso.gif); background-repeat : repeat-x;}'></td>
  </tr>
</table>

Come posso ottenere lo stesso effetto utilizzando i css?? Posso dare un posizionamento assoluto all'interno del box e non rispetto alla pagina??
Finora sono andato a tentativi ma non ho trovato una soluzione soddisfacente...pensate che la soluzione migliore l'ho trovata con gli iframe <_< :P perchè il posizionamento assoluto è solo rispetto alla pagina...e pure con relative non vedo differenza e non ci sono riuscito.

Sicuramente qualcuno di voi è più esperto di me con i css...e vi prego di darmi una manina :)

[cereal]

Credo si possa fare, deve avere larghezza fissa o variabile (adattarsi alla quantità di testo)?

[Spiug]

cereal, su 29/06/07, 16:24, ha detto:

Credo si possa fare, deve avere larghezza fissa o variabile (adattarsi alla quantità di testo)?

No no.. completamente variabile!
Lo voglio fare tutto auto-adattante in base alla risoluzione con cui si guarda. ;-)

Solo il meglio :)

[Spiug]

Uffa..stò impazzendo.
Questo è il massimo che sono ruscito a fare per ora...  box_contorni_personalizzati.zip (8,5K)
Numero di download: 69
però se nello stesso modo aggiungo anche le barre laterali si sovrappongono agli angoli (sia mettendole prima, dopo e aggiungendoci lo z-index).
Il tutorial per creare un box così l'ho trovato quà.

...però non è quello che cercavo (infatti non supporta le barre laterali). Questo ci assomiglia a quello che vorrei, ma non è pratico, e poi è limitato in quanto se il box è troppo esteso le immagini di sfondo vengono a mancare.

Non sò più a che santo votarmi...qualcuno di voi ci riesce??

[cereal]

Purtroppo, per parte mia, in questo momento non ho molto tempo libero e non posso occuparmene, comunque ti avrei indirizzato verso una soluzione simile a quella che hai indicato nell'ultimo link. Il metodo che conosco è praticamente identico. Se ottengo qualche risultato alternativo ti faccio sapere. ciao :)

[Spiug]

cereal, su 13/07/07, 20:21, ha detto:

Purtroppo, per parte mia, in questo momento non ho molto tempo libero e non posso occuparmene, comunque ti avrei indirizzato verso una soluzione simile a quella che hai indicato nell'ultimo link. Il metodo che conosco è praticamente identico. Se ottengo qualche risultato alternativo ti faccio sapere. ciao :wub:

Certo, tranquillo :P
Ci sono tanti utenti..e tra questi ci sarà pure qualcuno che si intende di css e ha voglia di darmi una mano...spero. :)

Io di prove ne ho già fatte tante...e non sò più che pesci pigliare :P

[Spiug]

Ok, me la sono cavata da solo...

e dopo una infinità di prove eccola la soluzione:
-sfutto il questo tutorial per creare un box con i bordi laterali con un'immagine che si ripete all'infinito;
-poi dopo aver dato un'occhiata a questa guida capisco come aggiungere gli angoli esattamente al loro posto (prima invece di questa soluzione avevo provato utilizzando il float...ma ovviamente con IE mi dava problemi e mi sfalsava di qualche pixel <_< ), ovviamente l'esempio parla di position absolute, ma per non stravolgere la pagina diamo al div contenitore il valore postion relative (funziona bene lo stesso);
- ed ecco quà la soluzione:  box_fluido_arrotondato_con_contorno_personalizzabile_by_SPIUG.zip (1,8K)
Numero di download: 64 (contiene l'esempio e qualche piccola spiegazione, nonchè il file css consultabile)

[Spiug]

E così sono riucito senza problemi (ma con molta fatica da parte mia, in quanto sono un novellino sui CSS) a passare dalle vecchie tabelle ai contenitori DIV e CSS.

Sicuramente questa soluzione farà gola a molti in quanto potrete abbellire le finestre (o box) presenti nel vostro sito ;-)

[Prozac]

Grande Spiug!!! Benvenuto nella programmazione web moderna ;-)

[Spiug]

Prozac, su 27/07/07, 20:46, ha detto:

Grande Spiug!!! Benvenuto nella programmazione web moderna ;-)

Eh...non hai idea di quanta sofferenza a passare dalle comode tabelle all'utilizzo in toto dei contenitori e css!!
E' da una settimana piena (per non parlare delle precedenti) che mi scervello per dare una struttura (un laout) in css al mio sito che sia adattabile alla larghezza della pagina e che non si sfalsi (infatti crolla tutto) non appena lo spazio diminuisce...

utilizzando il float infatti gli elementi si sistamano per bene affiancati...ma non appena la pagina si restringe cade tutto inesorabilmente a capo e non c'è nulla da fare :)