- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- Link del menu con effetto rollover fatto con i soli CSS
-
in generale ti direi di non impostare la larghezza e lasciare che sia automatica, però se posti un po di codice è meglio...
-
Ciao, dovresti spiegarti un po' meglio, perchè non so se ho capito bene quale sia il tuo problema.
E' del tutto normale che non tutti i pulsanti abbiano la stessa dimensione. La soluzione è nel conoscere la larghezza esatta delle singole immagini, e quindi impostare la larghezza esatta di ogni cella.
Ma più semplicemente come già detto da riky, puoi lasciare che la tabela si adatti da sola all'immagine senza impostare il parametro weight.
Questa soluzione è più scalabile perchè funziona sempre, anche nel caso poi modificassi in seguito le dimensioni delle immagini.
-
mi spiego meglio: sto riscrivendo il codice del mio sitio internet http://www.davidemuci.it utilizzando i css e l'xhtml.
Il mio problema che il menù orrizzontale è stato fatto in JS. Mi piacerebbe ricreare lo stesso effetto con in CSS ma non se è possibile.
-
apparentemente dovresti fare una classe (o un id) x ogni voce del menù (visto che ognuna avrà un background diverso) poi cambi il background con :hover
-
Personalmente credo che, cercando di conservare il codice della tua pagina, puoi fare così:
ogni tasto nella tua pagina è fatta da due immagini sovrapposte. Una di sfondo e una che contiene il testo.
Quindi lasciando lo sfondo invariato, puoi interessarti al codice che riguarda l'immagine con testo.Ad esempio il link alla home:
<TD vAlign=center align=middle width=118 height=31>[url="javascript:;"]![image](Davide Muci fotografo e SEO specialist - fotografia di danza, sportiva, di scena, sociale - web marketing specialist_file/home.gif)</TD>
Puoi modificarlo sostituendo questo codice:
<TD vAlign=center align=middle width=118 height=31>[url="http://www.davidemuci.it/"]HOME</TD>
Poi ti modifichi lo stile dal CSS a tuo piacimento.
In questo modo elimini solo un'immagine, quella con il testo, ma lo sfondo rimane.
Ne hai anche il vantaggio di avere dei link testuali.Ho fatto qualche tentativo e si vede bene con Explorer. Prova la modifica e testala con vari browser e risoluzioni.
Non so se a te piace così. Ma l'effetto non cambia di molto, se non per il font.
-
Riporto qui un link che spiega bene un bel pò di cose in maniera chiara
[url=http://www.gdesign.it/pages/howto/articoli/rollcss/rollcss.php]Rollover css
Inoltre ho editato il title del post
-
Mi è venuta un'idea bizzarra: se facessi 5 include, ciascuno per ogni voce del menù non ci sarebbe più il problema della larghezza variabile. Portrei quindi posizionare il rollover con background-position!
Che ne dite?
-
non ho capito...
-
scusate ho detto una cazzata
-
problema risolto:
1- ho creato un bottone con photoshop con lo stesso sfondo del mio menu
2- ho scritto una voce del menù ad esempio - Home -
3- a questo punto ho fatto in modo che la scritta home diventasse trasparente. in pratica l'ho selezionata con la bacchetta magica e poi ho premuto canc.
4- a questo punto basta sistemare il foglio di stile:
<style type="text/css">
<!--#home a{background: white;}
a:hover{background: yellow;}
-->
</style>[/img]
-
ingengoso
controlla che funzioni con tutti i browser
-
L'importante è che tu abbia risolto
-
l'avevo provato anch'io ma ha un problema (spero per te che derivi dalla grandezza delle immagini) il rollover era in ritardo, invece del normale c'era un attimo in cui tutto era bianco e l'effetto faceva schifino...
se ti va bene fammelo sapere
-
@esteban said:
l'avevo provato anch'io ma ha un problema (spero per te che derivi dalla grandezza delle immagini) il rollover era in ritardo, invece del normale c'era un attimo in cui tutto era bianco e l'effetto faceva schifino...
se ti va bene fammelo saperequesta è un cosa che mi succede spesso con IE (ovviamente solo con lui) e sinceramente non sono mai riuscito a risolverlo...
-
Vi riferite al flickering?
Ho letto un articolo il quale diceva che per eliminare questo fenomeno è sufficiente specificare lo stesso sfondo dei link anche sul list-item.