effetto mouseover sballato

pan

Nuovo Utente
18 Giu 2005
11
0
0
www.pandoracreazioni-ilblog.it
ciao,
avrei bisogno di un aiutino per un effetto mouseover che ho inserito nel mio blog.
ho realizzato delle immagini che vengono visualizzate (come sfondo) al passaggio del mouse sui link testuali del menu, in teoria tutto ok ma l'effetto risulta perfetto solo dopo aver cliccato il link. praticamente alla prima visualizzazione su un altro pc (o dopo qualche modifica anche sul mio) l'immagine non appare come sfondo del link testuale ma in un altro punto dello schermo...se clicco torna tutto a posto...e proprio non capisco :confused:...
il blog è con wordpress, l'effetto con css...
mille grazie a chi può aiutarmi!
pan
 

pan

Nuovo Utente
18 Giu 2005
11
0
0
www.pandoracreazioni-ilblog.it
si, grazie per l'aiuto...
questo l'header che comprende il menu
Codice:
<div id="header">
<h1>titolo</h1>
<div class="description">decrizione</div>
<ul id="nav">
<li id="nav-home"><a href="#">home<span></span></a></li>
</ul>
</div>
questo il css
Codice:
#nav {
position:absolute;
list-style:none;
font-family:"Courier New", Courier, monospace;
font-size:1.8em;
font-weight:bold;
left: 340px;
top: 270px;
}
#nav li {
background:none;
float:left;
padding:0;
width:130px;
text-align:center;
}
#nav a:link {
color:#7a637a;
display:block;
position:absolute;
outline:none;
}
#nav a:visited {
color:#7a637a;
text-decoration:none;
}
#nav a:hover {
background-position:left bottom;
cursor:hand;
}
#nav span {
position:absolute;
display:none;
}
#nav a:hover span {
display:block;
}
#nav-home span {
background:url(img/nav-over.png) no-repeat;
width:130px;
height:70px;
left:0px;
top:-14px;
}
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.046
150
63
PR
www.borgo-italia.it
ciao
spero di non dire put....te, ma l'immagine nav-over.png diventa bckgr dello <span></span> e non del link
io proverei così (uso le classi e non gli id in quanto mi trovo meglio)
css
a.conbckgr{
/*altri parametri*/
background:url(img/nav-over.png) no-repeat;
/*altri parametri*/
text-decoration:none;
}

a.conbckgr:hover{
/*altri parametri*/
background:url(img/rollwer_nav-over.png) no-repeat;
/*altri parametri*/
}


html

HTML:
<li id="nav-home"><a href="#" class="conbckgr">home</a></li>

mal che vada non funzia
 

pan

Nuovo Utente
18 Giu 2005
11
0
0
www.pandoracreazioni-ilblog.it
adesso faccio una prova...vuoi dare un'occhiata al blog intanto così vedi come si visualizza?...
la cosa che non mi è chiara è proprio il fatto che prima di cliccare NON funziona, dopo si...
thanks:)!
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.046
150
63
PR
www.borgo-italia.it
ciao
al primo accesso con il mause su home appare figura su link, su link su info, su info nulla
cliccando e tornando su home e link fig cerchio, su info una busta
in pratica il fenomeno che dici, ma di cui anch'io non so darti spiegazione (anche perchè non conosco wordpress).

secondo me devi lavorare sui css
 

pan

Nuovo Utente
18 Giu 2005
11
0
0
www.pandoracreazioni-ilblog.it
proprio come a me...
sinceramente non credo dipenda da wp ma non riesco a trovare l'errore nel css...perchè dopo funziona???
ho provato anche a testare il blog con browsershots e il campo menu è un po' sballato con molti browser...forse è tutto un problema di position...
help me!
 

pan

Nuovo Utente
18 Giu 2005
11
0
0
www.pandoracreazioni-ilblog.it
ciao,
sei pazientissimo e gentilissimo:)
ho visto la tua prova, funziona perfettamente (ho solo eliminato l'immagine fissa di sfondo perchè l'effetto che volevo era che apparisse l'immagine al passaggio del mouse e non che ne sostituisse un'altra)...il mio dubbio è che mettendo poi nel css i valori di distanza e position per visualizzare il menu nei vari punti stabiliti dello schermo...
esempio>
Codice:
#nav-home span {
background:url(img/nav-over.png) no-repeat;
width:130px;
height:70px;
[U]left:0px;
top:-14px;[/U]
}
...sia tutto sballato di nuovo!
anche la funzione che ho usato io in teoria funziona, applicata poi sul 'campo' però si sballa...

ho ritrovato però il tutorial che avevo seguito per realizzare l'effetto...a fondo pagina parla di un bug in IE, forse è quello ma non so come risolvere lo stesso :confused:
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.046
150
63
PR
www.borgo-italia.it
ciao
...a fondo pagina parla di un bug in IE,
parla di IE6, però io l'ho guardato con IE7, comunque con firefox l'effetto è simile e viene tutto spostato, quindi non credo che dipenda dal bug, anche perchè, a che ne so, il bug di ie6 è quello di interpretare male margin e padding e non mi sembra di averli visti sul tuo css.
posso solo dirti come faccio io, anche se non sono un genio, faccio un div contenitore centrato orizontalmete (talvolta anche verticalmente) di dimesioni fisse (lo adatto alla risoluzione 1024 in quanto rappresenta la risoluzione più diffusa) ed al suo interno altri div con posizioni assolute calcolando (che pa..e) pixel su pixel
 

pan

