Rollover problemi

**Memnock** · 03-10-2007, 16:46

Ho applicato le leggi tratte dal manuale "qui", anzi per la verità ho copiato l'html e il css, per vedere se funzionava... e di fatti non mi funziona... Il codice che usavo prima per esercitarmi era questo:

codice:

div#navigation ul{list-style-type: none;margin: 0;padding: 0} 
div#navigation li{float: left;margin: 0 3px 0 0;padding:0} 
div#navigation a{display: block;width: 120px;line-height: 30px;
    text-decoration: none; border: 1px solid #666;
    background: url("sfondocombinato.jpg") no-repeat top left;color: #333;
    font-variant: small-caps;text-indent: 27px}

Ma dato che mi servivano larghezze e immagini diverse per ogni pulsante, non potevo usare quel codice... ma in quello dato dal manuale sopra lincato secondo me ci sono errori... infatti immettendolo nel mio "TopStyle" mi evidenzia in rosso le parole "position" e "cursor"...

Come fare???

**Sgro** · 03-10-2007, 16:50

Non ci ho capito niente, magari posta anche il blocco HTML che utilizzi insieme al foglio di stile così si riesce a capire dove sta il problema.

**Memnock** · 03-10-2007, 16:54

Originariamente inviato da Sgro
Non ci ho capito niente, magari posta anche il blocco HTML che utilizzi insieme al foglio di stile così si riesce a capire dove sta il problema.

Html:

codice:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Home</title>
 <link rel="stylesheet"href="p.css" type="text/css">
</head>

<body>
<div id="navigation">
<ul>
    <li id="one"><span></span>Home
    <li id="two"><span></span>Grafica
    <li id="three"><span></span>Webdesign
    <li id="four"><span></span>Php
    <li id="five"><span></span>Css[/list]
</div> 
</body>

</html>

Css:

codice:

<style type="text/css">
div#navigation ul{
list-style-type: none;
margin: 0;
padding: 0
}

div#navigation li{float:left;
margin: 0 2px 0;
padding:0;
border: 1px solid #CCC
}

div#navigation a{
position:relative;
display:block;
height: 37px
}

div#navigation a span{
position:absolute;
width:100%;
height:100%;
cursor: pointer; /*per IE*/
}

div#navigation a:hover{
color: #369; /*per IE*/
}

div#navigation a:hover span{
background-position: -140px 0;
}

div#navigation a#current span{
background-position: -280px 0;
}

/*viene attribuita la larghezza di ogni singolo link*/
li#one a{width: 65px} 
li#two a{width: 90px}
li#three a{width: 120px}
li#four a{width: 45px}
li#five a{width: 45px}

/*si dichiarano le immagini*/
li#one span{background: url("HRhome.jpg") no-repeat top left} 
li#two span{background: url("HRgrafica.jpg") no-repeat top left}
li#three span{background: url("HRwebdesign.jpg") no-repeat top left}
li#four span{background: url("HRphp.jpg") no-repeat top left}
li#five span{background: url("HRcss.jpg") no-repeat top left}
</style>

<style type="text/css" media="print">
div#navigation li a{display: inline;padding: 0.2em;
    font: bolder 1.4em "Arial Black",arial,sans-serif;
    color: #000;text-decoration:none;text-align:center}
div#navigation a span{display: none}
</style>

Entrambi sono presi dalla guida citata da me sopra... semplicemente non mi funziona...
Il mio sito è questo
mi piacerebbe rimanesse tutto uguale, voglio solamente utilizzare per il menu un css per rendere il tutto più veloce

**Sgro** · 03-10-2007, 17:04

Scusa ma cosa esattamente non funziona? Ho aperto la pagina, il menu lo vedo bene, in orizzontale, il rollover funziona (si accendono al passaggio del mouse).

Quale problema c'è al momento?

**Memnock** · 03-10-2007, 17:06

Originariamente inviato da Sgro
Scusa ma cosa esattamente non funziona? Ho aperto la pagina, il menu lo vedo bene, in orizzontale, il rollover funziona (si accendono al passaggio del mouse).

Quale problema c'è al momento?

Mmmm... strano a me non funziona.... riprovo ora e ti dico...
Cmq sia come faccio a dare una seconda immagine al passaggio del mouse per ogni pulsante???

**Sgro** · 03-10-2007, 17:09

Non ti conviene usare 2 immagini, piuttosto crea un immagine unica che contenga i 2 stati che ti servono, e poi al passaggio del mouse cambi le coordinate dell'immagine all'interno dello span in modo che si veda la metà superiore o quella inferiore... così simuli l'effetto cambio immagine dimezzando il numero delle http request, ed è anche più veloce.

**Memnock** · 03-10-2007, 17:12

Guarda... non so come mai ma proprio non mi funziona il codice di prima... aprendo la page su IE mi da dei banali linck sottolineati blu in orizzontale... boh

Invece quello che mi hai appena detto mi interessa molto, solo che sono una scarpa in css... nn so nulla, non è che mi potresti gentilmente fare un esempio o linkarmi a qualche manuale??? Grazie

Discussione: Rollover problemi

Strumenti discussione

Ricerca discussione

Visualizza

Rollover problemi

Permessi di invio