Inserire immagine al bordo della pagina-foglio!Help!

[duska]

Ragazzi, ho un problema,vorrei inserire un immagine tipo ombra al bordo della pagina di prestashop.
Praticamente vorrei creare l'effetto rialzo dato con l'immagine-ombra he ho creato ma non so dove inserire tale elemento.
Qualcuno mi può aiutare?

[checco]

ma dove la vuoi l'ombra?
a destra e sinistra o sui 4 lati?

[duska]

ciao checco,
l'ombreggiatura la vorrei sia a destra che a sinistra lungo tutta la pagina.
Così da un effetto sollevato sullo sfondo.
Come posso fare?

[checco]

la metti come sfondo al div #page
alla riga 190

[duska]

cioè metto solo l'immagine di sfondo al div #page alla riga 190 circa?

Siccome ho ampiamente modificato il css credo che la riga non corrisponda nel mio gobal, potresti incollarmi qualche pezzo di codice così identifico la porzione giusta?

Così facendo riesco ad mettere il bordo sia a destra che a sinistra?

[checco]

#page {
   width: 980px;
   margin: 0 auto 2px auto;
   text-align: left
}

diventa tipo così:

#page {
   width: 980px;
   margin: 0 auto 2px auto;
   text-align: left;
   background: url(../img/miosfondo.jpg) repeat-y left top;
}

prova, fammi sapere
se mi mandi un link del sito
posso aiutarti un po' meglio...

ciao

[duska]

allora sto provando ma non funziona, nel senso che l'immagine la mette a sinistra però mi toglie il bordo bianco della pagina.

Guarda tu:

www.modainside.it

Il sito è in costruzione quindi non fare caso al casino che trovi.

questo è la mia porzione di global css originale:


#page {
width: 1000px;
margin: 0 auto 2px auto;
text-align:left;
border:1px solid #999;
padding:5px;
background-color:#FFF;


Questa quella modificata:

#page {
width: 1000px;
margin: 0 auto 2px auto;
text-align:left;
border:1px solid #999;
padding:5px;
background-color:#FFF;
background: url(../img/miosfondo.jpg) repeat-y left top;

cosa sbaglio?

[checco]

dunque...
per far apparire "l'ombra" anche sulla destra hai bisogno
di un'immagine orizzontale; cerco di spiegarmi meglio:
ora tu hai inserito questa "ombrasinistra.gif" che ha dimensione
27x409 px; dovresti creare un'immagine, per esempio, di 1000x5px
con ai lati le 2 sfumature in modo da ottenere l'effetto che vuoi.

Se volessi conservare la larghezza utile di 1000px che hai impostato,
tramite l'inserimento dell'immagine questa ti si riduce di circa 30px per lato
quindi dovresti portare la page a 1060px...

Spero di essermi spiegato....
Ciao...
buon Natale

[duska]

Ciao checco,
Buon Natale anche a te e a tutte le persone del forum.

Si credo di aver capito cosa intendi.

Praticamente, correggimi se sbaglio, dovrei fare un immagine bianca con ai 2 lati l'ombra, così:

-avrei lo sfondo della pagina bianca
-avrei i 2 lati esterni con l'ombreggiatura

L'unica cosa che non mi è tanto chiara è le dimensioni, non posso creare uno sfondo per la pagina di 970x5px e lasciare grandezza 1000px della #page?

Così dovrei avere lo stesso risultato in teoria, portando ogni ombra ad occupare circa 15px.

Mi sbaglio?

[duska]

Allora sono riuscito a mettere i bordi anche se l'immagine che c'è ora è molto da sistemare, però bene o male rende l'idea.

L'unico problema è che ho dovuto modificare i margini del #page portandoli da 5px a 30px per evitare la sovrapposizione del bordo con gli oggetti della colonna.

Il problema è che ora anche il margine superiore dell'header è cambiato automaticamente è si evidenzia un forte spazio bianco tra il bordo superiore e il logo.

Come posso risolvere sta cosa ora?

[checco]

nel div page metti padding:0 30px;

[checco]

nel div #page modifica il padding così:
padding:0 30px;

[duska]

Grazie tante checco, ci sono riuscito!!!
Sei stato davvero molto gentile!

Spero che questo topic possa servire a molta altra gente perchè porta fino alla fine una problematica in modo abbastanza chiara.

Ti auguro ancora un buon fine natale.

[clalla]

Il modo migliore per fare l'ombra è quello si usare box-shadow come spiegato benissimo su

 

http://pupixel.com/css3-come-utilizzare-la-proprieta-box-shadow/

 

Basta inserirlo si global.css sotto body generic style

 

spero di essere stato utile come tutti voi lo siete per me!!!

 

Ciao