WebSite X5Help Center

 
Giovanni G.
Giovanni G.
User

Problema con ordine di sovrapposizione degli oggetti nell'intestazione  it

Autor: Giovanni G.

ho inserito il seguente codice:

<style type="text/css">
body #imHeader {position: fixed; top: 0px; z-index: 60;}
body #imHeaderBg {position: fixed; top: 0px; z-index: 60;}
body #imFooter {position: fixed; bottom: 0;z-index:10000;}
</style>

nella modalità esperto in Impostazioni avanzate -> Statistiche, SEO e Codice

per mantenere fisso l'header della pagina visto che non esiste una funzione nativa in WebSite, il risultato è ok ma se vado ad inserire una immagine nell'intestazione (Impostazioni generali -> Personalizzazione del modello) per creare un logo o un pulsante, non viene visualizzato credo si tratti per l'appunto di un problema di sovrapposizione dello stesso header sull'immagine... 

qualcuno può venirmi in soccorso? c'è una soluzione

distinti saluti

Gepostet am
19 ANTWORTEN - 1 NüTZLICH
Skeggia 12
Skeggia 12
Moderator

se hai messo lo z-index a 60 per l'header devi dare all'immagine uno z-index superiore, quindi almeno 61...e il suggerimento è inserire l'immagine in intestazione tramite il codice html (la pergamena), in modo da assegnare il corretto z-index...(suggerimento valido per qualsiasi elemento tu debba aggiungere in intestazione)...

Mehr lesen
Gepostet am von Skeggia 12
Giovanni G.
Giovanni G.
User
Autor

non mi pare sia una buona soluzione, poco pratica!

io credo che debba essere corretto il programma in quanto è scontato che se io metto un qualsia oggetto sull'intestazione deve appunto stare su!

sono fermo col mio sito perchè sto trovando un sacco di limiti e bug, e se ogni volta devo intervenire attraverso codice, allora il sito lo faccio con Notepad! ho comprato WebSite per evitare ciò!

Grazie ugualmente

Mehr lesen
Gepostet am von Giovanni G.
Mirko Boschetti
Mirko Boschetti
Moderator
Giovanni G.


io credo che debba essere corretto il programma in quanto è scontato che se io metto un qualsia oggetto sull'intestazione deve appunto stare su.......

..... sto trovando un sacco di limiti e bug....


sei tu che hai modificato il codice del header con il tuo css, altrimenti il programma funziona giusto...prova a calare "z-index: 60"... o al limite eliminalo...

Mehr lesen
Gepostet am von Mirko Boschetti
Esse Di
Esse Di
User
  1. Parlo per la versione EVO 11, non avendo la PRO. Una immagine inserita nell'Intestazione viene fusa con l'Intestazione stessa, per cui non è possibile che non sia visualizzata. Gli z-index, in questo caso, non servono e non saprei dove inserirli.
  2. Io sono tra i più severi a denunciare quel 5-10% di malfunzionamenti del programma. Ciò non toglie che il programma mantiene ciò che promette almeno al  90-95%. In questo ha pienamente ragione Mirko: se ci avventuriamo ad apportare delle modifiche, è cura nostra che le stesse funzionino.

Credo di essere stato tra i primi ad illustrare come tenere fissi Menu e/o Header e/o Footer

http://essedi.altervista.org/_EVO11/_menufisso/index.html


Ebbene, a seguito di questo topic, ho provato ad inserire nell'Intestazione sia una immagine sia un oggetto HTML.

Ricordo che il mio esempio parte da un modello com Menu orizzontale sopra all'Intestazione.

Per l'immagine nessun probllema, a patto che ad essa non siano asociati né un effetto hover né un link.

Con l'oggetto HTML, invece, inserendo il codice che tiene fissa l'Intestazione, l'oggetto viene spostato in basso rispetto alla posizione impostata in fase di inserimento, di una quantità pari all'altezza del Menu.

Ancora più complesso il caso di una immagine con effetto hover e/o con link associato. Sia l'immagine hover sia lo spazio a cui viene associato il link (anche in assenza di un effetto hover) sono spostati in basso, esattamente come l'oggetto HTML di cui sopra.

Io non sono ancora riuscito a trovare una soluzione. Spero in qualcun altro più bravo di me.   

