Problema con ordine di sovrapposizione degli oggetti nell'intestazione
Auteur : 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
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)...
Auteur
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
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...
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.
Auteur
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
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...
oppure qui tipo i tuoi link.....
http://www.provews.altervista.org/header2/
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/
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/
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.
@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).
Auteur
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
Auteur
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;}
Non ho capito il tuo ragionamento...ma se a te va bene cosi....anche se senza vedere...
Auteur
Lo so sintetizzo molto ma ho pochissimo tempo perdonami! avevo scritto raggionamento
non solo sintetizzi molto, ma hai anche messo come esempio 3 codici diversi...
Auteur
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
e per fortuna che non volevi usare codici...
Auteur
Risolvimi un problema più grosso:
ho un e-commerce con centiania di articoli diversi, ora prendiamo in considerazione due tipologie di articoli: A e B 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.
... per questa ultima domanda, ...apri un Argomento nuovo a tema...
.
ciao
Auteur
ok