Valutazione discussione:
  • 0 voto(i) - 0 media
  • 1
  • 2
  • 3
  • 4
  • 5
rendere responsive pagina web app
#1
ciao Mattia,
avrei bisogno di rendere responsive l'index di QUESTA web app!

Mi puoi aiutare?

Grazie
Cita messaggio
#2
Per cominciare, se usi Firefox, puoi utilizzare la "Visualizzazione flessibile" (dal menù "Sviluppo" o usando la combinazione di tasti CTRL+Maiusc+M) per vedere come si vede con le varie risoluzioni.
Mattia!
Cita messaggio
#3
Ciao Mattia, 

ho scoperto che rimuovendo la specifica width dalle classe .container del file layout.css il container diventa di fatto responsive.
Il problema è che se provo a visualizzare la webapp dal mio iphone, i contenuti non vengono adattati come nell'immagine che ti allego.
Cosa occorre fare?


Allegati Anteprime
   
Cita messaggio
#4
Il problema è che le immagini (più il padding) in orizzontale occupano più spazio di 320 pixel (larghezza della risoluzione più comune usata dagli smartphone). Infatti, guardando il sito con lo smartphone in orizzontale, dovresti vederlo bene.
Per risolvere, puoi usare le media query e assegnare un padding orizzontale con un valore più basso o nullo, per le risoluzioni con una larghezza minore.
Un esempio del codice CSS da aggiungere sarebbe questo (naturalmente potresti dover aggiustare i valori in pixel):
Codice:
@media (max-width: 479px) { /* Regole CSS per risoluzioni con larghezza inferiore allo "standard" degli smartphone messi in orizzontale (480 pixel) */
    section ul.animelist li div {
        padding: 10px 5px; /* Mantengo un padding verticale di 10 pixel e diminuisco quello laterale a 5px */
    }
}
Mattia!
Cita messaggio
#5
Grazie, adesso mi metterò a fare qualche prova! Inoltre sarebbe necessario che l'header (con logo) e il footer (con le icone delle sezioni) restino sempre visibili, quella che scrolla è la parte centrale.
Cita messaggio
#6
Per avere l'header e il footer fissi puoi utilizzare il valore fixed della proprietà position di CSS.
Invece al contenuto devi togliere l'overflow valorizzato ad auto e aggiungere un padding in alto del valore dell'altezza dell'header e in basso del valore dell'altezza del footer.
Mattia!
Cita messaggio
#7
A questo punto mi interesserebbe diminuire lo spazio intorno alla foto dell'anime (nell'esempio in questione goku) e ridimensionare i 3 puntini di sospensione "...", i preferiti e le dimensioni della descrizione "aggiornato all'episodio..".
Cita messaggio
#8
Come sopra puoi utilizzare le media query e precisamente:
  • Per diminuire lo spazio intorno alla foto, devi diminuire il padding del div che la contiene.
  • Per diminuire le dimensioni delle immagini di sfondo (puntini e stella), puoi diminuire la dimensione dello span che le contiene e utilizzare la proprietà background-size con il valore cover.
  • Per diminuire le dimensioni del testo, diminuire il valore di font-size.
Mattia!
Cita messaggio
#9
(09-10-2014, 12:46)Mattia Ha scritto: Come sopra puoi utilizzare le media query e precisamente:
  • Per diminuire lo spazio intorno alla foto, devi diminuire il padding del div che la contiene.
  • Per diminuire le dimensioni delle immagini di sfondo (puntini e stella), puoi diminuire la dimensione dello span che le contiene e utilizzare la proprietà background-size con il valore cover.
  • Per diminuire le dimensioni del testo, diminuire il valore di font-size.

Ciao Mattia,
ho provato ad apportare le modifiche che mi hai detto, inoltre ho provato pure a cambiare il font della descrizione e dal mac lo vedo correttamente, mentre da iphone lo vedo come nell'immagine in allegato. (praticamente si perde il myriad che prima veniva letto correttamente).
- ho diminuito il padding del div item-img da 3 a 1
- non so come diminuire lo span che contiene stella e puntini e dove applicare background-size col valore cover.
- ho diminuito il valore font-size

