Visualizzazione dei risultati da 1 a 6 su 6

Discussione: Problemi con GAP

  1. #1

    Problemi con GAP

    Ciao a tutti, sono tornato...
    Vi scrivo per un problema col GAP.
    Nel codice che linkerò in fondo noterete che ho utilizzato 10px di gap che mi serve per distanziare i box nella griglia nel modo che vedrete con il background visibile negli spazi, inserirò poi un margine (ora assente) di 10px intorno alla griglia, senza gap risulta come me lo aspetto, ma se lo aggiungo, esce fuori il problema che la griglia supera stranamente i limiti della pagina, sia in larghezza che in altezza, aggiungendo scrollbar e il background sul lato destro e sul fondo della pagina non copre più tutta la pagina/griglia interrompendosi e mostrando del bianco (sul fondo non si nota il problema solo perché c'è un box unico che nasconde lo stesso problema che compare a destra), potreste quindi aiutarmi a risolvere il problema lasciando griglia bordi box margini gap ecc così com'è rimanendo però nei limiti della pagina e avere la copertura perfetta che cerco?

    http://jsfiddle.net/wapoq8tb/2/

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,683
    Ciao e bentornato

    Oh mammamia quanti errori di validazione! a iniziare da quel <!DOCTYPE html css> che non si può vedere

    Come già ti consigliai nella tua precedente discussione, torno a consigliarti di sistemare la validazione del codice prima di addentrarti in altre problematiche tecniche, altrimenti rischi di incontrare sempre dei possibili problemi di visualizzazione a prescindere dalle soluzioni che si possono applicare per il problema in oggetto.

    Consiglio quindi nuovamente, passa il tuo HTML in un validatore, ad esempio questo: https://validator.w3.org/nu/#textarea
    sistema tutti gli errori che saltano fuori, poi si potrà parlare di gap e quant'altro in maniera più precisa.

    Ti prego solo, non ripetermi "riguardo gli errori so già quali sono e non recano problemi al funzionamento della pagina", come già replicasti l'altra volta a questo mio stesso consiglio, perché (senza offesa) se tu avessi la reale certezza di come possano influire tali errori sull'impaginazione, avresti anche la padronanza per comprendere come arrivare da te stesso ad una qualche soluzione per quest'altro problema.


    Ti rispondo comunque rapidamente.
    Il valore del gap non è considerato nel calcolo percentuale di righe e colonne per gli elementi grid. Per risolvere puoi usare l'unità di misura "fr" (frazioni), anziché %, per ripartire righe e colonne all'interno dell'effettivo spazio disponibile.

    Vedi qualche risposta in questa analoga discussione su stackoverflow:
    Why does grid-gap cause an overflow?

    Buon proseguimento
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3

    Riguardo il CSS dovevo toglierlo, riguardo il resto...
    Ti ascolterò, non avevo intenzione di risultare presuntuoso la scorsa volta e/o mancare di rispetto alla tua maggiore esperienza riguardo il codice, solo che mi basavo su segnalazioni o errori che pare il mio programma di compilazione visual studio code evidentemente non riporta, ti chiedo scusa per la scorsa volta e ascolterò il tuo consiglio. Riguardo fr ci ho provato, se in modo giusto o sbagliato non lo so, però non ha risolto il problema gap, leggerò quindi quanto mi hai mandato e utilizzerò un validatore, dopodiché scriverò i risultati...
    Grazie per la pazienza.

  4. #4
    Ciao, ho utilizzato il validatore, molto buono credo, effettivamente vscode non mi segnalava gli errori,
    quelli presenti li ho sistemati tranne uno che è un semplice percorso di file con degli spazi nel nome della cartella ma potrei comunque cambiare il nome e risolverlo in un secondo momento. Risolti gli errori ora sto tentando di utilizzare una serie di possibili soluzioni, quando avrò terminato e trovato quella corretta vi scriverò il risultato.
    Questi problemi con gap insegnano molto tentando di risolverli. Grazie per la dritta, per ora.
    A presto...

  5. #5
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,683
    Bene fai sapere, buon proseguimento
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  6. #6
    Ciao, allora, senza rimettervi il codice, perchè comparsi altri generi di problemi riguardo i div, utilizzando la soluzione della combinazione "grid-template-columns/rows: minmax(22fr, auto)" il problema dei margini bianchi e della scrollbar aggiuntiva che non volevo si risolvono.
    Soluzioni spiegate qui: https://stackoverflow.com/questions/...se-an-overflow
    E' la discussione proposta nella risposta sopra di killer...




    Il mio altro problema comparso è che ora il div primario è grande quanto tutto il suo contenuto e di conseguenza non nasconde il testo in più all'interno che volevo si vedesse solo con un hover (cosa che conto di risolvere in un modo semplice che ora non ricordo), sempre di conseguenza, per gli altri div che hanno la misura in fr, rifacendosi al div primario, le misure non coincidono a quelle opportune che cercavo.
    In breve quindi, ora, la misura "(fr,auto)" risolve il problema per cui ho iniziato la discussione, ma quel min in fr per colonna o riga, farà sì che la colonna o riga finirà in base alle misure del contenuto del div.

    Se riuscirete a capirmi immagino sarà un miracolo senza codice, ma col tempo al momento non riuscivo e non volevo lasciarvi a lungo senza sapere la soluzione adottata, al massimo facciamo che quando avrò risolto anche il nuovo problema, vi metterò anche il codice...

    CIAO

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.