-
Salve a tutti :) ,
vorrei creare dei bottoni con l'effetto RollOver simili a quelli che sono in uso sul sito ka/ta_we/b nella sezione centrale lato destro (antivirus,oroscopo,etc.etc.).
Dando 1 occhiata al codice credo di aver capito che sono realizzati con l'uso dei fogli di stile e del tag Div.
Anche io ho realizzato qualche cosa di simile con il CSS esterno e il Div, però riesco solo a far comparire le scritte in modalità testo che quando vengono sfiorate dal mouse cambiano colore (e volendo pure tipo di font e grandezza in px) e compare 1 sfondo di cui scelgo il colore.
Potete suggerirmi come devo scrivere nel mio Foglio di Stile Esterno in modo tale da creare nel menù che vado a realizzare dei bottoni con funzione di link che cambiano colore quando sfiorati dal mouse anzicchè del semplice testo con funzione di link :?: ?
Un sentito ringraziamento :o
Antonio :wink:
P.S.: se occorre scrivo sia il codice che uso nel menù che quello scritto nel CSS esterno.
-
Puoi mettere un'immagine al posto del colore di sfondo, tipo:background-image :url(nomeimmagine.gif)
guarda il menù del mio sito.
http://farlimas.altervista.org/menu.html
oppire su questo sito trovi spiegazioni per i menu con i fogli di stile:
http://www.constile.org/
-
Prendi a e mettigli le varie proprietà:
a{
diplay:block;
background-color:#xxxxxx;
border:solid 1px black;
border-top:solid 1px white;
border-left:solid 1px white;
...
ecc.
}
i border fanno apparire a come un bottone: ricorda sinistra e in alto chiaro destra e basso scuro!
poi in a:hover cambi quello che vuoi per farlo apparire quando ci vai con il mouse.
ad esempio
a:hover{
background-color:red;
ecc.
}
attenzione non ho testato il codice, ma lo ho scritto solo per darti una idea!
Il mio sito è fatto con i css se ti serve qualcosa che io ho fatto chiedi pure.
-
Grazie sia a aeclanum che a farlimas per i suggerimenti dati :wink: .
Mi dispiace solo che non viene l'effetto che vorrei creare.
Se date 1 sguardo al mio sito, potete vedere il menù realizzato sul lato sinistro con dei link che, quando ci si và sù col mouse si attivano come se fossero dei tasti colorati.
Però in situazione di riposo restano delle semplici scritte, senza colore di sfondo.
A me piacerebbe creare l'effetto del RollOver avendo in modalità passiva (cioè a riposo) il link circondato da un colore x (per esempio blu) che poi, quando ci vado su col mouse il link passa in modalità attiva e mi cambia di colore passando da colore x (blu) a colore y (rosso).
Se vi può essere di aiuto copio di seguito il codice inserito nel CSS esterno:
-----------------------------------------------------------
#navmenu
a:
{
display:block;
background-image :url(images/bottone_passivo.gif);
border:solid 1px black;
border-top:solid 1px white;
border-left:1px white;
}
a:hover
{background-color: #cc3333;
color: #FFFFFF; font-size:0.9em; font-family: MS Sans Serif;
border-top: 1px solid #000066;
border-left: 1px solid #000066;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;}
#navmenu li { margin-bottom: 1px; list-style: circle; }
#li {list-style: square; }
------------------------------------------------------
Domanda: c'é la possibilità di creare il finto bottone blu che diventa rosso quando toccato col mouse?
Se si come devo modificare il mio navmenu?
In alternativa sò creare l'effetto con Image Ready (realizzando pure l'effetto del click con la pigiatura del bottone ) però non voglio appesantire il sito con troppe immagini e voglio imparare a fare qualcosa di diverso.
P.S.: il sito dove avevo notato l'effetto rollover da prendere ad esempio era kataweb (sezione centrale lato destro link: oroscopo, etc. etc.).
Ancora un sentito grazie a chi mi ha aiutato :)
Antonio :o
-
-
non ce l'hai messo nei css l'a del menu, c'è solo a over, per quello non ti esce fuori i l colore, prova a mettere un css separato nel menu, tipo:
<style type="text/css">
#menu a{qui ci metti i parametri}
#menu a:hover{qui gli altri}
</style>
così almeno puoi fare le prove .
-
Guarda che quei bottoni di kataweb (secondo me)non usano le immagini, ma cambiano solo il colore di sfondo e quindi se tu metti come colore di sfondo ad esempio rosso per a e blu per a:hover dovrebbe funzionare.
Sul mio sito li ho fatti così!
-
Per prima cosa voglio ringraziare tutti per l'aiuto dato :D .
Come consigliato da jenyauno :wink: ho messo in pratica i consigli pubblicati sul link consigliatomi.
Sto facendo vari tests in locale per vedere come viene il risultato finale prima di aggiornare la pubblicazione del sito sul Server.
Ora ho solo 1 richiesta da fare:
in modo simile ai bottoni di kataweb vorrei poter inserire delle linee orizzontali di separazione tra i vari bottoni ( oppure 1 perimetro a 360 gradi per ognuno), perchè adesso ho i bottoni personalizzabili ma non c'è alcuna separazione orizzontale tra i vari bottoni, ho 1 menù con 1 colore unico da cima a fondo, con bottoni che cambiano di colore solo quando vengono "accarezzati" dal mouse.
Lo sò, direte:" ma quanto è impiccioso questo quì, non si accontenta mai...".
Grazie ancora :wink:
Antonio :)
http://strisceblu.altervista.org
P.S.: per aeclanum --> hai ragione, i bottoni di kataweb non usano immagini ma cambiano solo di colore, l'ho notato subito visualizzando il suo html, perciò ho avuto l'idea di farlo pure io, solo che non ho la preparazione necessaria per farlo da solo (ho studiato html da autodidatta :cry: ).
Esempio:
<!-- barra di navigazione a destra -->
<div class="rightnav">
<a href="http://www.mio_sito.it/utility/mcafee/">Antivirus</a>
link n°2
link n°3
...etc etc ...
</div>
P.S. n° 2: spero che quanto richiesto possa arricchire l'esperienza di altri :idea:
P.S. n°3--> consiglio a tutti coloro che vogliono creare Menù Verticali con il CSS la guida pubblicata al link: http://www.constile.org/template/menu_verticali/
L'ho trovata davvero molto utile.
Spiega per bene tutte le voci necessarie nel compilare 1 Menù col CSS, con verifiche grafiche. Unico neo (che non pregiudica l'ottimo lavoro svolto): manca l'istruzione per inserire le linee orizzontali di separazione tra i vari bottoni.
Ancora grazie a tutti.
-
una bella linea di separazione si ottiene dando il bordo superiore bianco e quello inferiore nero ai vari bottoni
-
Ciao aeclanum :o , hai perfettamente ragione.
Ho aggiunto al CSS esterno il seguente codice:
a{
diplay:block;
background-color:#xxxxxx;
border:solid 1px black;
border-top:solid 1px white;
border-left:solid 1px white;
...
ecc.
}
e l'ho testato in locale per limarlo meglio.
Ora la modifica é on-line.
Se ti và puoi darci 1 occhiata.
Ancora 1 grazie a tutti per l'aiuto prestato :D .
Vorrei solo aggiungere 1 preghiera:
può l'ideatore dei Menù Verticali in CSS aggiungere al suo buon lavoro pure questa ultima personalizzazione?
Ho visto che oltre a saper fare sà anche spiegare bene (meglio di certi insegnanti :wink: ).
Antonio
http://strisceblu.altervista.org
-
Bravo! alla fine se si insiete si riesce sempre a fare qualcosa di bello!