Mehr lesen
Gepostet am von Esse Di
Giovanni G.
Giovanni G.
User
Autor

personalmento reputo website x5 il migliore software al mondo nel suo genere, ovviamente rapportato al suo costo.
detto ciò non vuol dire che sia immune da bug o imperfezioni di varia natura e che non si debba o possa migliorare.
ultima considerazione generale senza entrare nel merito (cosa che farò in altri post) io farei una versione: la Professional Plus,
tanto per dargli un nome, collocandola al Top della gamma indirizzata ai web master più avanti spiegherò cosa potrebbe contenere questa ipotetica versione.

ora ritornando a noi eliminando il codice che ho inserito, chiedo sia a Mirko che a Esse Di di spiegarmi come poter
avere un Header come i seguenti siti:
http://www.virgilio.it/
http://www.libero.it/
https://www.facebook.com/

dove L'Header è fisso e i pulsanti (visibili, in primo piano) presentano anche l'effetto rollover

ultima considerazione col notepad lo riesco a fare ma non mi sogno mica di gestire un sito internet attravrso codice troppo perdita di tempo.. convenite con me che website si deve prendere carico di tutte queste funzioni se no che senso ha?

grazie

Mehr lesen
Gepostet am von Giovanni G.
Esse Di
Esse Di
User
MirKo Boschetti
non so se ho capito giusto, ma in questo esempio: http://www.provews.altervista.org/header/ immagine a sx con link, immagine a dx inserita con codice e con link... con il codice postato da EsseDi funziona perfettamente...

Mirko, forse mi sono spiegato male, ma il tuo esempio è la prova dell'inconveniente da me segnalato.

Faccio riferimento a questo tuo esempio

http://www.provews.altervista.org/header/

Esse Di
Con l'oggetto HTML, invece, inserendo il codice che tiene fissa l'Intestazione, l'oggetto viene spostato in basso rispetto alla posizione impostata in fase di inserimento, di una quantità pari all'altezza del Menu.

E' quello che è successo alla tua immagine di destra, che, secondo me, era stata inserita più su, come nell'altro tuo esempio.

http://www.provews.altervista.org/header2/

Esse Di

Ancora più complesso il caso di una immagine con effetto hover e/o con link associato. Sia l'immagine hover sia lo spazio a cui viene associato il link (anche in assenza di un effetto hover) sono spostati in basso, esattamente come l'oggetto HTML di cui sopra.

Se porti il mouse sulla tua immagine di sinistra, noterai che la manina che indica il link incomincia ad apparire ad una certa distanza dal bordo superiore (a metà della scritta Boschetti) e scompare alla stessa distanza dal bordo inferiore. l'effetto sarebbe stato più evidente se tu avessi inserito una immagine hover, che non avrebbe ricoperto quella normale, ma si sarebbe posizionata al di sotto di essa, esattamente nello spazio del link, individuato dalla forma a manina del mouse.

Sto lavorando ad una soluzione di questo problema. Se ed appena vi riuscirò, modificherò il mio sito di esempio.

P.S. Questa non può essere considerata una risposta a Giovanni G, il quale, purtroppo, continua a dare versioni contrastanti, senza fare vedere nulla.

Mehr lesen
Gepostet am von Esse Di
Mirko Boschetti
Mirko Boschetti
Moderator

@EsseDi:

Ok....ho notato ora quello che dicevi, effettivamente è cosi...non avevo notato la manina del link...e l'immagine di dx spostata...

Mehr lesen
Gepostet am von Mirko Boschetti
Esse Di
Esse Di
User
MirKo Boschetti
@EsseDi: Ok....ho notato ora quello che dicevi, effettivamente è cosi...non avevo notato la manina del link...e l'immagine di dx spostata...

Nel frattempo ho trovato la soluzione. Basta partire da un template con Menu sotto l'Intestazione ed apportare qualche piccola modifica ai CSS. Entro domani aggiornerò il sito di esempio per EVO 11 (mi resta da aggiornare le istruzioni).

Mehr lesen
Gepostet am von Esse Di
Giovanni G.
Giovanni G.
User
Autor

trovato l'errore grazie al vostro intervento

questo è il codice che inserivo:

#imHeaderBg {position: fixed; top: 0px;  z-index: 50;}
#imHeader {position: fixed; top: 0px; z-index: 50;}
#imFooter {position: fixed; bottom: 0px; z-index: 150;}

