Problema float (image rollover)

[aquila87]

ciao a tutti è il mio primo messaggio sul forum

mi servirebbe un aiuto perchè altrimenti spacco il pc

sto imparando qualcosa sull'html da solo seguendo le guide di questo sito e di altri e mi è venuta la (brutta ) idea di provare a creare un piccolo sito.
tutto bene all'inizio solo che adesso ho trovato un problema per quanto riguarda creare un'immagine rollover (usando i css e senza l'aiuto di javascript visto che non lo so usare): il problema principale è che nel file.css quando non metto nessun valore float, l'immagine rimane quella iniziale e non cambia passandoci il mouse sopra; se invece setto qualsiasi valore di float, l'immagine iniziale è giusta ma poi quando passo il mouse sopra si sposta verso destra sovrapponendosi all'immagine iniziale. E inoltre mi sballa tutta l'impostazione della tabella che si allarga.
Spero di essermi spiegato bene e scusate se non uso termini tecnici visto che sto alle prime armi.
Grazie anticipatamente a chi risonderà .
Lorenzo

[fcaldera]

posta un link alla pagina in questione oppure scrivi un esempio di codice che non funziona.

Comunque tieni presente che

1) l'effetto rollover in CSS si può fare ma solo se le immagini sono dei background (e non immagini in primo piano)

2) l'effetto rollover si applica sulla pseudoclasse :hover

a { background: url(immagine-off.gif) top left no-repeat; }
a:hover { background: url(immagine-off.gif) top left no-repeat; }

[aquila87]

Questo è quello che ho messo nel CSS

.ally {
float: left;
display: inline;
list-style: none;
background-image: url(alliance_logo.jpg);
background-repeat: no-repeat;
width: 197px;
height: 236px;
margin-left: 50px;
}

.ally a:link, .ally a:active, .ally a:visited {
float: left;
display: inline;
list-style: none;
background_image: url(alliance_logo.jpg);
background-repeat: no-repeat;
width: 197px;
height: 236px;
margin-left: 50px;
}

.ally a:hover {
float: left;
display: block;
list-style: none;
background-image: url(alliance_logo_rollover.jpg);
background-repeat: no-repeat;
width: 197px;
height: 236px;
margin-left: 50px;
}

Questo nell'HTML nella cella della tabella a 3 colonne che uso come impostazione.

<div class="ally">

</div>

[fcaldera]

background_image: url(alliance_logo.jpg);

va scritto con trattino medio

ma perchè imposti lo sesso sfondo due volte, uno sul div e uno sul link? E il list-style su link puoi anche toglierlo

[aquila87]

ok ho corretto queste cose che mi hai detto, però non è cambiato niente

[fcaldera]

allora devi postare un link alla pagina perchè il problema potrebbe essere altrove... il pezzo che hai postato tu non sembra avere errori.

[aquila87]

non posso postare un link alla pagina perchè non è online

provo a spiegare a parole la situazione.

Ho impostato un layout con tabella a 3 colonne e 3 righe;

- nella prima cella in alto a sinistra c'è questa immagine rollover che inizialmente è posizionata bene, ma quando passo sopra col mouse slitta verso destra sovrapponendosi all'immagine iniziale.

- nella cella centrale in alto c'è un'immagine normale posizionata solo con align="center".

- nella cella a destra in alto c'è un'altra immagine rollover che funziona perfettamente con un codice html e css praticamente identico all'immagine della cella a sinistra.


può essere forse che il codice identico delle due immagini rollover si infastidisca a vicenda?