Indice del forum Olimpo Informatico
I Forum di Zeus News
Leggi la newsletter gratuita - Attiva il Menu compatto
 
 FAQFAQ   CercaCerca   Lista utentiLista utenti   GruppiGruppi   RegistratiRegistrati 
 ProfiloProfilo   Messaggi privatiMessaggi privati   Log inLog in 

    Newsletter RSS Facebook Twitter Contatti Ricerca
* bordi di div
Nuovo argomento   Rispondi    Indice del forum -> Linguaggi per Internet
Precedente :: Successivo  
Autore Messaggio
kkk2003
Dio minore
Dio minore


Registrato: 11/08/05 07:15
Messaggi: 863
Residenza: Mosca - Russia

MessaggioInviato: 23 Gen 2006 19:14    Oggetto: * bordi di div Rispondi citando

Qualcuno sa se e' possibile "stodare" gli angoli dei bordi di un div??
E se si, ovviamente, come?!
Top
Profilo Invia messaggio privato HomePage Yahoo
rebelia
Dio maturo
Dio maturo


Registrato: 17/07/03 09:22
Messaggi: 7987

MessaggioInviato: 23 Gen 2006 20:28    Oggetto: Rispondi citando

immagino che per "stodare" tu intenda arrotondare; se cosi' fosse, la risposta e' "no almeno per ora", nel senso che i css3 contemplano la possibilita' di farlo (vado a memoria), ma i browsers ancora non la supportano (non supportano ancora bene neanche i css2, vedi tu!)

se vuoi fare una cosa del genere e mettendo che tu voglia creare una colonna a larghezza fissa, procedi in questo modo:

- crei con il programma di grafica un rettangolo con i bordi arrotondati della larghezza che ti interessa

- ne ritagli la parte alta ottenendone un'immagine come questa:

(la chiamiamo immaginesuperiore.gif)

- ne ritagli la parte centrale ottenendone un'immagine come questa:

(la chiamiamo immaginecentrale.gif)

- ne ritagli la parte inferiore ottenendone un'immagine come questa:

(la chiamiamo immagineinferiore.gif)

crei nella pagina tre div annidati l'uno nell'altro:
Codice:

<div id="esterno">
   <div id="centrale">
      <div id="interno">
      </div>
   </div>
</div>


e li formatti in questo modo:
Codice:

#esterno {width: 273px; background: url(immaginecentrale.gif) repeat-y;}

#centrale {background: url(immaginesuperiore.gif) no-repeat top center;}

#interno {background: url(immagineinferiore.gif) no-repeat bottom center;}


in questo modo simuli l'effetto angoli arrotondati e funziona pure se dividi ognuna delle immagini in tre pezzi e le usi per decorare NOVE div annidati per ottenere un contenitore dilatabile non solo in lunghezza, ma anche in larghezza: cio' e' possibile perche' i div non hanno spessore (eventualmente aggiungici qualche border: 0px; margin: 0px; e padding: 0px;) e non danno fastidio; il trucco sta nel dare la larghezza al solo div esterno Smile

spero di essere stata sufficientemente chiara, nel caso chiedi pure Smile
Top
Profilo Invia messaggio privato HomePage
kkk2003
Dio minore
Dio minore


Registrato: 11/08/05 07:15
Messaggi: 863
Residenza: Mosca - Russia

MessaggioInviato: 23 Gen 2006 22:29    Oggetto: Rispondi citando

ops... Si, "stodare" doveva essere "stondare"...
ad ogni modo, chiarissima come sempre, grazie!!
Top
Profilo Invia messaggio privato HomePage Yahoo
rebelia
Dio maturo
Dio maturo


Registrato: 17/07/03 09:22
Messaggi: 7987

MessaggioInviato: 23 Gen 2006 23:21    Oggetto: Rispondi citando

kkk2003 ha scritto:
ops... Si, "stodare" doveva essere "stondare"...
ad ogni modo, chiarissima come sempre, grazie!!


Wink

prego Smile
Top
Profilo Invia messaggio privato HomePage
matt78
Mortale devoto
Mortale devoto


Registrato: 31/01/06 16:21
Messaggi: 9

MessaggioInviato: 31 Gen 2006 16:29    Oggetto: bordi div tondi, spigolosi, etc... Rispondi citando

ciao,
concordo sul fatto che i div di natura non permettano di arrotondare i bordi,
ma utilizzando un trucchetto simile a quello che ha usato rebelia si può fare
anche senza aggiungere immagini (comunque in realtà dipende dalla
complessità che vuoi ottenere), ma solo modificando il css.
In questo ci sito c'è l'esempio e un sacco di altro materiale:

link

ciao
Top
Profilo Invia messaggio privato
rebelia
Dio maturo
Dio maturo


Registrato: 17/07/03 09:22
Messaggi: 7987

MessaggioInviato: 31 Gen 2006 16:40    Oggetto: Rispondi citando

sistema originale!

secondo me la cosa migliore e' conoscere tutti i metodi disponibili (quindi questi due, ma anche altri che spero ci saranno segnalati in seguito) e poi di volta in volta scegliere quello che meglio si adatta all'effetto che desideriamo ottenere e al tipo di sito che stiamo costruendo

grazie per la segnalazione, buona a sapersi! Smile
Top
Profilo Invia messaggio privato HomePage
Marcolino
Semidio
Semidio


Registrato: 27/04/05 15:26
Messaggi: 257
Residenza: Udine e dintorni

MessaggioInviato: 31 Gen 2006 16:48    Oggetto: Rispondi citando

Bella lì, hanno usato un punto . ingrandendolo a 150 pixel per poi tagliarne una parte a seconda dell'angolo, semplice e geniale.

Oppure usando le estensioni proprietarie di mozilla, che ovviamente funzionano solo lì Very Happy
http://developer.mozilla.org/en/docs/CSS_Reference:Mozilla_Extensions

marco.
Top
Profilo Invia messaggio privato HomePage
matt78
Mortale devoto
Mortale devoto


Registrato: 31/01/06 16:21
Messaggi: 9

MessaggioInviato: 31 Gen 2006 16:51    Oggetto: Rispondi citando

e si molto originale, Very Happy
Stu Nicholls utilizza i css veramente al massimo delle loro prestazioni,
addirittura ha costruito un set di caratteri con lo stesso sistema Shocked Shocked Very Happy Very Happy


Cmq concordo con rebelia, nei due metodi cambia di poco la sostanza,
con le immagini si riescono a ottenere bordi sofisticati, con i css si
riduce il carico della pagina, dipende sempre da ciò che serve
Top
Profilo Invia messaggio privato
rebelia
Dio maturo
Dio maturo


Registrato: 17/07/03 09:22
Messaggi: 7987

MessaggioInviato: 31 Gen 2006 17:13    Oggetto: Rispondi citando

p.s. anche ben arrivato! Very Happy
Top
Profilo Invia messaggio privato HomePage
matt78
Mortale devoto
Mortale devoto


Registrato: 31/01/06 16:21
Messaggi: 9

MessaggioInviato: 31 Gen 2006 17:34    Oggetto: Rispondi citando

grazie! Smile
Top
Profilo Invia messaggio privato
ioSOLOio
Amministratore
Amministratore


Registrato: 12/09/03 19:01
Messaggi: 16342
Residenza: in un sacco di...acqua

MessaggioInviato: 31 Gen 2006 17:39    Oggetto: Rispondi citando

non so quanto analogo sia, sempre con i css si ottiene ciò che viene chiamato Nifty Corners
Top
Profilo Invia messaggio privato
rebelia
Dio maturo
Dio maturo


Registrato: 17/07/03 09:22
Messaggi: 7987

MessaggioInviato: 31 Gen 2006 17:50    Oggetto: Rispondi citando

si, usano sistemi diversi (c'e' una lista di link a fondo pagina) sempre annidando i div l'uno nell'altro; la tecnica usata nell'esempio che hai citato si vede benissimo aprendo la pagina con opera e ingrandendo il testo
Top
Profilo Invia messaggio privato HomePage
juzo kun
Dio maturo
Dio maturo


Registrato: 19/04/04 09:32
Messaggi: 1853
Residenza: tra la tastiera e la sedia

MessaggioInviato: 31 Gen 2006 23:55    Oggetto: Rispondi

ioSOLOio ha scritto:
non so quanto analogo sia, sempre con i css si ottiene ciò che viene chiamato Nifty Corners


Con CSS e Javascript: l'articolo si trova qua.

Cià
JK
Top
Profilo Invia messaggio privato HomePage
Mostra prima i messaggi di:   
Nuovo argomento   Rispondi    Indice del forum -> Linguaggi per Internet Tutti i fusi orari sono GMT + 2 ore
Pagina 1 di 1

 
Vai a:  
Non puoi inserire nuovi argomenti
Non puoi rispondere a nessun argomento
Non puoi modificare i tuoi messaggi
Non puoi cancellare i tuoi messaggi
Non puoi votare nei sondaggi