Problematica CSS (tag html,body)

Discussione in 'HTML e CSS' iniziata da MTeo1994, 8 Novembre 2018.

  1. MTeo1994

    MTeo1994 Nuovo Utente

    Registrato:
    8 Novembre 2018
    Messaggi:
    4
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    Buongiorno,
    scrivo questo post poiché dopo 2 mesi non ho ancora trovato una soluzione nonostante avessi chiesto aiuto a programmatori da tutte le parti del globo.

    Sto programmando un sito nel quale mi si presenta questa problematica...

    Innanzitutto il sito è formato da una barra di navigazione con ancore, subito sotto uno slideshow, una gallery ed un form contatti.

    CSS da prendere in oggetto è:
    HTML:
    html,body{
    width:100%;
    height:100%;
    }
    Una volta finito di programmarlo, il sito web per dekstop è filato liscio come l'olio, ma nel momento in cui apro il sito tramite smartphone (e non facendo tramite ispeziona elemento), gli elementi della pagina si adattano in continuazione muovendo gli elementi quindi rendendo inutilizzabile il sito.

    Fino ad un anno fa riuscivo a colmare questa problematica usando la funzione overflow quindi:

    su mobile:
    HTML:
    html,body{
    width:100%;
    height:100%;
    overflow-x:hidden;
    }
    ad oggi se faccio questo, mi si sballano continuamente le ancore, quindi se avevo creato un ancora (tipo #contatti) mi rimanda alla homepage o a metà sito, questo sia su smartphone che su desktop, e non più alla fine come programmato... in più il sito diventa impossibile da scrollare da smartphone, in quanto diventa lentissimo lo scorrimento.

    Chiedo aiuto perchè penso di essere al limite della pazienza, tra poco butto via il pc.

    GRAZIE A CHI MI AIUTERA'.

    Cordiali Saluti.
    Marco.
     
    Ultima modifica di un moderatore: 8 Novembre 2018
  2. Max 1

    Max 1 Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    29 Febbraio 2012
    Messaggi:
    3.323
    Mi Piace Ricevuti:
    253
    Punteggio:
    83
    Sesso:
    Maschio
    Aiutarti a sistemare un sito per tutte le risuluzioni senza poterci mettere le mani sopra è già difficile poi con quelle quattro regole css che hai postato diventa proprio impossibile.
    L'unica cosa che ti posso dire è di trasformare il sito in responsive! Se non sai come fare bisogna che tu legga qualche guida anche di quelle che puoi trovare in rete

    [MOD]
    Da regolamento del forum, come tutti noi sei tenuto ad usare il tag code.gif quando posti del codice, oppure la funzione codice dalla barra degli strumenti
    box inserisci 2.png.JPG
    Inoltre ti prego di leggere attentamente il regolamento generale del forum e quello di sezione dove posti
    Grazie
    Per questa volta te lo sistemo io ma mi raccomando per il futuro
     
  3. MTeo1994

    MTeo1994 Nuovo Utente

    Registrato:
    8 Novembre 2018
    Messaggi:
    4
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    La ringrazio molto Max, non ero a conoscenza di questo tag "codice" nel forum. Grazie per averlo sistemato.
    La problematica non è il responsive, e nemmeno tutto il resto del codice css ed html.
    La problematica si pone proprio su quelle 4 linee di codice, sopratutto sul tag "overflow-x:hidden". Per quello non ho postato tutto il codice del sito, perchè sarebbe risultato inutile.
     
  4. MTeo1994

    MTeo1994 Nuovo Utente

    Registrato:
    8 Novembre 2018
    Messaggi:
    4
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    Penso ci sia un contrasto tra
    Codice:
    html,body{....} con overflow-x:hidden
    Su questo io chiedevo l'aiuto. Mi scusi se non sono stato chiaro.
     
  5. Jonn

    Jonn Utente Attivo

    Registrato:
    29 Dicembre 2012
    Messaggi:
    335
    Mi Piace Ricevuti:
    2
    Punteggio:
    18
    Sesso:
    Maschio
    Occupazione:
    Webdesigner
    Località:
    Pistoia
    Senza avere il sorgente sottomano o qualche esempio pratico c'è poco da discutere, per quanto riguarda il menu immagino che il problema delle ancore sia dato dal fatto che hai utilizzato delle dimensioni percentuali (ed uguali o inferiori al 50% di width) per gli elementi che le "contengono", questo implica che nella visualizzazione mobile gli elementi si ridispongano magari allineandosi ad altri elementi che contengono altre ancore, per cui 2 ancore possono coincidere graficamente, l'unico consiglio che posso provare a darti (che non sapendo com'è strutturato il sito potrebbe anche fare peggio che meglio) è provare ad assegnare a tutti gli elementi ancora la regola
    Codice:
    display: block;width:100%;
    e di togliere eventuali attributi inline nel sorgente HTML di modo che gli elementi a qualsiasi visualizzazione si vedano "impilati" uno sotto l'altro.
    Onestamente non so neanche in che caso possa essere utile la regola overflow-x visto che per principio rende graficamente inaccessibile un qualsiasi contenuto al quale lo applichi, se ci dai il sorgente (preferibile) o qualche screenshot capiamo meglio e possiamo darti consigli più mirati.
    In ogni caso ti sconsiglio fortemente di provare a controllare le altezze (height:100%;) perché è una giungla di regole e visto che al giorno d'oggi le visualizzazioni mobile sono nettamente più importanti di quelle desktop (vedi la diffusione di smartphone), controllando le altezze è impossibile avere un layout che si adatta a tutti i contenuti e nella quasi totalità dei casi lo sforzo non vale il risultato da ottenere.
     
Sto caricando...

Condividi questa Pagina