Accedi per seguire   
Seguaci 0
spiug

[css] Come Creare Un Riquadro Personalizzato

10 messaggi in questa discussione

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 :)

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti

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

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti
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 :)

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti

Uffa..stò impazzendo.

Questo è il massimo che sono ruscito a fare per ora...box_contorni_personalizzati.zip

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??

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti

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 :)

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti
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

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti

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 (contiene l'esempio e qualche piccola spiegazione, nonchè il file css consultabile)

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti

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 ;-)

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti

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

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti
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 :)

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti

Crea un account o accedi per lasciare un commento

Devi essere un utente registrato per partecipare

Crea un account

Iscriviti per un nuovo account nella nostra community. È facile!


Registra un nuovo account

Accedi

Sei già registrato? Accedi qui.


Accedi Ora
Accedi per seguire   
Seguaci 0