WebSite X5Help Center

 
Stefano L.
Stefano L.
User

Colore menù su passaggio del mouse  it

Автор: Stefano L.
Просмотрено 1587, Подписчики 1, Размещенный 0  

Buongiorno,

riscontro un difetto grafico nei menù di livello nell'impostazione "voce su passaggio del mouse": i bordi arrotondati non sono completamente coperti dal colore di sfondo assegnato alla "voce su passaggio del mouse".

Grazie...

Размещено
29 Ответы - 6 Полезно - 1 Корректно
Mirko Boschetti
Mirko Boschetti
Moderator

Sicuro???

Io ci ho provato e funziona perfettamente...wink

un link per vedere?

Читать больше
Размещено От Mirko Boschetti
Mirko Boschetti
Mirko Boschetti
Moderator

qui una mia prova... 

Читать больше
Размещено От Mirko Boschetti
Mirko Boschetti
Mirko Boschetti
Moderator

qui un'esempio tipo il tuo:

Читать больше
Размещено От Mirko Boschetti
Stefano L.
Stefano L.
User
Автор

Hai il colore dello sfondo del menu uguale a quello dello sfondo voce su passaggio del mouse... inoltre hai i bordi del menù trasparenti o dello stesso colore dello sfondo menù.... prova a impostare i bordi di colore neri con spessore 3px poi mi dici...

Читать больше
Размещено От Stefano L.
Mirko Boschetti
Mirko Boschetti
Moderator

Ok provato, ed effettivamente è come dici tu con colori diversi ....  ma il colore dei tuoi  margini è lo stesso del menù, quindi non dovrebbe farlo... 

Читать больше
Размещено От Mirko Boschetti
Stefano L.
Stefano L.
User
Автор

Ok grazie per il feedback... attendiamo una risposta dallo Staff a questo punto...

Читать больше
Размещено От Stefano L.
Esse Di
Esse Di
User

Per essere precisi, il fenomeno si presenta:

  • in presenza di angoli arrotondati, anche su quelli superiori 
  • per qualsiasi stato della voce del Menu (normale, su passaggio del mouse, Pagina corrente) che ha uno sfondo diverso dallo sfondo del Menu stesso

In pratica c'è una differenza tra la linea arrotondata del bordo e l'arrotondamento della voce del Menu.

Credo che dipenda da una differenza tra centri e raggi di curvatura e potrebbe darsi che il problema non abbia soluzione 

Читать больше
Размещено От Esse Di
Mirko Boschetti
Mirko Boschetti
Moderator

nel frattempo, per tamponare e lo dico per gli altri, basta mettere lo sfondo menu  dello stesso colore del passaggio su menu:

Читать больше
Размещено От Mirko Boschetti
Esse Di
Esse Di
User
Mirko Boschetti
nel frattempo, per tamponare metti lo sfondo menu dello stesso colore del passaggio su menu:

Così vedrà una macchia rossa quando il mouse si trova su un'altra voce

Esse Di
Per essere precisi, il fenomeno si presenta: in presenza di angoli arrotondati, anche su quelli superiori  per qualsiasi stato della voce del Menu (normale, su passaggio del mouse, Pagina corrente) che ha uno sfondo diverso dallo sfondo del Menu stesso In pratica c'è una differenza tra la linea arrotondata del bordo e l'arrotondamento della voce del Menu. Credo che dipenda da una differenza tra centri e raggi di curvatura e potrebbe darsi che il problema non abbia soluzione 
Читать больше
Размещено От Esse Di
Stefano L.
Stefano L.
User
Автор

@Mirko Boschetti, concordo con la tua soluzione temporanea, ma così, nel mio caso non potre evere gli spazzi verticali tra una cella e l'altra (quelle grigie che sono date dal colore dello sfonde per intenderci...

Читать больше
Размещено От Stefano L.
Mirko Boschetti
Mirko Boschetti
Moderator
Esse Di
Così vedrà una macchia rossa quando il mouse si trova su un'altra voce

perchè?

Si intravede un pelo di sfondo, ma solo se uno usa una lente mentre naviga sul web. laughinglaughing

Читать больше
Размещено От Mirko Boschetti
Esse Di
Esse Di
User
Mirko Boschetti
perchè? Si intravede un pelo di sfondo, ma solo se uno usa una lente mentre naviga sul web.

