Newsgroup: it.comp.www.html
Titolo: effetto OMBRA ad un Div fluido

ciao
ho un div che contiene testo
mi piacerebbe aggiungere al suo lato destro
ed al suo lato inferiore
 la classica leggerissima ombra
(per fare un po' l'effetto rilievo)
il mio problema è che il div può cambiare la sua lunghezza e la sua
larghezza
perchè l'utente potrebbe restringere i lati del suo browser facedo
cambiare conseguentemente l'altezza e la larghezza del divperchè tale div è
elestico
oppure  perchè decide di ingrandire i caratteri nel suo browser
come posso fare?
--
Newsgroup robomoderato - gli articoli vengono approvati automaticamente

 come posso fare?
Crei un background opportuno per l'ombra con dimensione 1 pixel, 
inserisci due div innestati e usi il background uno in basso e l'altro a 
destra con opzione repeat.


destra con opzione repeat.
cosa intendi per innestati?
ho diverse difficoltà:
ho creato div (quello che deve stare sotto il bordo
inferiore) e la liquidità me la rispetta
ma non riesco ad impostargli l'immagine di background 
(ho provato con una decina di immagini, gif, jpg, bmp di varie dimensioni,
ma il div non mi prende nessuna immagine, mentre un colore solido lo
prende) 
allora ho dovuto metterci una Image dentro 
e dentro a questa ci ho messo la mia ombra.jpg
ma per l'affiancamento orizzontale
ho sono dovuto ricorrere alla width in percentuale 100%
e non al repeat
tra l'altro il div che contiene il testo ha dei padding a destra e sinistra
e questo non mi fa ottenere una pari lunghezza al div
che deve contenere l'ombra
per l'ombra sul lato destro sono completamente in alto mare
qui c'è una immagine di quello che vorrei:
http://www.zshare.net/image/79621843330c24/
4 kb
questo il mio lavoro sul lato inferiore
                 <div style="font-size: small; width: 98%; position:
relative; height: 17px; background-color: aliceblue; left: 6px; top: 8px;
color: royalblue; padding-left: 7px; padding-right: 5px; border-right: blue
1px solid; border-top: blue 1px solid; border-left: blue 1px solid;
border-bottom: blue 1px solid; font-weight: bold;">
                     Avvenimentii
                 </div>
 
 
                 <div style="font-size: small; width: 103%; position:
relative; height: 5px; left: 6px; top: 8px; padding-left: 1px;">
                     <img src="../../../ombra_basso.JPG" width="100%"
height="5px" /></div>


ma non riesco ad impostargli l'immagine di background 
dunque il fatto dell immagine dentro il div l'ho risolta 
(o era un bug di VWD o non voleva le virgolette doppie
o non so...) e pure l'affiancamento ho risolto
ora però ho il problema di aver la lunghezza di questo div che 
ha l'ombra, sempre uguale a quella del div con il testo che è liquido
infatti, non avendo il testo, quando si cambia la grandezza del carattere
nel browser, il div con il testo che è liquido cambia larghezza,
ma il div con l'ombra non riesce a "stargli dietro" ( cambia anche lui la
sua larghezza ma non eguaglia per difetto - circa 10% - mai quella del div
con il testo) 
questo è il codice:
<div style="font-size: small; width: 98%;
position: relative; height: 17px; left: 6px; top: 8px; padding-left: 7px;
padding-right: 5px; 
font-weight: bold;"> Avvenimenti
</div>
 
<div style="font-size: small; width: 98%;
position: relative; height: 5px; left: 9px; top: 8px; padding-left: 7px;
padding-right: 5px;
background-image: url(ombra_basso.JPG); background-repeat: repeat-x">
</div>
nota:
per il div da mettere lungo il lato destro
ancora ahimè non so posizionarlo alla 
destra del primo div


 prende) 
Incolla il codice che dici che "non prende".


 con il testo) 
Di nuovo: mettili uno dentro l'altro.


 (per fare un po' l'effetto rilievo)
Non reinventare qualcosa che è già stato pensato e funziona alla grande...
http://www.alistapart.com/articles/onionskin/
Adattandolo leggermente dovrebbe funzionare anche con un div contenente 
testo.
-- 
Jax


Incolla il codice che dici che "non prende".
il div con l'ombra destra l'ho messa a contenitore 
del div con il testo
un terzo div con l'ombra bassa l'ho messo sotto 
(quindi fuori) a quello che ha funto da contenitore
quindi direi di aver fatto
(altre soluzione mi davano problemi nella esatta uguaglianza 
dei lati con le ombre in gioco 
o con la proprietà 'padding-right' cui ho fatto ricorso 
nel div con il testo)
purtroppo in firefox 1.8.1  e  ie 5.0   
le lunghezze delle ombre non sono perfettametne esatte
(in firefox non compare la destra, credo a causa del padding-right,
mentre in ie  quella bassa eccede, credo perchè non
viene processata bene la propietà width che esprimo in % percentuale)
in ie 6 tutto bene
----------
la stringa che ora va è questa
background-image: url(ombra_basso.JPG)
se però non si trova nella stessa cartella del file .htm non riesco a 
richiamarla 
e neanche la stringa offerta da VWD col suo wizardino 
background-image: url(/dati/oggi/ombra_basso.JPG)
funziona
cmq su questo problemino non ho voglia di soffermermi ulteriormente


testo.
potebbe essere una soluzione (non mi sono soffermato a leggerlo
conesattezza)
ma
le gif hanno dimensioni fisse? riescono cioè a garantire la liquidità
ad un div liquido?


 ad un div liquido?
Beh, non sei legato ad una gif. Come puoi leggere, "if you wish to 
create visual effects that expand and contract to fit any object, 
require no image manipulation, and render the same across all browsers, 
then "Onion Skinned Drop Shadows" may be just what you've been looking for."
Puoi applicare l'effetto anche ad un div testuale, non è necessario 
applicarlo ad una immagine.
Leggitelo, provalo e salvati questo sito... e consultalo spesso.
Spesso si crede di risparmiare del tempo non cercando su internet, e 
invece si perde tempo su tempo perche poi scopri che la cosa che hai 
pensato non funziona su alcuni browser e qualcuno aveva già trovato e 
testato un'altra soluzione.
-- 
Jax
