Visualizzazione dei risultati da 1 a 9 su 9

Discussione: problema con z-index

  1. #1
    Utente di HTML.it L'avatar di luisa227
    Registrato dal
    Mar 2002
    Messaggi
    2,305

    problema con z-index

    Salve a tutti.
    Credo di avere problemi con i z-index del sito. Ho aggiunto in un secondo momento un menu secondario al sito (about, ect) però da smartphone ho il primo menu (impostato con la classica iconcina a 3 righe) che si apre e finisce in sovapposizione sull'altro menu.

    Se verificate da mobile sul sito http://nothingtoamend.com vedrete che lavoce di menu Home si sovrappone alla voce about.

    Ho provato a pacioccare con i diversi z-index dei due blocchi DIV che fanno riferimento ai 2 menu, ma non sono stata in grado di ottenere nulla.
    Eppure mi pare una cosa semplice da risolvere. Mi dareste una mano per cortesia? grazie
    Le mie richieste qui sul forum sono al 99,9% considerate assurde e senza senso, ma per me un senso lo hanno e gradirei una risposta più seria possibile. Grazie

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,771
    Ciao, che sia una cosa semplice non c'è dubbio, ma la situazione in quella pagina mi pare un po' aggrovigliata tra l'applicazione di vari fogli di stile e di regole che si sovrascrivono l'una con l'altra anche per l'uso intensivo di media queries.

    Partiamo dal fatto che z-index è applicabile ad elementi il cui posizionamento non è statico.
    Verificando con una risoluzione 630x640, l'elemento in questione (#menu) è impostato con position: static !important; che, appunto, annulla l'azione di z-index.

    La regola è definita sul file responsive.css riga 699

    Potresti impostare position: relative !important; ma non ho idea se questo influisca su altre impostazioni o elementi della pagina.

    Il valore di z-index, per #menu, è z-index: 201; definito invece su layout.css riga 300.

    Questo potresti lasciarlo così e andare a modificare invece quello dell'elemento .secondary_menu_wrapper che ho visto hai già provato a modificarlo sullo stile della pagina, ma probabilmente lo hai poi "commentato":

    codice:
    .header-stack #Top_bar .secondary_menu_wrapper {
        display: block;
        // z-index: -1 !IMPORTANT;
    Da qualche prova che ho effettuato, puoi impostare z-index: 0; e dovresti aver risolto.


    Tra parentesi
    I commenti in CSS si scrivono con la sintassi /* commento */
    Il doppio slash // ad inizio riga è utilizzato in altri linguaggi di programmazione ma risulta essere un errore di sintassi per l'interprete CSS del browser. Il risultato, a livello della renderizzazione della pagina, non cambia perché di fatto quella riga viene saltata dall'interprete ma, generando errori su errori, è possibile che si abbiano dei rallentamenti nel caricamento della pagina stessa.

    A parte questo, ho visto tanti altri errori su quella pagina, che potrebbero generare risultati inattesi nonché rallentarne il caricamento. Qui il resoconto del validatore ... chiaramente è giusto per informarti, poi vedi tu che farci.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3
    Utente di HTML.it L'avatar di luisa227
    Registrato dal
    Mar 2002
    Messaggi
    2,305
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    Ciao, che sia una cosa semplice non c'è dubbio, ma la situazione in quella pagina mi pare un po' aggrovigliata tra l'applicazione di vari fogli di stile e di regole che si sovrascrivono l'una con l'altra anche per l'uso intensivo di media queries.

    Partiamo dal fatto che z-index è applicabile ad elementi il cui posizionamento non è statico.
    Verificando con una risoluzione 630x640, l'elemento in questione (#menu) è impostato con position: static !important; che, appunto, annulla l'azione di z-index.

    La regola è definita sul file responsive.css riga 699

    Potresti impostare position: relative !important; ma non ho idea se questo influisca su altre impostazioni o elementi della pagina.

    Il valore di z-index, per #menu, è z-index: 201; definito invece su layout.css riga 300.

    Questo potresti lasciarlo così e andare a modificare invece quello dell'elemento .secondary_menu_wrapper che ho visto hai già provato a modificarlo sullo stile della pagina, ma probabilmente lo hai poi "commentato":

    codice:
    .header-stack #Top_bar .secondary_menu_wrapper {
        display: block;
        // z-index: -1 !IMPORTANT;
    Da qualche prova che ho effettuato, puoi impostare z-index: 0; e dovresti aver risolto.


    Tra parentesi
    I commenti in CSS si scrivono con la sintassi /* commento */
    Il doppio slash // ad inizio riga è utilizzato in altri linguaggi di programmazione ma risulta essere un errore di sintassi per l'interprete CSS del browser. Il risultato, a livello della renderizzazione della pagina, non cambia perché di fatto quella riga viene saltata dall'interprete ma, generando errori su errori, è possibile che si abbiano dei rallentamenti nel caricamento della pagina stessa.

    A parte questo, ho visto tanti altri errori su quella pagina, che potrebbero generare risultati inattesi nonché rallentarne il caricamento. Qui il resoconto del validatore ... chiaramente è giusto per informarti, poi vedi tu che farci.
    Mitico KillerWorm!!! Risolto!! Grazie di <3
    Grazie alla tua spiegazione ho anche capito come andare a leggermi le associazioni tag-file-riga che prima non capivo, e grazie anche per la spiegazione della // sui commenti: proprio non sapevo che non fosse riconosciuta!

    Proverò a correggere l'infinità di errore facendo riferimento al validatore, intanto sono a chiedere un altro problemino:

    Ho notato, sempre riguardo al menu che si apre al click ( e sempre su versione smartphone) che, se scorro la pagina col menu aperto, questo:
    1. cambia di posizione e va circa 200px più a destra
    2. si sovrappone ai contenuti sottostanti

    Dovrebbe invece non comparire più e basta. Come posso risolvere? grazie ancora
    Le mie richieste qui sul forum sono al 99,9% considerate assurde e senza senso, ma per me un senso lo hanno e gradirei una risposta più seria possibile. Grazie

  4. #4
    Utente di HTML.it L'avatar di luisa227
    Registrato dal
    Mar 2002
    Messaggi
    2,305
    ..e ho notato che su mobile � anche saltato il ridimensionamento del logo, che ora si vede enorme e sballa tutto il resto... eppure ho riprovato a mettere quel position sullo static ma � rimasto tale... non capisco!!! Non ho toccato null'altro!!! (a parte correggere gli //)... aiutoooo!
    Le mie richieste qui sul forum sono al 99,9% considerate assurde e senza senso, ma per me un senso lo hanno e gradirei una risposta più seria possibile. Grazie

  5. #5
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,771
    la situazione in quella pagina mi pare un po' aggrovigliata


    Ho notato, sempre riguardo al menu che si apre al click ( e sempre su versione smartphone) che, se scorro la pagina col menu aperto, questo:
    1. cambia di posizione e va circa 200px più a destra
    2. si sovrappone ai contenuti sottostanti

    Dovrebbe invece non comparire più e basta. Come posso risolvere? grazie ancora
    In generale si potrebbe usare display:none; per "nascondere" un dato elemento, ma in questo caso il tutto è gestito attraverso JavaScript, non saprei cosa consigliarti.

    ..e ho notato che su mobile � anche saltato il ridimensionamento del logo, che ora si vede enorme e sballa tutto il resto... eppure ho riprovato a mettere quel position sullo static ma � rimasto tale... non capisco!!! Non ho toccato null'altro!!! (a parte correggere gli //)... aiutoooo!
    Non so, non hai un backup dei file css? Prima di apportare modifiche del genere sarebbe meglio mantenere dei backup.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  6. #6
    Utente di HTML.it L'avatar di luisa227
    Registrato dal
    Mar 2002
    Messaggi
    2,305
    No, non ho backup perchè è il css custom direttamente in piattaforma (ma in futuro mi farò copia e incolla), comunque riguardo al logo ho risolto... si vede che tutti quegli errori si "equilibravano" tra di loro
    A proposito... ho trovato nel css custom alcune mancanze di punto e virgola finali... però il validatore mi pare che non me segnalava...come mai? non è obbigatorio ternimare sempre con i punto e virgola?

    Per problema menu, visto che è js provo a vedere io, al max chiederò nella sezione appropriata.

    Avrei un ultima richiesta: nella versione ipad del sito (quindi credo 768x1014) ho la sidebar (vedi http://nothingtoamend.com/category/events/) con contenuto sballato perchè è troppo stretta.
    Vorrei quindi fare andare a capo in fondo tutti i widget, come succede per la versione smartphone. Come posso fare? Ho provato a guardare e l'unico riferimento alla sidebar è nel file responsive.css @media only screen and (max-width: 767px), negli altri media non ce alcun riferimento.
    Grazie.
    Le mie richieste qui sul forum sono al 99,9% considerate assurde e senza senso, ma per me un senso lo hanno e gradirei una risposta più seria possibile. Grazie

  7. #7
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,771
    si vede che tutti quegli errori si "equilibravano" tra di loro
    può essere

    ho trovato nel css custom alcune mancanze di punto e virgola finali... però il validatore mi pare che non me segnalava...come mai? non è obbigatorio ternimare sempre con i punto e virgola?
    Tipo?
    Sì, in genere è obbligatorio ed è comunque sempre buona pratica terminare ogni regola col punto e virgola; può essere comunque omesso nell'unico caso in cui la regola in questione sia l'ultima (o la sola) definita nel set di regole, cioè la regola prima della parentesi graffa di chiusura del blocco di dichiarazione.

    Esempi:
    codice:
    .selettore{
        color: red;
        width: 100px /* valido, è l'ultima regola del blocco */
    }
    .selettore{
        color: red /* valido, è la sola e ultima regola del blocco */
    }
    .selettore{
        color: red /* errore, ci sono altre regole a seguire */
        width: 100px
    }
    Per problema menu, visto che è js provo a vedere io, al max chiederò nella sezione appropriata.
    Sì, è preferibile.

    Avrei un ultima richiesta: nella versione ipad del sito (quindi credo 768x1014) ho la sidebar con contenuto sballato perchè è troppo stretta.
    Vorrei quindi fare andare a capo in fondo tutti i widget, come succede per la versione smartphone.
    Dal poco che ho potuto provare, mi pare che la sidebar si porti a capo quando la sua width è impostata al 100%.
    Infatti su screen con max-width 767px per .sections_group, .four.columns è definito width: 100% !important;

    Per risoluzioni maggiori mi pare non sia definita tale proprietà in modo specifico, quindi fa riferimento alla regola generale
    codice:
    .with_aside .sidebar.columns {   width: 23%;
    Per forzare l'impostazione di width: 100% anche per altre risoluzioni, credo che dovrai definire tu la regola mancante sotto quella specifica media query.... mmh spetta .. ma lo hai sistemato ora?! ... mi pare sia a posto adesso



    [Mod]
    Non vorrei sembrarti scortese e mi spiace bloccare il tuo slancio di domande ma devo invitarti a non formulare ulteriori richieste se non sono direttamente correlate con l'oggetto della presente discussione o comunque se non si tratta di problemi simili inerenti il problema in questione. E' meglio aprire eventuali altre discussioni per evitare di fare un groviglio di argomenti. Questi, benché si tratta di problemi di layout su una stessa pagina, non hanno nulla a che fare con lo z-index iniziale e sono comunque differenti tra loro.
    La regola del forum è "una discussione => un problema". Grazie
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  8. #8
    Utente di HTML.it L'avatar di luisa227
    Registrato dal
    Mar 2002
    Messaggi
    2,305
    Grazie KillerWorm, hai toltalmente ragione. Non ho ancora "ragionato" su quanto da te scritto per la sidebar, comunque se riscontro problemi su essa riporterò la richiesta in un nuovo post.

    Faccio ancora una domanda in un certo senso collegata allo z-index , poi la smetto (giuro!).

    Quando faccio ispeziona elemento da chrome-desktop nella visualizzazione delle varie versioni, sulla visualizzazione da smartphone- iphone 5, iphone6, ect.. mi mostra comunque la sovrapposizione delle voci di menu anche se risolte (avendo uno smartphone posso verificare la realtà dei fatti). Cè modo per vedere una visualizzazione corretta e corrispondente al reale senza avere un iphone? grazie
    Le mie richieste qui sul forum sono al 99,9% considerate assurde e senza senso, ma per me un senso lo hanno e gradirei una risposta più seria possibile. Grazie

  9. #9
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,771
    Faccio ancora una domanda in un certo senso collegata allo z-index , poi la smetto (giuro!).
    mi fido

    Quando faccio ispeziona elemento da chrome-desktop nella visualizzazione delle varie versioni, sulla visualizzazione da smartphone- iphone 5, iphone6, ect.. mi mostra comunque la sovrapposizione delle voci di menu anche se risolte (avendo uno smartphone posso verificare la realtà dei fatti). Cè modo per vedere una visualizzazione corretta e corrispondente al reale senza avere un iphone? grazie
    Non so, ho provato sia con "device toolbar" di Chrome sia con "Visualizzazione flessibile" di FireFox impostando diverse risoluzioni ma non riesco a vedere il problema che menzioni o, quantomeno, non riesco a riprodurlo ... non è che magari ti basta svuotare la cache del tuo browser?

    Ad ogni modo lo strumento "visualizzazione flessibile" (o quel che è) dei browser riproduce una simulazione verosimile dei differenti viewport ma si tratta, appunto, solo di una simulazione che potrebbe comunque portare a dei risultati con falsi positivi dovuti magari alla presenza di altre regole o impostazioni sulla pagina che possono influire in modo differente proprio a seconda del reale dispositivo utilizzato, oltre che alla semplice modifica della dimensione del viewport.

    Se si vogliono ottenere dei risultati veritieri e inconfutabili, credo che l'ideale sarebbe eseguire i relativi test sui reali dispositivi.

    Esistono comunque anche diversi servizi online che permettono proprio di testare i layout responsive dei propri siti.

    Qui un articolo in cui sono proposti vari strumenti di verifica del responsive https://www.1and1.it/digitalguide/si...-e-responsive/

    Qui altri servizi gratuiti online:
    http://designmodo.com/responsive-test/
    http://lab.maltewassermann.com/viewport-resizer/
    e tanti altri con qualche googleata https://www.google.it/?gws_rd=ssl#q=...+layout+online

    Personalmente non so consigliarti riguardo l'efficienza di tali servizi ma posso comunque invitarti a fare qualche altra ricerca (se già non l'hai fatta) per capire meglio cosa poter utilizzare e come; oppure attendere altre eventuali risposte da utenti che magari possano suggerirti, in modo mirato, degli strumenti validi o fornire ulteriori consigli.

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

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 © 2025 vBulletin Solutions, Inc. All rights reserved.