allineare immagine inserita da css

[squalogu]

Ho inserito un immagine da css, per poter collocare dei link in determinate posizioni sopra la stessa.

Ora mi sono accorto che collegandomi con l’Ipad al sito, l’immagine della Sardegna risulta essere allineata a destra (o così credo, perché esce dagli spazi), come posso allinearla o farla rientrare nei margini del template?




[allegato eliminato automaticamente dopo un anno]

[andreasuriani]

Ciao,
scusa ma non capisco la problematica.
Ho aperto il sito e non trovo niente di anomalo.


Puoi spiegarti meglio su cosa vuoi esattamente?
Il template che usi è responsive?
Se hai inserito delle tabelle, sono in % ?


And

[squalogu]

ciao, niente tabelle.


se visualizzi il sito da un ipad l'immagine della sardegna risulta spostata verso destra ed esce dalle misure del template.


si il templates è responsive.

[andreasuriani]

#regione {
   width: 350px;
   height: 450px;
   background: url(../images/sardegna.jpg) no-repeat;
   float: right;
}

[squalogu]

si esatto!


inserisco float center?

[andreasuriani]

no no ! Ti ho gia inserito il float right.


Prova ad inserirlo come te l'ho scritto io.

[squalogu]

ah ok.... fammi capire... ma l'immagine della sardegna usciva a destra..?
cosa c'era di sbagliato?


grazie tra poco provo a modificare come mi hai suggerito

[andreasuriani]

Si, era a dx.
Probabilmente un impostazione di base o altro, non saprei dirti cosi, dovrei indagare

[squalogu]

e ma è quello che non capisco, nella correzione avresti dovuto mettere left allora? invece hai messo right
float: right;
o sto facendo io confusione?

[andreasuriani]

Facciamo un passo alla volta:
Tu inserisci il codice, poi vediamo come il template lo assimila e poi ti spiego, ok?

[squalogu]

ok 

[squalogu]

Questo é il risultato ... Si sovrapone ...

[allegato eliminato automaticamente dopo un anno]

[squalogu]

Verdi posizioni del template... /?tp=1

[andreasuriani]

mmmm
Hai il bootstrap attivato
prova a ridurre il row-fluid
width:99%


ps: scusa se vado a tentativi ma non ho ipad e non riesco a vedere. Dal pc sembra tutto ok.

[squalogu]

}
#regione {
   width: 99%;
   height: 450px;
   background: url(../images/sardegna.jpg) no-repeat;
        float: right;
   }


no così è peggio....

[andreasuriani]

NOn ti ho detto di inserire quello nel #regione, ma quest'altro.



.row-fluid {
  margin-bottom: 20px;
  width: 99%!Important;
}

[squalogu]

niente cavolo... sempre immagine sovrapposta 

[adottauncane]

Ciao squalogu,
ma non puoi usare una misura fissa in px in un modulo inserito in una posizione percentuale. Quelle posizioni funzionano bene con contenuti che si adattano alla misura della finestra del browser. Altrimenti, con la misura fissa, o taglia a destra o si sovrappone a sinistra, come hai verificato.

[andreasuriani]

adottauncane ha ragione.


E' meglio utilizzare un immagine con % piuttosto che misure fisse. Speravo di risolverti il problema ma evidentemente non è possibile solo via css.
Ora sono con il cell, pertanto non posso fare niente!
A domani
And

[adottauncane]

Per esempio, se #regione la fai così:

Codice: [Seleziona]

#regione {    background: url("../images/sardegna.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);    height: 450px;    background-size: 100%;}
dovrebbe andare bene sempre, certo, avendo inserito le città, queste si scombinano. Secondo me devi trovare una soluzione alternativa, tipo inserire i nomi nell'immagine e magari sotto ripetere le città con i link.

[squalogu]

aspetta. nel frattempo ho cambiato l'immagine da jpg a png, quindi risolvo lo sfondo trasparente
adesso dovrei semplicemente centrare l'immagine..

[squalogu]

no, l'immagine DEVE rimanere fissa appunto per il discorso delle città che dovranno trovarsi sempre in quella posizione specifica.

[adottauncane]

Sì ho capito, solo che quella soluzione non va bene per quella posizione...
Puoi provare con Google maps, tipo qui:

dove inserisci il pallino puoi inserire nel fumetto anche un link, informazioni, ecc.

[squalogu]

così sembra che vada bene: #regione {
   width: 260px;
   height: 431px;
   background: url(../images/sardegna.png) no-repeat center;
   }




o sarebbe meglio:



left:50%;
top:50%;






ora dall'ipad si vede bene, e non sembra che le città subiscano variazioni di posizione


che dite?


ps.


non posso usare google  maps. devo usare la soluzione che ho attualmente..

[adottauncane]

Non ho l'ipad, sul computer si vede bene.

[squalogu]

non riesco a centrare l'immagine in modo responsive all'interno di quel modulo!

[adottauncane]

Prova così:

Codice: [Seleziona]

#regione {    background: url("../images/sardegna.png") no-repeat scroll center center rgba(0, 0, 0, 0);    height: 431px;    width: 290px;}

[squalogu]

(su ipad) esce a destra...


cavolo non vuole rimanere all'interno del template, non vuole allinearsi

[adottauncane]

E se fai la stessa larghezza in px in #regione dell'immagine? 238px? Adesso hai 290px.

[adottauncane]

Oppure metti width:100%

[squalogu]

Inserendo 100%. Non rischio che poi in base al dispositivo con il quäle mi collego poi le città si spostino?

[adottauncane]

No direi di no. Quella misura è subordinata alla percentuale della posizione e non si riferisce all'immagine. Semplicemente sta nel 31% della posizione. Comunque puoi verificare qui come si vede su uno smartphone.
http://www.sitiwebmobile.com/index.php
ipad ce l'hai.

[squalogu]

ok razie, allora ora provo e ti faccio sapere.


vorrei non ci fosse lo scrool orizontale

[squalogu]

ok ho inserito width:100%.
sembra che vada bene

da qua sembra però che tagli una parte dell'immagine....?

[adottauncane]

Da qua no... Non saprei.

[squalogu]

ciao, in pratica la stessa cosa succede nell'ipad, invece dal mio telefono samsung tutto ok.


secondo te devo ridurre le dimensioni dell'immagine? ma non avrebbe senso? cosa pensi?


allego screenshot

[allegato eliminato automaticamente dopo un anno]

[adottauncane]

Penso quello che ho già scritto prima. Voler inserire contenuti fissi in spazi pensati per essere responsive non è cosa buona...
Poi, certo, se rimpicciolisci l'immagine in modo che la più stretta delle visualizzazioni orizzontali sia a posto è meglio che niente.

[squalogu]

non ma il fatto non è neanche questo, perchè dal mio sansung che è piccolissimo e da un i phon4 e 5 si vede benissimo.


ma da qua: http://www.sitiwebmobile.com/index.php e dall'ipad da questo errore...