Pagina 1 di 1
 
 

Messaggio [RISOLTO] Fixare Immagini Negli Angoli

#1  HaoAsakura Sabato, 21 Marzo 2009, 14:57

Ciao a tutti!
Eccomi di nuovo qua a chiedere consiglio dopo averle provate un po e senza trovare un tutorial comprensibile ed adatto alle mie esigenze in rete...

Allora ...

Io ora ho questa immagine di background

bg21-03-09

"Guidata" dal css

body {
    background: #111111 url(/templates/mg_themes/images/p_blue/bg21-03-09.gif);
    margin: 0;
    padding: 0;
    background-position: top;
    background-repeat: no-repeat;
    background-attachment:fixed;    
}


Da consiglio ricevuto sarebbe meglio tenere un'immagine di fondo che si adatti a tutte le risoluzioni e mettere dei blocchi fissi agli angoli ... in modo che si adatti a qualsiasi risoluzione!

Usare questo sfondo
bg
Cambiando il CSS body in:
body {
    background: #111111 url(/templates/mg_themes/images/p_blue/bg.gif);
    margin: 0;
    padding: 0;
    background-position: top;
    background-repeat: repeat;
    background-attachment:fixed;    
}




E fixando negli angoli, in quello superiore sinistro ed inferiore destro, queste immagini

TOP LEFT
background: url(/templates/mg_themes/images/p_blue/corner_topleft.gif)

corner_topleft

BOTTOM RIGHT
background: url(/templates/mg_themes/images/p_blue/corner_bottomright.gif)

corner_bottomright

Queste 2 immagini come le inserisco nel CSS?
Devo modificare anche i TPL? overall_footer ed overall_header?
Grazie dell'aiuto!
 




Versione di IP: 1.3.0.53a

Server: Linux

____________
Icy Phoenix "HaoAsakura Style Template"
www.souleateritalia.it | www.fmaitalia.net | www.bakanashumi.it

seihaofirma
 
Ultima modifica di HaoAsakura il Mercoledì, 01 Aprile 2009, 17:27, modificato 3 volte in totale 
avatar
blank.gif HaoAsakura Sesso: Uomo
Appassionato
Appassionato
 
Età: 30
Registrato: Giugno 2008
Messaggi: 512
  • Torna in cima Vai a fondo pagina
 

Messaggio Re: Fixare Immagini Negli Angoli

#2  Limun Sabato, 21 Marzo 2009, 21:52

ho visto il tuo PM nel IP ...
salve Hao  

sara un po dificile mi pare perche primo che devi vedere e questo :
la diferenza tra la resoluzzione , cioe

il tuo forum a 1024 px
1024

e al 1650 px
 1650

cosi non capisco dove credi di mettere top left , e bottom right inmagini se qualcuno guarda il tuo sito a bassa resuluzzione ?
poi non capisco dove devono essere dietro il forum o d'avanti  

pensa ci un po  
 




Versione di IP: 1.2.0.27x

Server: Linux
 
avatar
croatia.png Limun Sesso: Uomo
Visitatore
Visitatore
 
Età: 43
Registrato: Dicembre 2008
Residenza: Opatija
Messaggi: 66
  • Torna in cima Vai a fondo pagina
 

Messaggio Re: Fixare Immagini Negli Angoli

#3  HaoAsakura Domenica, 22 Marzo 2009, 08:40

Vediamo di spiegare chiaramente (spero di riuscirci ^^)

Prima di tutto dovrei mettere un'immagine di fondo che si ripeta, in questo caso l'immagine sarà questa

bg

Fin qui problemi non ce ne sono in quanto l'immagine si adatterà a tutti i tipi di risoluzione.

Poi ...

Partendo dal presupposto che la media delle configurazioni PC è di 1280x1024 (vincolo che decido io!)

Voglio posizionare 2 immagini agli angoli.

Queste immagini dovranno "stare" sopra lo sfondo principale ma sotto il corpo del portale.

Alla fine vorrei riuscire ad ottenre questo risultato

screenshot049