nonostante ciò è ancora tutto molto largo (forse perchè nn si ridimensionano ancora stellina e puntini) e perchè prende il font sbagliato...


Allegati Anteprime
   
Cita messaggio
#10
Per quanto riguarda il carattere, c'è un errore dove includi il font Myriad, perché includi contemporaneamente anche il font FutuLt. Se vuoi inserirli entrambi, devi usare un'istruzione @font-face per ognuno.

Devi diminuire le dimensioni degli span con i selettori CSS ".item-drag span" e ".item-rate span".
Agli stessi span devi aggiungere background-size col valore cover.
Mattia!
Cita messaggio
#11
ho apportato le modifiche che mi hai detto, adesso i font si vedono correttamente ma stella e puntini restano larghi... idem per lo spazio intorno alle thumb degli anime che è ancora parecchio. Potresti vedere se il discorso degli span l'ho fatto correttamente?
Cita messaggio
#12
Per quanto riguarda il background-size con valore cover, lo hai fatto correttamente, anche se potevi utilizzare la stessa istruzione senza crearne una nuova.
Hai dimenticato di mettere nella media query l'istruzione per dare una dimensione minore ai due span.
Mattia!
Cita messaggio
#13
ehmm, se mi dici come fare lo faccio! Smile
Cita messaggio
#14
Dentro alla media query:
Codice:
@media only screen and (max-width: 480px)

Aggiungi (naturalmente i valori in pixel sono stati messi a caso):
Codice:
.item-drag span{
    width: 20px;
    height: 20px;
}
.item-rate span{
    width: 20px;
    height: 20px;
}
Mattia!
Cita messaggio
#15
Allora, ho applicato le istruzioni che mi hai dato ed settato i valori appropriati. A questo punto:
- la header (comprensiva del box con la scritta "tutti le serie anime in italiano") è troppo alta e occupa troppo spazio nel display. Attualmente occupa circa 300 px di altezza e dovrebbe occuparne almeno 210 px mantenedo le proporzioni che ha adesso.
- lo spazio intorno alle thumb degli anime è ancora tanto.
- il testo della descrizione nell'immane iniziale stava in una riga, dall'iphone la vedo sempre su due righe (e non credo sia solo questione di grandezza del testo). Probabilmente bisogna stringere il margine tra la thumb e il testo.
- ho sistemato le dimensioni dei puntini di sospensione, ma adesso ne vedo solo uno.
- ho sistemato le dimensioni della stellina, ma se ci fai caso subito sotto si intravede la punta della stella ripetuta. Inoltre non funziona l'attivazione/disattivazione della stellina.
- anche l'effetto di selezione dell'intera riga/box del manga non funzia ancora. Come dovrei fare?

Ti allego png di come la vedo e di come dovrebbe vedersi.

Grazie


Allegati Anteprime
       
Cita messaggio
#16
  • Header: come per gli span devi renderlo più basso all'interno della media query e applichi il valore cover a background-size.
  • Spazio intorno alle immagini: primo punto di questo messaggio.
  • Spazio tra immagine e testo: c'è sempre il padding del div come in quello delle immagini.
  • Puntini di sospensione: lo span è quadrato e quindi si vede solo il puntino centrale (la larghezza deve avere un valore maggiore dell'altezza).
  • Stella: con il valore cover di background-size non puoi usare le sprite, ma devi usare due immagini distinte.
  • Selezione riga: con il selettore "section ul.animelist li a:hover" assegni le caratteristiche della riga selezionata.
Mattia!
Cita messaggio
#17
Ciao Mattia,
1) allora sono riuscito a ridurre header e h1, anche se non sono sicuro di averlo fatto correttamente! Smile
praticamente ho messo questo:
Codice:
header{
    height: 120px;
    background-size:cover;
}
h1{
    height: 30px;
    background-size:cover;
    }
h2.logo{
    width: 55px;
    height: 54px;
    background-size:cover;
        }
all'interno della media query (anche se adesso il logo è leggermente decentrato) e dato che tra l'header e h1 e la parte centrale c'era dello spazio bianco ho modificato il margin top di section:
Codice:
section{
    background:#2f2f2f;
    overflow:auto;
    padding-bottom:138px;
    margin-top:120px;
}