Il "pelo di sfondo" è sempre quello: bianco se lo sfondo del Menu è bianco, rosso se è rosso, verde se è verde e così via. A parte la minore o maggiore visibilità dei vari colori, per vederlo occorre sempre la stessa lente 

Читать больше
Размещено От Esse Di
Stefano L.
Stefano L.
User
Автор

... fatto sta che c'è ed esteticamente... il pelo... sta male perchè è visibile...

Читать больше
Размещено От Stefano L.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Stefano L.
... fatto sta che c'è ed esteticamente... il pelo... sta male perchè è visibile...

... io non ho il PC con il programma, ma se hai un link delle prove, un click,  si potrebbe valutare qualcosa...

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
 lemonsong  
 lemonsong  
User
Esse Di
In pratica c'è una differenza tra la linea arrotondata del bordo e l'arrotondamento della voce del Menu.

Ho cercato di riprodurre più o meno il menu postato dall'autore e se si toglie il numero di px dello spessore del bordo dello sfondo, dal border-radius, si dovrebbe "rattoppare" (personalizzare il numero dell'id):

#imHeader_imMenuObject_01 ul ul > li:last-child > .label-wrapper {
  /* togliere lo spessore del bordo */
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
}

Spessore bordo: 3

Fattore di smusso: 10

Provate, per verificare o trovate alternative più pratiche. Volendo si potrebbe "automatizzare" con JS, ma non credo ne valga la pena.

Ecco l'anteprima:

Читать больше
Размещено От  lemonsong  
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Mirko Boschetti
 ‪ KolAsim ‪ ‪....... ma se hai un link delle prove, un click,  si potrebbe valutare qualcosa... http://provesitotest.altervista.org/provamenu/ ciaooooo

... grazie per il tuo esempio, e potrebbe funzionare un raggio concentrico ridotto:

#imHeader_imMenuObject_06 ul ul > li:last-child > .label-wrapper
{ border-bottom-left-radius: 8px !important; border-bottom-right-radius: 8px !important;}

... anche se arrivato tardi, praticamente la stessa soluzione che vedo di lemonsong...

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... sempre sulla base dell'esempio di Mirko, ... vedo che si potrebbe agire anche sulla curvatura esterna:

#imHeader_imMenuObject_06 ul ul:nth-child(2){ border-bottom-left-radius: 12px !important; border-bottom-right-radius: 12px !important;}

.

ciao

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Mirko Boschetti
Mirko Boschetti
Moderator

Perfetto... provato e funzia...

eliminati tutti i peli superflui...laughinglaughingwink

Читать больше
Размещено От Mirko Boschetti
Stefano L.
Stefano L.
User
Автор

Ciao lemonsong,

ho visto che hai risolto il problema ma non riesco ad applicare il codice (io l'ho incollato prima della chiusura del tag head)...

#imHeader_imMenuObject_01 ul ul > li:last-child > .label-wrapper {
  /* togliere lo spessore del bordo */
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
}

In che sezione lo devo incollare?

--------------------------------------------

 lemonsong  
Esse Di In pratica c'è una differenza tra la linea arrotondata del bordo e l'arrotondamento della voce del Menu. Ho cercato di riprodurre più o meno il menu postato dall'autore e se si toglie il numero di px dello spessore del bordo dello sfondo, dal border-radius, si dovrebbe "rattoppare" (personalizzare il numero dell'id): #imHeader_imMenuObject_01 ul ul > li:last-child > .label-wrapper {   /* togliere lo spessore del bordo */   border-bottom-left-radius: 7px;   border-bottom-right-radius: 7px; } Spessore bordo: 3 Fattore di smusso: 10 Provate, per verificare o trovate alternative più pratiche. Volendo si potrebbe "automatizzare" con JS, ma non credo ne valga la pena. Ecco l'anteprima:
Читать больше
Размещено От Stefano L.
Esse Di
Esse Di
User

Ho provato il codice di lemonsong e funziona

@Stefano L. 

Il codice va inserito in  "Impostazioni - Avanzate - Statistiche, SEO e Codice - Codice - Prime della chiusura del tag HEAD", ovviamente racchiudendolo tra <style> e </style>

Читать больше
Размещено От Esse Di
Stefano L.
Stefano L.
User
Автор

Scusa la mia ignoranza ma probabilmente non sto facendo qualcosa di corretto...

RISULTATO:

Esse Di
Ho provato il codice di lemonsong e funziona @Stefano L.  Il codice va inserito in  "Impostazioni - Avanzate - Statistiche, SEO e Codice - Codice - Prime della chiusura del tag HEAD", ovviamente racchiudendolo tra <style> e </style>
Читать больше
Размещено От Stefano L.
Esse Di
Esse Di
User

Il codice di lemonsong si applica all'ID "imHeader_imMenuObject_01"

Il tuo all'ID "imHeader_imMenuObject_06"

Può darsi che l'ID valido per te non sia né 01 né 06. Come facciamo a saperlo? Per questo ti è stato chiesto di pubblicare il tuo esempio

‪ KolAsim ‪ ‪
... io non ho il PC con il programma, ma se hai un link delle prove, un click,  si potrebbe valutare qualcosa...
Читать больше
Размещено От Esse Di
Stefano L.
Stefano L.
User
Автор

Hai ragione, non avevo messo l'identificativo del MIO menù attuale...

con il seguente codice e con i parametri dello sfondo: Spessore bordo 3, raggi inferiori 7 VISUALIZZO ancora un difettino (ma accettabile rispetto a prima):

<style>
#imHeader_imMenuObject_02 ul ul > li:last-child > .label-wrapper {
/* togliere lo spessore del bordo */
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
}
</style>

UN GRAZIE A TUTTI @lemonsong, @Esse Di, @KolAsim @Mirko Boschetti

Esse Di
Il codice di lemonsong si applica all'ID "imHeader_imMenuObject_01" Il tuo all'ID "imHeader_imMenuObject_06" Può darsi che l'ID valido per te non sia né 01 né 06. Come facciamo a saperlo? Per questo ti è stato chiesto di pubblicare il tuo esempio ‪ KolAsim ‪ ‪ ... io non ho il PC con il programma, ma se hai un link delle prove, un click,  si potrebbe valutare qualcosa...
Читать больше
Размещено От Stefano L.
 lemonsong  
 lemonsong  
User
Stefano L.
[...]con i parametri dello sfondo: Spessore bordo 3, raggi inferiori 7 VISUALIZZO ancora un difettino (ma accettabile rispetto a prima):

Forse sono stato troppo criptico, ma quando scrivo:

 lemonsong  
Spessore bordo: 3 Fattore di smusso: 10

Descrivo le impostazioni da programma che ho scelto.

Il risultato della sottrazione (10-7) va indicato nel CSS.

Se era già tutto chiaro, come non detto.

Читать больше
Размещено От  lemonsong  
 lemonsong  
 lemonsong  
User

Ah, non avevo visto le immagini del post delle 20:46:53.

Quindi, come non detto.

Читать больше
Размещено От  lemonsong  
 lemonsong  
 lemonsong  
User

*10-3 (scusate)

Читать больше
Размещено От  lemonsong  
Stefano L.
Stefano L.
User
Автор

fatto sta che non capisco come a te, lemonsong, risulti così:

e a me così (se guardi i raggi presentano ancora due punti neri per ogni raggio:

pur avendo gli stessi parametri di impostazione...

Comunque è accettabile

Читать больше
Размещено От Stefano L.
Esse Di
Esse Di
User

Nel mio sito di prove

http://essedi.altervista.org/_EVO2019/_prove/index.html

ho aggiunto

  • Il codice per eliminare la sovrapposizione dei colori nei Menu di Livello arrotondati (Voce di Menu "Altro")
  • Una estesa personalizzazione dell’Hamburger Menu: colore bordi ed arrotondamenti dello sfondo, colore e dimensioni delle barre, aspetto del pulsante di chiusura ed altro

Per il Menu di Livello ho applicato la seconda idea di Kolasim, che agisce sul raggio di curvatura del bordo dello sfondo

Ho eliminato il riferimento al progressivo dell’ID del Menu: il codice viene applicato a qualsiasi Menu di Livello presente nella pagina ed anche ai sottolivelli

I parametri originali applicati tramite X5 sono:

  • spessore del bordo di 3px
  • raggio di curvatura di 10px

Il CSS extra porta il raggio di curvatura a 14px, 1 in più della somma dei due valori originali

I codici sono visualizzabili e/o scaricabili da

http://essedi.altervista.org/_EVO2019/_prove_res/prove.css

tra le righe


/* -- Inizio CSS per hamburger menu */

/* -- Fine CSS per hamburger menu */

e


/* -- Inizio CSS per Menu di livello */

/* -- Fine CSS per Menu di livello */

Читать больше
Размещено От Esse Di