questo è quello giusto

#imHeaderBg {position: fixed; top: 0px; width: 1022px; height:120px; z-index: 50;}
#imHeader {position: fixed; top: 0px; width: 1022px; height:120px; z-index: 50;}
#imFooter {position: fixed; bottom: 0px; width: 1022px; height: 30px; z-index: 150;}

omettevo di mettere delle informazioni apparentemente non utili: le misure (il mio raggionamento, errato, mi portava a pensare che tanto erano presenti nella struttura del sito...) e per questa cosa quando andavo ad inserire immagini dall'apposito tastino non venivano visualizzate nell'header.

grazie 

Mehr lesen
Gepostet am von Giovanni G.
Giovanni G.
Giovanni G.
User
Autor

correzioni:

ragionamento

#imHeaderBg {position: fixed; top: 0px; height:120px; z-index: 99;}
#imHeader {position: fixed; top: 0px; width: 1022px; height:120px; z-index: 100;}
#imFooter {position: fixed; bottom: 0px; width: 1022px; height: 30px; z-index: 98;}

Mehr lesen
Gepostet am von Giovanni G.
Mirko Boschetti
Mirko Boschetti
Moderator

Non ho capito il tuo ragionamento...ma se a te va bene cosi....anche se senza vedere...

Mehr lesen
Gepostet am von Mirko Boschetti
Giovanni G.
Giovanni G.
User
Autor

Lo so sintetizzo molto ma ho pochissimo tempo perdonami! avevo scritto raggionamento

Mehr lesen
Gepostet am von Giovanni G.
Mirko Boschetti
Mirko Boschetti
Moderator

non solo sintetizzi molto, ma hai anche messo come esempio 3 codici diversi...

Mehr lesen
Gepostet am von Mirko Boschetti
Giovanni G.
Giovanni G.
User
Autor

Mirko leggi bene!

il primo gruppo di codici, quello che non mi faceva visualizzare le immagini sull'header (ammettendo che si tratta si un mio errore!!!)

#imHeaderBg {position: fixed; top: 0px;  z-index: 50;}
#imHeader {position: fixed; top: 0px; z-index: 50;}
#imFooter {position: fixed; bottom: 0px; z-index: 150;}

il secondo definito da me quello giusto (in realtà nella fretta di pubblicarlo avevo messo qualche dato in più che creava altri problemi.. te lo sottolineo così ci arrivi pure tu)

#imHeaderBg {position: fixed; top: 0px; width: 1022px; height:120px; z-index: 50;}
#imHeader {position: fixed; top: 0px; width: 1022px; height:120px; z-index: 50;}
#imFooter {position: fixed; bottom: 0px; width: 1022px; height: 30px; z-index: 150;}

il terzo è uguale al secondo meno il codice sottolileato. 

#imHeaderBg {position: fixed; top: 0px; height:120px; z-index: 50;}
#imHeader {position: fixed; top: 0px; width: 1022px; height:120px; z-index: 50;}
#imFooter {position: fixed; bottom: 0px; width: 1022px; height: 30px; z-index: 150;}

se non hai capito ti mando gli screenshot

Mehr lesen
Gepostet am von Giovanni G.
Skeggia 12
Skeggia 12
Moderator

e per fortuna che non volevi usare codici...

Mehr lesen
Gepostet am von Skeggia 12
Giovanni G.
Giovanni G.
User
Autor

Risolvimi un problema più grosso:

ho un e-commerce con centiania di articoli diversi, ora prendiamo in considerazione due tipologie di articoli:  A e ora quando metto nel carrello l'articolo A e voglio inserire pure il B, di quest'ultimo al momento dell'aggiunta nel carrello vorrei far partire un modulo in modalita ShowBox che richieda all'utente dati (Codice Fiscale o Numero carta d'identità o altro) che servono solo per l'acquisto di quel particolare prodotto compilato questo mini modulo correttamente l'articolo viene inserito automaticamente nel carrello.

Mehr lesen
Gepostet am von Giovanni G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... per questa ultima domanda, ...apri un Argomento nuovo a tema...

.

ciao

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪
Giovanni G.
Giovanni G.
User
Autor

ok

Mehr lesen
Gepostet am von Giovanni G.