2) pur diminuendo il padding del div delle immagini e della descrizione non mi cambia nulla.
il codice che ho modificato è questo:
Codice:
.item-img img{
    padding:-4px;
    width:67px;
    background:#fff;
}
.header-update{
    padding:-2px;
        color:#2f2f2f;
    font-family:FutuLt,MyriadPro-BoldCond,helvetica,arial,sans-serif;
    display:block;
    font-size:13px;
}
3) ho sistemato i puntini di sospensione e diviso la stella in due file diversi. Come devo fare per attivare la on al click/tap? (nn ricordo al momento).
4) ho messo il selettore ma non succede nulla, tra l'altro ce n'era uno abbastanza simile:
Codice:
section ul.animelist li:hover{
    /*background:#ff8400;*/
}
section ul.animelist li a:hover{
    /*background:#ff8400;*/
}
5) con la stessa logica dell'header, volevo rimpicciolire il footer e ho dunque provato a inserire all'interno della media query questo codice:
Codice:
footer{
    height: 90px;
    background-size:cover;
}
footer ul{
    height: 90px;
    background-size:cover;
}
footer ul li{
    height: 90px;
    background-size:cover;
}
footer ul li a{
    height: 90px;
    background-size:cover;
}
footer ul li a.foot-menu-puntate{
    width: 50px;
    height: 60px;
    background-size:cover;
}
footer ul li a.foot-menu-preferiti{
    width: 50px;
    height: 49px;
    background-size:cover;
}
footer ul li a.foot-menu-cerca{
    width: 50px;
    height: 49px;
    background-size:cover;
}
footer ul li a.foot-menu-impostazioni{
    width: 50px;
    height: 49px;
    background-size:cover;
}

ma mi ha sballato tutto! Inoltre la selezione di ogni sezione la vedo da safari del mac, ma non sul safari dell'iphone. Sapresti dirmi il perché?

Per il momento è tutto, ti prego di darmi na mano! smilie
Cita messaggio
#18

  1. Sembra corretto. Devi utilizzare background-cover solo dove c'è un'immagine di sfondo.
  2. Devi modificare il padding del div che contiene l'immagine e non dell'immagine.
  3. Dipende cosa deve succedere quando clicchi sulla stella. Se devi eseguire un'operazione complessa, devi utilizzare l'evento onClick di JavaScript.
  4. Prova a utilizzare "section ul.animelist li:hover" (naturalmente decommentando le istruzioni). Dovrebbe funzionare correttamente con tutti i browser moderni.
  5. Mi sembra che il footer venga visualizzato correttamente con la risoluzione con larghezza di 320 pixel o 480 pixel. Cosa vedi di sballato?