Nuovo Utente
18 Giu 2005
11
0
0
www.pandoracreazioni-ilblog.it
ciao, in effetti anche io con IE7...
ho fatto una prova come dicevi tu, con le classi, il problema si ripropone...non ne vengo a capo...
mi sembra di essere stata attenta a far tutto con posizioni assolute all'interno del div, ti allego la nuova prova se vuoi dai un occhio :)
adesso la visualizzazione è giusta prima e sballata dopo, ma solo perchè non mi son persa a trovare il giusto posizionamento per tutto, prima voglio scovare l'errore.
comincio a demoralizzarmi:(
 

Allegati

  • prova-menu.zip
    56,8 KB · Visite: 205

pan

Nuovo Utente
18 Giu 2005
11
0
0
www.pandoracreazioni-ilblog.it
vada per il demonio...anche se con 'sto caldo!
le note sono molto chiare e utili, qualche modifica mi è stata utile ;)
ma l'effetto ancora non funziona...la tua visualizzazione era ok?
l'immagine al passaggio del mouse non appare e dopo il clic il testo si allinea tutto da un'altra parte dello schermo come nella mia prova di prima...io questo problema proprio non lo capisco...
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.046
150
63
PR
www.borgo-italia.it
:confused::confused::confused::confused::confused:
non capisco, quando ho postato andava bene (se no non lo postavo).
ora non funzia più:eek:.
questo è un mistero
con calma provo di nuovo a rivedere poi eventualmente riposto
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.046
150
63
PR
www.borgo-italia.it
ciao
ho rifatto tutto ripartendo da 0, salvo miracoli dell'ultima ora, l'ho provato con ie e ff e funzia

come al solito le note sono sui file

sappimi dire
 

pan

Nuovo Utente
18 Giu 2005
11
0
0
www.pandoracreazioni-ilblog.it
m i t i c o !!!!!!!
ma che diamine, ce l'hai fatta! graziegraziegrazie :) non ho parole...
ora mi organizzo e sistemo il tutto sulla mia pagina, mi sa che approfitto e aggiungo il link per i feed :rolleyes:
comunque, fammi capire, il mio 'span' era praticamente inutile...hai risolto eliminando quello...
 
Discussioni simili
Autore Titolo Forum Risposte Data
T applicare un effetto MOUSEOVER su uno SHORTCODE generato da plugin in WORDPRESS jQuery 6
T applicare un effetto MOUSEOVER su THUMBNAILS generati da SHORTCODE WordPress 0
D Effetto mouseover su sezione forum HTML e CSS 3
G Eliminare l'effetto refresh di una pagina internet PHP 8
E telecamera effetto nebbia IP Cam e Videosorveglianza 0
S [Photoshop] Nome di questo effetto (vedi foto) Photoshop 1
S [HTML] Effetto su testo da togliere HTML e CSS 0
F [Photoshop] Effetto "vetro" Photoshop 1
A [Photoshop] come poter realizzare il seguente "effetto" Photoshop 4
P [Photoshop CC] Come posso creare quest'effetto - cerchi concentrici Windows e Software 6
P [Photoshop] Effetto ombra Photoshop 1
R [HTML] Effetto carousel di testo su immagine fissa HTML e CSS 2
trattorino [Javascript] effetto carino sul click mi aiutate? Javascript 1
Andrea_Ventura [HTML] Problemi con effetto hover HTML e CSS 5
M [Photoshop] Come posso creare questo effetto ? Photoshop 2
T [Javascript] identico carousel con effetto fade: in una pagina va in un'altra no, mistero? Javascript 3
I Effetto glowing su immagine con GIMP Webdesign e Grafica 0
MimmoMandrillo [Photoshop] Che effetto è questo? Photoshop 3
R [Photoshop] Come creare questo effetto (v.immagine)?(sovrapposizione immagini in modo uniforme) Photoshop 2
D [Photoshop] Come arrivare a questo effetto? Photoshop 4
S [Photoshop] aiuto effetto glitch scanner (scanner art) Photoshop 1
A Effetto hue-rotate con javascript Javascript 2
elpirata Creare scritte flash effetto dinamico Flash 2
A [HTML] Menu con effetto slide down HTML e CSS 0
M [HTML] Slideshow immagini con effetto FADE HTML e CSS 2
F [HTML] Navbar interferisce con codice per effetto parallax HTML e CSS 2
D effetto con adobe muse Windows e Software 1
X [Photoshop] Cercasi strumento per ottenere un semplice effetto. Photoshop 6
F [HTML] Effetto fade su ogni immagine contenute in uno slider HTML e CSS 16
S [HTML] Effetto hover in un div HTML e CSS 6
M [Photoshop] come realizzare un effetto speciale? Photoshop 1
D [HTML] Sfondo-Background fisso ma non troppo con effetto in movimento HTML e CSS 4
R [HTML] Pulsante con effetto dissolvenza (fading) HTML e CSS 10
trattorino [Javascript] caricamento immagine con effetto fade Javascript 1
R Effetto sul testo Javascript 3
K Effetto psichedelico Flash 0
G Effetto mosso tipo calce. Photoshop 1
P Effetto spruzzo di profumo Photoshop 1
J Aggiunta di un effetto di transizione al plugin Quick Pager jQuery 0
L effetto galleria popup (immagini) jQuery 1
M effetto del testo css HTML e CSS 1
Z Effetto pennello con Flash Flash 0
P Visualizzare video mp4 con effetto lightbox jQuery 1
L Effetto fade a div Javascript 1
L Effetto hover con jquery jQuery 2
F effetto movimento immagini jquery jQuery 3
matteoraggi Come si fa a ricreare l'effetto dei pesciolini? WordPress 3
F Effetto comparsa header Javascript 2
F mappa jquery con effetto hover + fancybox Javascript 1
F Come si chiama questo effetto hover? Javascript 1

Discussioni simili