(anche se l'immagine BOTTOM RIGHT  è tagliata ... e questo si deve evitare!)

Bloccando le immagini agli angoli vorrei permettere a chi ha risoluzioni più alte (so che limiterei quelle basse .... ma chi ha queste risoluzioni vedrebbe solo una piccolissima porzione di sfondo!) di avere queste immagini (TOP LEFT e BOTTOM RIGHT) posizionate agli angoli del loro schermo evitando così le bande nere ed altri incovenienti!

In rete ho trovato queste "coordinate"
TOP LEFT
top:0 px
left:0 px

BOTTOM RIGHT
bottom:0 px
right:0 px

 




Versione di IP: 1.3.0.53a

Server: Linux

____________
Icy Phoenix "HaoAsakura Style Template"
www.souleateritalia.it | www.fmaitalia.net | www.bakanashumi.it

seihaofirma
 
Ultima modifica di HaoAsakura il Domenica, 22 Marzo 2009, 08:42, modificato 3 volte in totale 
avatar
blank.gif HaoAsakura Sesso: Uomo
Appassionato
Appassionato
 
Età: 30
Registrato: Giugno 2008
Messaggi: 512
  • Torna in cima Vai a fondo pagina
 

Messaggio Re: Fixare Immagini Negli Angoli

#4  FedericoBiccheddu Domenica, 22 Marzo 2009, 18:06

Crei due div, che conterranno le immagini che vuoi mettere ma saranno sempre in primo piano (credo). Se si, dovresti provare a mettere un valore negativo alla proprietà nel css:
.classe {
z-index: -#px;
}


Perova ad inserirli nell'overall_header, subito dopo <body>.

nell css:
.classe_alta {
position: absolute;
top: 0;
left: 0;
z-index: -#px; /* # sta per i numero dei livelli */
}

.classe_bassa {
position: absolute;
bottom: 0;
right: 0;
z-index: -#px; /* # sta per i numero dei livelli */
}


se non va con absolute prova con relative, ora non ricordo bene come funzionao  
 




Versione di IP: 1.3.15 (αlphα)

Server: Linux

____________
Per favore inserisci nel tuo Profilo la versione di Icy Phoenix e il Server utilizzato.
 
avatar
italia.png FedericoBiccheddu Sesso: Uomo
Veterano
Veterano
 
Età: 20
Registrato: Dicembre 2007
Residenza: Sant'Antioco
Messaggi: 2593
  • Torna in cima Vai a fondo pagina
 

Messaggio Re: Fixare Immagini Negli Angoli

#5  HaoAsakura Domenica, 22 Marzo 2009, 18:11

... quasi tutto chiaro ...

proverei anche subito ma ...

che <div> dovrei inserire nel overall_header dopo il <body>?  
 




Versione di IP: 1.3.0.53a

Server: Linux

____________
Icy Phoenix "HaoAsakura Style Template"
www.souleateritalia.it | www.fmaitalia.net | www.bakanashumi.it

seihaofirma
 
avatar
blank.gif HaoAsakura Sesso: Uomo
Appassionato
Appassionato
 
Età: 30
Registrato: Giugno 2008
Messaggi: 512
  • Torna in cima Vai a fondo pagina
 

Messaggio Re: Fixare Immagini Negli Angoli

#6  FedericoBiccheddu Domenica, 22 Marzo 2009, 18:14

I div con il nome della classe che usi nel css
 




Versione di IP: 1.3.15 (αlphα)

Server: Linux

____________
Per favore inserisci nel tuo Profilo la versione di Icy Phoenix e il Server utilizzato.
 
avatar
italia.png FedericoBiccheddu Sesso: Uomo
Veterano
Veterano
 
Età: 20
Registrato: Dicembre 2007
Residenza: Sant'Antioco
Messaggi: 2593
  • Torna in cima Vai a fondo pagina
 

Messaggio Re: Fixare Immagini Negli Angoli

#7  HaoAsakura Domenica, 22 Marzo 2009, 18:18

FedericoBiccheddu ha scritto: [Visualizza Messaggio]
I div con il nome della classe che usi nel css

immagino di stare a fare una figura barbina ...

quindi, semplicemente ... sotto

<body>
metto un ipotetico
<topleft>
 




Versione di IP: 1.3.0.53a

Server: Linux

____________
Icy Phoenix "HaoAsakura Style Template"
www.souleateritalia.it | www.fmaitalia.net | www.bakanashumi.it

seihaofirma
 
Ultima modifica di HaoAsakura il Domenica, 22 Marzo 2009, 18:18, modificato 1 volta in totale 
avatar
blank.gif HaoAsakura Sesso: Uomo
Appassionato
Appassionato
 
Età: 30
Registrato: Giugno 2008
Messaggi: 512
  • Torna in cima Vai a fondo pagina
 

Messaggio Re: Fixare Immagini Negli Angoli

#8  FedericoBiccheddu Domenica, 22 Marzo 2009, 18:22

No HaoAsakura, devi fare:

<div class="classe_alta"><img src="LINK_IMMAGINE_ALTO_SINISTRA"></div>
<div class="classe_bassa"><img src="LINK_IMMAGINE_BASSO_DESTRA"></div>



 




Versione di IP: 1.3.15 (αlphα)

Server: Linux

____________
Per favore inserisci nel tuo Profilo la versione di Icy Phoenix e il Server utilizzato.
 
avatar
italia.png FedericoBiccheddu Sesso: Uomo
Veterano
Veterano
 
Età: 20
Registrato: Dicembre 2007
Residenza: Sant'Antioco
Messaggi: 2593
  • Torna in cima Vai a fondo pagina
 

Messaggio Re: Fixare Immagini Negli Angoli

#9  HaoAsakura Domenica, 22 Marzo 2009, 19:31

per l'immagine topleft ho risolto!

CSS
.topleft{
background: url(/templates/mg_themes/images/p_blue/bg_topleft.gif);
position: absolute;
top: 0;
left: 0;
z-index: -1; /* # sta per i numero dei livelli */
}

OVERALL HEADER
<div class="topleft"><img src="{FULL_SITE_PATH}{SPACER}" alt="" width="372" height="372" /></div>


ma per la bottom right ho il seguente problema

screenshot051

non dovrebbe essere li ... ma dove sta il footer

se scrollo succede questo

screenshot052

Ho eseguito gli stessi passaggi

CSS
.bottomright{
background: url(/templates/mg_themes/images/p_blue/bg_bottomright.gif);
position: absolute;
bottom: 0;
right: 0;
z-index: -1; /* # sta per i numero dei livelli */
}

OVERALL HEADER
<div class="bottomright"><img src="{FULL_SITE_PATH}{SPACER}" alt="" width="372" height="372" /></div>

Per scrupolo ho provato a mettere il codice di cui sopra nel OVERALL FOOTER subito prima de </body>, ma niente da fare!
Rimane il problema che si vede dagli screen!
Stranamente non si posizione in fondo alla pagian del browser ... T_T
 




Versione di IP: 1.3.0.53a

Server: Linux

____________
Icy Phoenix "HaoAsakura Style Template"
www.souleateritalia.it | www.fmaitalia.net | www.bakanashumi.it

seihaofirma
 
avatar
blank.gif HaoAsakura Sesso: Uomo
Appassionato
Appassionato
 
Età: 30
Registrato: Giugno 2008
Messaggi: 512
  • Torna in cima Vai a fondo pagina
 

Messaggio Re: Fixare Immagini Negli Angoli

#10  FedericoBiccheddu Domenica, 22 Marzo 2009, 19:40

Quello è vero, potresti invertire lo sfondo, mettere quell'immagine come sfondo nel body, e l'immagine ripetuta che hai ora nel body, metterlo in un div, che apri nell'overall_header e chiudi nell'overall_footer
 




Versione di IP: 1.3.15 (αlphα)

Server: Linux

____________
Per favore inserisci nel tuo Profilo la versione di Icy Phoenix e il Server utilizzato.
 
avatar
italia.png FedericoBiccheddu Sesso: Uomo
Veterano
Veterano
 
Età: 20
Registrato: Dicembre 2007
Residenza: Sant'Antioco
Messaggi: 2593
  • Torna in cima Vai a fondo pagina
 

Messaggio Re: Fixare Immagini Negli Angoli

#11  HaoAsakura Lunedì, 23 Marzo 2009, 07:10

FedericoBiccheddu ha scritto: [Visualizza Messaggio]
Quello è vero, potresti invertire lo sfondo, mettere quell'immagine come sfondo nel body, e l'immagine ripetuta che hai ora nel body, metterlo in un div, che apri nell'overall_header e chiudi nell'overall_footer


E' una buonissima soluzione!
Il problema è che dietro la shoutbox (Il Muro) mi si vedrebbe un pezzetto dello sfondo. (non so se ti è mai capitato!)
Se esistesse un modo di "tappare" lo sfondo dietro la shoutbox ... si risolverebbe questo inconveniente!
 




Versione di IP: 1.3.0.53a

Server: Linux

____________
Icy Phoenix "HaoAsakura Style Template"
www.souleateritalia.it | www.fmaitalia.net | www.bakanashumi.it

seihaofirma
 
avatar
blank.gif HaoAsakura Sesso: Uomo
Appassionato
Appassionato
 
Età: 30
Registrato: Giugno 2008
Messaggi: 512
  • Torna in cima Vai a fondo pagina
 

Messaggio Re: Fixare Immagini Negli Angoli

#12  FedericoBiccheddu Lunedì, 23 Marzo 2009, 16:06

Non ho capito il tuo problema relativo allo shoutbox
 




Versione di IP: 1.3.15 (αlphα)

Server: Linux

____________
Per favore inserisci nel tuo Profilo la versione di Icy Phoenix e il Server utilizzato.
 
avatar
italia.png FedericoBiccheddu Sesso: Uomo
Veterano
Veterano
 
Età: 20
Registrato: Dicembre 2007
Residenza: Sant'Antioco
Messaggi: 2593
  • Torna in cima Vai a fondo pagina
 

Messaggio Re: Fixare Immagini Negli Angoli

#13  Limun Mercoledì, 25 Marzo 2009, 13:32

[quote user="HaoAsakura" post="25167"]
FedericoBiccheddu ha scritto: [Visualizza Messaggio]


Il problema è che dietro la shoutbox (Il Muro) mi si vedrebbe un pezzetto dello sfondo. (non so se ti è mai capitato!)
Se esistesse un modo di "tappare" lo sfondo dietro la shoutbox ... si risolverebbe questo inconveniente!


prova dare un occiata a questo
http://www.icyphoenix.com/viewtopic.php?f=21&t=4881

forse ti aiutera
 




Versione di IP: 1.2.0.27x

Server: Linux
 
avatar
croatia.png Limun Sesso: Uomo
Visitatore
Visitatore
 
Età: 43
Registrato: Dicembre 2008
Residenza: Opatija
Messaggi: 66
  • Torna in cima Vai a fondo pagina
 

Messaggio Re: [RISOLTO] Fixare Immagini Negli Angoli

#14  HaoAsakura Mercoledì, 01 Aprile 2009, 17:28

Grazie Limun.

Cmq ... per la parte bassa della board ... ho rinunciato!
Mi accontento della parte alta ^^
 




Versione di IP: 1.3.0.53a

Server: Linux

____________
Icy Phoenix "HaoAsakura Style Template"
www.souleateritalia.it | www.fmaitalia.net | www.bakanashumi.it

seihaofirma
 
avatar
blank.gif HaoAsakura Sesso: Uomo
Appassionato
Appassionato
 
Età: 30
Registrato: Giugno 2008
Messaggi: 512
  • Torna in cima Vai a fondo pagina
 


NascondiQuesto argomento è stato utile?
Condividi Argomento
Segnala via email Facebook Twitter Windows Live Favorites MySpace del.icio.us Digg SlashDot google.com LinkedIn StumbleUpon Blogmarks Diigo reddit.com Blinklist co.mments.com
technorati.com DIGG ITA linkagogo.com meneame.net netscape.com newsvine.com yahoo.com spurl.net Fai Informazione Ok Notizie Segnalo Bookmark IT fark.com feedmelinks.com
Inserisci un link per questo argomento
URL
BBCode
HTML

Pagina 1 di 1