Joomla.it Forum

Joomla! 1.5.x (versione con supporto terminato) => Joomla! 1.5 => I Template di Joomla 1.5.x => : alfeo 08 Aug 2011, 14:06:20

: css sprite come inserirlo?
: alfeo 08 Aug 2011, 14:06:20

sto perdendo la testa per modificare il template mettendoci le immagine sprite<qualcuno mi può indirizzare sento che mi sto perdendo in fesserie...
allora nel css del template ora c'è:

:

#bgr {
    padding: 0;
    margin: 0;
    background: transparent url(../images/bgr.png) top center repeat-y;
}
ho creato l'immagine sprite.png inserendo tutte le immagini e l'immagine in oggetto equivale alla posizione width:89px; height:128px; background-position:-106px -2px;

quindi dovrei cambiare il codice in:

:

#bgr {
     padding: 0;
     margin: 0;
     background: transparent url(../images/sprite.png) width:89px; height:128px; background-position:-106px -2px; top center repeat-y;
 }Ma il problema è che non funziona... l'immagine non si sposta nella posizione che scrivo... devo inserire qualcos altro?

: Re:css sprite come inserirlo?
: ariess 08 Aug 2011, 14:59:28

hai inserito abbastanza, ma nel modo sbagliato....
ricontrolla la sintassi e sopratutto i ;

: Re:css sprite come inserirlo?
: alfeo 08 Aug 2011, 18:39:31

io onestamente vado ad intuito di programmazione non ci capisco nulla, meglio così?

:

#bgr {
    padding: 0;
    margin: 0;
    background: transparent;
    background-image:url(../images/sprite.png);
    background-position:-106px -2px;
    background-position:top center;
    background-repeat:repeat-y;
}

: Re:css sprite come inserirlo?
: ariess 08 Aug 2011, 18:47:12

...molto meglio.

solo che, o usi:
    background-position:-106px -2px;

o usi quest'altro:
    background-position:top center;


non entrambi insieme  ;)

....e togli
        background: transparent;
 

: Re:css sprite come inserirlo?
: alfeo 08 Aug 2011, 19:25:07

Quindi ricapitolando basta che al posto del codice CSS

:

#bgr {
    padding: 0;
    margin: 0;
    background: transparent url(../images/bgr.png) top center repeat-y;
}

metto

:

#bgr {
    padding: 0;
    margin: 0;
    background-image:url(../images/sprite.png);
    background-position:-106px -2px;
    background-repeat:repeat-y;
}
questo vale per tutte le immagini che inserisco nel css e basta? non si deve modificare nessun file php?

: Re:css sprite come inserirlo?
: ariess 08 Aug 2011, 21:05:07

esatto.

volendo puoi scrivere anche

:

#bgr {
    padding: 0;
    margin: 0;
    background: url(../images/sprite.png)repeat-y -106px -2px transparent;
}
scritto in modo più compatto, ma ha lo stesso effetto.

: Re:css sprite come inserirlo?
: alfeo 09 Aug 2011, 07:38:32

Niente ho provato ad inserire qual codice ma non funge, forse sono io che non riesco a capire qualcosa...
ora do tutte le informazioni possibili e immaginabili.
Il template è td zanet
ho inserito l'immagine sprite.png nella cartella delle immagini (è ancora lì se volete provare con pagespeed a modificare al volo io non ci sono nemmeno riuscito)
ho sostituito il codice

:

#left h3, #right h3{font-family:Tahoma, Verdana, Arial, sans-serif;width:auto;color:#454545;font-size:11px;height:28px;text-decoration:none;text-align:left;padding:0 10px;background:url(../images/h3.png) repeat-x left top;font-weight:bold;line-height:26px;margin:5 0 5 -5px;}con

:

#left h3, #right h3{font-family:Tahoma, Verdana, Arial, sans-serif;width:auto;color:#454545;font-size:11px;height:28px;text-decoration:none;text-align:left;padding:0 10px;background:url(../images/sprite.png) repeat-x 0 -134px;font-weight:bold;line-height:26px;margin:5 0 5 -5px;}ma niente non funziona
l'immagine è in ..image/sprite.png le coordinate sono background-position: 0 -134px; width: 1px; height: 27px;
Qualcuno riesce a far uscire questa immagine? Per tutte il resto vedo io ma non riesco a cominciare

: Re:css sprite come inserirlo?
: Criztian 09 Aug 2011, 08:28:48

Inizia procedendo per gradi:
- rimuovi la parola chiave transparent e vedi se funziona
- riparti da un codice inline minimale e aggiungi un pezzo alla volta verificando cosa succede ad ogni passo

Ovviamente se non ti visualizza nulla anche con un codice ridotto al minimo vuol dire che hai sbagliato qualcosa all'origine.

Se metti solo l'immagine con width e height definite da te funziona?

Altrimenti considera che se lavori con valori assoluti non dovresti usare un valore negativo (-134px). Prova togliere il segno negativo come prima cosa e vedi cosa succede.
Gli assi iniziano in alto a sinistra dell'immagine e scendono in positivo.
In caso specifica "position: absolute;" o "relative;" in base alle tue necessità. Se hai già assegnato una posizione nell'immagine in precedenza allora potrai spostarti con "relative", ma solo dopo. Credo che non sia il tuo caso, quindi prova con absolute.

: Re:css sprite come inserirlo?
: alfeo 09 Aug 2011, 11:56:03

cancellando tutto e scrivendo solo

:

url("../images/sprite.png") repeat scroll transparent[code][b][/code]
l'immagine si vede ma non mi considera la posizione
se aggiungo la posizione così

:

url("../images/sprite.png") repeat scroll 0 -134px transparentnon si vede piu nemmeno il background se invece metto solo lo 0 si vede una strisciolina
Sto impazzendo dove sbaglio?

ci sono aggiornamenti mi prende la posizione del backround ma la grndezza no e di conseguenza non mi ripete solo una porzione delllo sprite.png ma tutto lo sprite completo.
come dico al css la grandezza dell'immagine da moltiplicare? (repeat)