Mattia!
Cita messaggio
#19
1) Ok, ma il logo resta decentrato, sai dirmi perché?
2) metto il padding nel div item-img ma continua a non cambiare nulla.
3) dovrà accadere che si attiva la stellina se è uno dei preferiti, ma questa cosa andrà vista in un secondo momento in programmazione.
4) ho decommentato e adesso funziona sul safari del mac, ma continuo a non vederlo da iphone (stesso discorso con la selezione della sezione nel footer). Dovrebbe anche funzionare che i 3 punti e la descrizione diventano bianchi alla selection (come nell'immagine che avevo allegato inizialmente). Inoltre dovrei fare in modo che al click/tap dei tre punti mi slittil'elenco e mi compaia del testo (come nell'immagine in allegato).
5) il footer adesso si vede bene, ma occupa troppo spazio, vorrei renderlo alto almeno 80/90px e ridimensionare tutto in maniera proporzionata (così come ho fatto per l'header).


Allegati Anteprime
   
Cita messaggio
#20

  1. Perché è centrato posizionato in maniera assoluta sulle dimensioni di una risoluzione grande. Dovresti togliere il posizionamento assoluto, far prendere all'h2 la larghezza di tutto il suo contenitore e centrare lo sfondo al suo interno.
  2. Non devi mettergli un padding negativo e, se ancora non funziona, usa il selettore "section ul.animelist li div.item-img", invece del solo ".item-img".
  3. Per ora ti basta sapere che devi utilizzare l'evento onClick di JavaScript che eseguirà un operazione in AJAX e, se va a buon fine, cambierà la classe dello span.
  4. Per farlo funzionare con gli schermi touch dovresti provare ad aggiungere lo stesso selettore, ma, al posto di hover, devi mettere active. Per cambiare il colore, basta che aggiungi anche l'istruzione color all'interno del selettore con l'hover. Per l'effetto al click, devi usare JavaScript per aggiungere o togliere la visibilità all'elemento che conterrà il testo.
  5. Togli l'altezza a tutti gli elementi del footer (footer, ul e [l]li[/i]) e lascialo solo al tag a. Nella media query aggiungi il selettore del tag a del footer con un'altezza minore.
Mattia!
Cita messaggio
#21
mi stavi più simpatico quando mi incollavi pezzi di codice per farmi degli esempi! smilie

Cmq in breve:
1) ho tolto la posizione assoluta e inserito questo:
Codice:
h2{
width:640px;
background:#999 center 0;
}
ma probabilmente è sbagliato...
2) ho risolto col padding laterale e superiore, restano i trattini che sono troppo distanti dalla foto, dovrei tirarli un po' su. Ho provato con padding-bottom ma non funzia.
3) OK
4) adesso dovrebbe funzionare al tap, anche se continuo a non vederlo correttamente nell'app (probabilmente perché collega il tap ad un collegamento e prova a portarmi da un'altra parte senza darmi il tempo di vedere l'effetto). I tre puntini non riesco a farli diventare bianchi nella selezione e neri quando li tappo. Per il javascript non ho idea su cosa fare.
5) ho tolto l'altezza e modificata solo in a dentro la mediaquery, ma le icone e le scritte sono abbastanza decentrate anche qui.
6) per le sezioni del menu del footer, vorrei fare in modo che tappando la sezione, mi resti selezionata con la fascetta superiore arancio. (almeno capisco se così si vede da app).
Cita messaggio
#22

  1. Elimina il selettore "h2", visto che c'è "h2.logo". Dentro a "h2.logo" elimina tutte le istruzioni tranne quelle relative allo sfondo e il text-indent.
  2. A ".item-img img" aggiungi la proprietà display con valore block (in questo modo dovrebbe eliminare uno spazio aggiuntivo sotto l'immagine).
  3. OK.
  4. Per vedere l'effetto dell'active, puoi disabilitare il link aggiungendo al tag a nel codice HTML onclick="return false;". Per cambiare i punti, dentro il selettore con l'active devi inserire la proprietà background-image con il percorso dell'immagine dei punti di colore diverso.
  5. Dentro al selettore del tag a nella media query devi inserire un valore di line-height minore in modo che il testo sia più in alto.
  6. Puoi disabilitare il link come ti ho spiegato al punto 4 e aggiungere un selettore con l'active con le istruzioni per aggiungere il bordo in alto.
Mattia!
Cita messaggio
#23
(14-10-2014, 14:22)Mattia Ha scritto:
  1. Elimina il selettore "h2", visto che c'è "h2.logo". Dentro a "h2.logo" elimina tutte le istruzioni tranne quelle relative allo sfondo e il text-indent.
  2. A ".item-img img" aggiungi la proprietà display con valore block (in questo modo dovrebbe eliminare uno spazio aggiuntivo sotto l'immagine).
  3. OK.
  4. Per vedere l'effetto dell'active, puoi disabilitare il link aggiungendo al tag a nel codice HTML onclick="return false;". Per cambiare i punti, dentro il selettore con l'active devi inserire la proprietà background-image con il percorso dell'immagine dei punti di colore diverso.
  5. Dentro al selettore del tag a nella media query devi inserire un valore di line-height minore in modo che il testo sia più in alto.
  6. Puoi disabilitare il link come ti ho spiegato al punto 4 e aggiungere un selettore con l'active con le istruzioni per aggiungere il bordo in alto.
1) ho eliminato le istruzioni e lasciato background e text-indent eppure il logo continua ad essere decentrato.
2) OK
3) OK
4) ho aggiunto l'istruzione onlclick (dovevo aggiungerla dopo href o dovevo metterla al posto suo?), ma non riesco ancora a vedere da iphone l'effetto al tap. OK per i 3 puntini bianchi di selezione, come metto quelli neri di quando i 3 punti sono tappati/selezionati?
5) OK. Sono riuscito a rimpicciolire le iconcine, tirare su il testo con line-height e riallineato le iconcine modificando background-position. Spero di aver fatto bene.
6) L'effetto active c'è già, ma come per i box degli anime non riesco a vederlo da iphone. Inoltre, in questo caso vorrei appunto mantenere l'effetto "selezionato" dopo al click/tap
7) Avevo dimenticato di mettere il baloon "informazioni" in alto a dx. Ho provato a inserirlo come h3, ma anche qui sbaglio qualcosa e non riesco a centrarlo in altezza nell'header. La soluzione migliore?
Cita messaggio
#24
1) Togli la larghezza a "h2.logo" e lascia solo l'altezza (in questo modo rimarrà largo al 100% e potrai diminuire la grandezza del logo con l'altezza).
4) Cliccando sulla riga cosa deve succedere? Deve solo colorare la riga? Quando si clicca sui puntini cosa deve succedere (non credo di aver capito i due stati)? Probabilmente non ho capito cosa intendi per "tab"; quando col dito tocchi l'iPhone è come se facessi un clic sul computer.
6) Dipende tutto da cosa deve succedere dopo che hai cliccato sulle voci del menù del footer. Se cambi pagina, basta che in quella pagina assegni una classe alla voce selezionata che mostra la riga.
7) Io lo vedo in alto a destra. Se vuoi che l'immagine sia allineata verticalmente al centro, devi aumentare l'altezza e posizionare l'immagine di sfondo al centro.
Mattia!
Cita messaggio
#25
(15-10-2014, 12:44)Mattia Ha scritto: 1) Togli la larghezza a "h2.logo" e lascia solo l'altezza (in questo modo rimarrà largo al 100% e potrai diminuire la grandezza del logo con l'altezza).
4) Cliccando sulla riga cosa deve succedere? Deve solo colorare la riga? Quando si clicca sui puntini cosa deve succedere (non credo di aver capito i due stati)? Probabilmente non ho capito cosa intendi per "tab"; quando col dito tocchi l'iPhone è come se facessi un clic sul computer.
6) Dipende tutto da cosa deve succedere dopo che hai cliccato sulle voci del menù del footer. Se cambi pagina, basta che in quella pagina assegni una classe alla voce selezionata che mostra la riga.
7) Io lo vedo in alto a destra. Se vuoi che l'immagine sia allineata verticalmente al centro, devi aumentare l'altezza e posizionare l'immagine di sfondo al centro.

