تسجيل الدخول | التسجيل | الأسئلة المتكررة
Anonymous

layout centered anche per mobile

+ إضافة رد

2 مشاركة صفحة 1 من 1


layout centered anche per mobile

بواسطة cronycles » الأربعاء يناير 16, 2013 10:32 am

Ciao a tutti, intanto mi presento, sono nuovo nel forum e abbastanza nuovo anche di css (nel senso che li ho ripresi dopo molto tempo). Avrei una richiesta che mi tartassa e che non riesco a risolvere:

ho bisogno di fare un layout con un'immagine di background 1000x620 px sempre centrata nel browser e poi sviluppare il sito dentro di essa. Ecco per questo ho realizzato cio:

CSS:
CODE: تحديد الكل
#container {
   width: 1000px; /*here the exact size of the background image*/
   height: 620px; /*here the exact size of the background image*/
   background: url(../img/website_bg_bw.jpg) no-repeat center center;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

.centered {
   position: absolute;
   margin: -310px 0 0 -500px;
   top: 50%;
   left: 50%;
}


HTML:
CODE: تحديد الكل
<body>
        <div  id="container" class="centered">
        ciao
        </div>
</body>


Ecco, in teoria va bene perche' mi ritrovo ciao dentro l'immagine di background ed e' fantastico.
Il punto pero e' che a me non va bene del tutto, perche sul mobile l'immagine viene tagliata. Mi spiego meglio: se voi prendete il vostro browser con questa configurazione e lo restringete tanto dall'angolo in basso dx verso l'altro a sx, notate che la background image entra nel bordo in alto e a sinistra e finisce fuori dalla visuale. Io invece ho bisogno di farla fermare sul bordo appena lo tocca. allora ho trovato quest'altra soluzione:

CSS:
CODE: تحديد الكل
#border{
   height:100%;
   min-width: 1000px;
   min-height: 620px;
   border:1px solid #000;
   background: url(../img/website_bg_bw.jpg) no-repeat center center;
}


HTML:
CODE: تحديد الكل
<body>
        <div  id="border">
        ciao
        </div>
</body>


Questa andrebbe ancora meglio (se restringete la background image si blocca sui bordi) ma non riesco a fare in modo di avere ciao all'interno dell'immagine e sviluppare quindi il sito dentro quella background image. Ho provato in tutti i modi e maniere ma non riesco ad unire queste due soluzioni.

a) ci avete capito qualcosa nella mia spiegazione strampalata? (sorry)
b) avete una qualche soluzione in merito/suggerimento?

Vi ringrazio in anticipo
ciao ciao
صورة العضو الشخصية

cronycles

  • مشاركات: 1
  • اشترك في: الأربعاء يناير 16, 2013 10:15 am

Re: layout centered anche per mobile

بواسطة XainPro » الاثنين يناير 21, 2013 10:33 am

ogni browser ha le proprie impostazioni non è possibile impostare uno sfondo generico che sarà centrato in tutti i browser che browser mobile si prendono di mira lo è Android, IOS ecc?
صورة العضو الشخصية

XainPro

  • مشاركات: 3933
  • اشترك في: الجمعة فبراير 17, 2012 8:10 pm


+ إضافة رد

صفحة 1 من 1