css, fumetti per una chat

[traverso85]

sto provando a realizzare una sorta di chat.... o meglio una bacheca dove degli utenti definiti possono scrivere dei messaggi..ho preparato i 4 elementi che compongono la chat
ossia il riquadro generale che contiene tutti e 3 gli elementi, il riquadro grigio per gli utenti connessi quello oro dove verranno visualizzati i post scritti e quello marroncino dove verrà immesso il testo... insomma ottengo una cosa del genere...


Uploaded with ImageShack.us
adesso vorrei creare dei "fumetti" come quelli nell'iPhone4s usati in Siri
ossia così:
http://image.naldzgraphics.net/2012/01/iphone-final.jpg
quelli semitrasparenti con i campi di testo...
il mio dubbio esistenziale è? come posso organizzare questi "fumetti" in modo che si adattino al contenuto? già ne ho realizzato un campione su photoshop...
grazie per l'aiuto Claudio

[traverso85]

nessuno sa aiutarmi?

[ResianTaxidrive]

Un div si adatta automaticamente ai tuoi contenuti.
Non capisco molto bene il tuo problema anche perché Non mi e' chiaro il collegamento tra la struttura che hai fatto e la questione dei fumetti.

[traverso85]

Si il div si adatta automaticamente il fatto è che all interno del div devo inserire un immagine (a forma di fumetto come quella postata) all interno del quale verrà visualizzato del testo. Ora il fumetto che ho disegnato in PS ha delle dimensioni esempio 30px per 100px ora il testo al suo interno se dovesse essere su due righe occuperebbe più di 30px quindi il fumetto dovrebbe diventare più alto... Idem per la lunghezza del disegno...non so se sono riuscito a spiegarmi bene...

[totsdesign]

quindi il problema non è del deiv, ma dell'immagine che risulterebbe troppo piccola...
Puoi spezzare la tua immagine in 3 immagini separate. La striscia della parte in alto, la striscia della parte centrale che si allungherà in base all'altezza (repeat-y) e la striscia della parte in basso.Le metti come sfondo a tre div, di cui quello centrale conterrà il testo

[traverso85]

Originariamente inviato da totsdesign
quindi il problema non è del deiv, ma dell'immagine che risulterebbe troppo piccola...
Puoi spezzare la tua immagine in 3 immagini separate. La striscia della parte in alto, la striscia della parte centrale che si allungherà in base all'altezza (repeat-y) e la striscia della parte in basso.Le metti come sfondo a tre div, di cui quello centrale conterrà il testo

avevo pensato una cosa del genere....ma dato che il "fumetto" deve cambiare anche la lunghezza in base a quanto è scritto mi sto impicciando sulle divisioni
ossia dovrei fare i 4 angoli metterli fissi all'interno del dov principale...e poi? fare una parte della riga orizzontale e una parte di quella verticale?come li dispongo poi?
Grazie

[totsdesign]

deve per forza cambiare la larghezza? questo metodo va bene se cambia solo una dimensione...

[ResianTaxidrive]

ma il fumetto è un rettangolo con gli angoli arrotondati? Puoi fare il tutto tramite css così non hai problemi di caricare immagini.

[traverso85]

Originariamente inviato da ResianTaxidrive
ma il fumetto è un rettangolo con gli angoli arrotondati? Puoi fare il tutto tramite css così non hai problemi di caricare immagini.

Si i fumetti devono essere con angoli arrotondati solo che non saprei dove cominciare a farli in css perché su PS sono fatti su più livelli e con riflessi ed altro... Esattamente come quelli Dell iPhone

[ac_socmel]

prova a guardare il codice di questa mia pagina d'esempio
http://acsocmel.altervista.org/prova/index.html