1) su h2.logo non c'è più la larghezza, ho lasciato solo background e text-indent. Se tolgo la larghezza nella mediaquery mi allarga in logo in maniera spaventosa.
4) Cliccando sulla riga (quando funzionerà tutto correttamente) si collegherà ad un'altra pagina, ma prima di portarmici al tap (e con tap intendo "tocco col dito") sarebbe figo se si vedesse la selezione arancione. Se invece clicci SOLO sui 3 puntini, questi si selezionano e mi viene mostrato dell'ulteriore testo di descrizione che prima veniva nascosto (come ti avevo fatto vedere nella png di QUESTO msg).
6) sempre ad app funzionante mi porterà nella sezione cliccata/tappata dove resterà SELEZIONATA la sezione dove mi trovo.
7) ho provato a mettere center 0 nell'istruzione background ma non è cambiato nulla, potresti incollarmi il codice corretto?

Grazie
Cita messaggio
#26
1) Oltre a togliere la larghezza, devi mettere il valore contain a background-size.

4) L'unico modo che mi viene in mente per lo sfondo arancione al clic è di utilizzare l'active o eventualmente l'hover per gli schermi touch.
Per quanto riguarda i puntini, devi aggiungere un evento onclick che richiamerà una funzione JavaScript che potrebbe essere una cosa del genere:
Codice:
function openDescrizione(a, d) {
    a.className = 'nome_della_classe_per_i_puntini_selezionati';
    d.style.display = 'block';
}

Il codice HTML dei puntini sarà una cosa del genere:
Codice:
<a href="#" onclick="openDescrizione(this, document.getElementById('id_del_div_col_testo');return false;">Puntini</a>

7) Anche qui devi mettere il valore contain a background-size e, invece di "center 0", metti "center center".
Mattia!
Cita messaggio
#27
(15-10-2014, 17:44)Mattia Ha scritto: 1) Oltre a togliere la larghezza, devi mettere il valore contain a background-size.

4) L'unico modo che mi viene in mente per lo sfondo arancione al clic è di utilizzare l'active o eventualmente l'hover per gli schermi touch.
Per quanto riguarda i puntini, devi aggiungere un evento onclick che richiamerà una funzione JavaScript che potrebbe essere una cosa del genere:

Codice:
function openDescrizione(a, d) {
    a.className = 'nome_della_classe_per_i_puntini_selezionati';
    d.style.display = 'block';
}

Il codice HTML dei puntini sarà una cosa del genere:

Codice:
<a href="#" onclick="openDescrizione(this, document.getElementById('id_del_div_col_testo');return false;">Puntini</a>

7) Anche qui devi mettere il valore contain a background-size e, invece di "center 0", metti "center center".

1) OK. Ho risolto, aggiungendo un margin-top di qualche pixel (per abbassare il logo dal margine superiore).
4) per l'evento javascript ho sicuramente sbagliato qualcosa.
6) HAI DIMENTICATO DI RISPONDERE A QUESTO PUNTO.
7) OK
Cita messaggio
#28
4) Hai aperto e chiuso subito il tag a. Puoi fare tre cose:
  1. Metti lo span dei punti all'interno del tag a.
  2. Invece di usare lo span per i puntini, utilizzi il tag a a cui assegni la classe dello span.
  3. Assegni l'evento onclick direttamente allo span (potrebbe non funzionare con le vecchie versioni dei browser, ma non dovrebbe essere un problema per un'app.

6) Non ho risposto, perché avevo già scritto nel messaggio precedente che, cambiando pagina, basta assegnare una classe (che farà comparire il bordo arancione) alla voce del menù selezionata.
Mattia!
Cita messaggio
#29
4) ho provato la terza opzione, ma continua a nn funzionare, non potresti darmi te il codice esatto?
6) in quello che dici stai valutando il fatto che se ad esempio sarò nella sezione "preferiti", il bordo arancione sarà fisso (per far capire che siamo dentro quella sezione).

Grazie
Cita messaggio
#30
4) Ecco il codice:
Codice:
<div class="item-drag">
    <span class="item-drag span" onclick="openDescrizione(this, document.getElementById('extra'));return false;"></span>
</div>

6) Sì, quando sarai nella pagina dei "Preferiti", la voce del menù "Preferiti" avrà la classe che assegna il bordo arancione.
Mattia!
Cita messaggio


Discussioni simili
Discussione Autore Risposte Letto Ultimo messaggio
  rendere pagina responsive Chandler 2 5.052 13-12-2014, 21:55
Ultimo messaggio: Chandler
  sito in parallax responsive Chandler 9 26.228 27-06-2014, 12:18
Ultimo messaggio: Mattia
  Responsive Filemanager: sovrascrivere immagini con drag & drop Chandler 13 17.273 19-06-2014, 21:44
Ultimo messaggio: jimmyfm
  [SEO] Titolo pagina giancarlo 1 3.740 17-12-2013, 07:31
Ultimo messaggio: Mattia
  Form centrato responsive Chandler 10 15.493 01-12-2013, 23:37
Ultimo messaggio: Chandler
  Controllare larghezza pagina Chandler 3 7.373 30-05-2012, 17:15
Ultimo messaggio: Mattia
  Come creare una semplicissima pagina HTML! Naroku95 0 3.041 31-10-2011, 13:48
Ultimo messaggio: Naroku95
Exclamation Problema di visualizzazione pagina (animatedcollapse e jquery-1.4.3.min) turbogiangi 7 12.385 29-11-2010, 09:07
Ultimo messaggio: Mattia
  Pagina di Benvenuto (Entra o Esci) veeto 3 11.235 02-12-2008, 10:06
Ultimo messaggio: Mattia

Vai al forum:


Utenti che stanno guardando questa discussione: 1 Ospite(i)