Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 18

Discussione: CSS e rollover

  1. #1
    Utente di HTML.it
    Registrato dal
    Mar 2001
    Messaggi
    13

    CSS e rollover

    ciao a tutti!
    Sto utilizzando i CSS per far si che, al passaggio del mouse su un link, cambi il colore di sfondo della cella che lo contiene.
    Ho seguito tutto quello indicato in http://pro.html.it/articoli/id_201/idcat_8/. Ma tutto funziona bene se l'altezza del font e della cella coincidono. Se si crea una cella piu alta (ad esempio 30px), il rollover avviene solo su 12px, ossia l'altezza del testo.

    qualcuno sa come cambiare colore a tutta la cella, indipendentemente dall'altezza del testo?
    alluz

  2. #2
    Utente di HTML.it L'avatar di Dr Mal
    Registrato dal
    Apr 2002
    Messaggi
    2,536

    Re: CSS e rollover

    Originariamente inviato da alluz
    ciao a tutti!
    Sto utilizzando i CSS per far si che, al passaggio del mouse su un link, cambi il colore di sfondo della cella che lo contiene.
    Ho seguito tutto quello indicato in http://pro.html.it/articoli/id_201/idcat_8/. Ma tutto funziona bene se l'altezza del font e della cella coincidono. Se si crea una cella piu alta (ad esempio 30px), il rollover avviene solo su 12px, ossia l'altezza del testo.

    qualcuno sa come cambiare colore a tutta la cella, indipendentemente dall'altezza del testo?
    Devi agire sul "background-color" della cella,
    [Proteggiamo la Natura e gli Animali: appartengono alle cose più belle che ci sono state donate.]

  3. #3
    prova inserendo:
    position:relative; display: block;
    Se per ogni sbaglio avessi 1000 Lire che vecchiaia che passerei! [Non è tempo per noi - Ligabue]
    Strade?! Dove andiamo noi non ci servono.....strade!

  4. #4
    Utente di HTML.it
    Registrato dal
    Mar 2001
    Messaggi
    13
    Ciao, Dr Mal!
    il bg della cella e' gia' impostato. il punto e' fargli fare il rollover!

    <style type="text/css">
    <!--
    .bordotab {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 40px;
    color: #000000;
    background-color: #FFFFCC;
    border-top-width: 1px;
    border-right-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-left-style: solid;
    border-top-color: #000000;
    border-right-color: #000000;
    border-left-color: #000000;
    }
    .classetd {
    height:30px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #000000;
    display: block;
    background-color: #FFFFCC;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #000000;
    }
    .classetd a {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000099;
    display: block;
    text-decoration: none;
    }
    .classetd a:hover {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #CC0000;
    display: block;
    text-decoration: none;
    background-color: #CCFFFF;
    }
    -->
    </style>
    </head>

    <body>
    <table width="100%" border="0" cellpadding="1" cellspacing="0" class="bordotab">
    <tr>
    <td class="classetd">Menu 1</td>
    </tr>
    <tr>
    <td class="classetd">Menu 2</td>
    </tr>
    <tr>
    <td class="classetd">Menu 3</td>
    </tr>
    <tr>
    <td class="classetd">Menu 4</td>
    </tr>
    <tr>
    <td class="classetd">Menu 5</td>
    </tr>
    <tr>
    <td class="classetd">Menu 6</td>
    </tr>
    </table>
    alluz

  5. #5
    Originariamente inviato da Saturno83
    prova inserendo:
    position:relative; display: block;
    alluz la soluzione di saturno83 è quella giusta....metti tutto in a:link e a:hover!!!


    Anche io leggo barze-bastarde
    Athlon 64 X2 4400@2500 daily - Zalman CNPS9500 - Asus A8n-Sli Premium - Crucial Ballistix Tracer PC4000 500mhz Sinc. - Sapphire Radeon X1900XT 512mb - Zalman VF900Cu - Seagate 320Gb 7200.10 - LG H22N 18x - T.t. Soprano - LcPower Titan 560W

  6. #6
    Utente di HTML.it
    Registrato dal
    Mar 2001
    Messaggi
    13
    ora provo
    grazie!
    alluz

  7. #7
    Utente di HTML.it L'avatar di Dr Mal
    Registrato dal
    Apr 2002
    Messaggi
    2,536
    Originariamente inviato da alluz
    ora provo
    grazie!
    Alluz, prova cosi':

    codice:
    <html> 
    <head> 
    <title>Ecco Qua</title> 
    <style> 
    a:link { color:#000033; text-decoration:none; font-family: Verdana; font-size: 10px;position:relative;display:block;} 
    a:hover { color:#FF0000; text-decoration:none; font-family: Verdana; font-size: 10px; 10px; background:#98d9f4;position:relative;dis
    play:block;border:1px solid #05c1ff;} 
    a:visited { color:#000033; text-decoration:none; font-family: Verdana; font-size: 10px;} 
    
    </style> 
    </head> 
    <body> 
    <table width="100%" border="0" cellpadding="1" cellspacing="0" class="bordotab"> 
    <tr> 
    <td class="classetd">Menu 1</td> 
    </tr> 
    <tr> 
    <td class="classetd">Menu 2</td> 
    </tr> 
    <tr> 
    <td class="classetd">Menu 3</td> 
    </tr> 
    <tr> 
    <td class="classetd">Menu 4</td> 
    </tr> 
    <tr> 
    <td class="classetd">Menu 5</td> 
    </tr> 
    <tr> 
    <td class="classetd">Menu 6</td> 
    </tr> 
    </table></html>
    Fammi sapere!
    [Proteggiamo la Natura e gli Animali: appartengono alle cose più belle che ci sono state donate.]

  8. #8
    Originariamente inviato da Dr Mal
    Alluz, prova cosi':

    codice:
    <html> 
    <head> 
    <title>Ecco Qua</title> 
    <style> 
    a:link { color:#000033; text-decoration:none; font-family: Verdana; font-size: 10px;position:relative;display:block;} 
    a:hover { color:#FF0000; text-decoration:none; font-family: Verdana; font-size: 10px; 10px; background:#98d9f4;position:relative;dis
    play:block;border:1px solid #05c1ff;} 
    a:visited { color:#000033; text-decoration:none; font-family: Verdana; font-size: 10px;} 
    
    </style> 
    </head> 
    <body> 
    <table width="100%" border="0" cellpadding="1" cellspacing="0" class="bordotab"> 
    <tr> 
    <td class="classetd">Menu 1</td> 
    </tr> 
    <tr> 
    <td class="classetd">Menu 2</td> 
    </tr> 
    <tr> 
    <td class="classetd">Menu 3</td> 
    </tr> 
    <tr> 
    <td class="classetd">Menu 4</td> 
    </tr> 
    <tr> 
    <td class="classetd">Menu 5</td> 
    </tr> 
    <tr> 
    <td class="classetd">Menu 6</td> 
    </tr> 
    </table></html>
    Fammi sapere!

    nove minuti per un copia e incolla!!! :gren:
    Anche io leggo barze-bastarde
    Athlon 64 X2 4400@2500 daily - Zalman CNPS9500 - Asus A8n-Sli Premium - Crucial Ballistix Tracer PC4000 500mhz Sinc. - Sapphire Radeon X1900XT 512mb - Zalman VF900Cu - Seagate 320Gb 7200.10 - LG H22N 18x - T.t. Soprano - LcPower Titan 560W

  9. #9
    Utente di HTML.it L'avatar di Dr Mal
    Registrato dal
    Apr 2002
    Messaggi
    2,536
    Originariamente inviato da herrel
    nove minuti per un copia e incolla!!! :gren:
    :zamm:

    Sto ancora aspettando ke tu mi risolva il prob di compatibilità della scroll (con css) x mozzilla...... :gren:
    [Proteggiamo la Natura e gli Animali: appartengono alle cose più belle che ci sono state donate.]

  10. #10
    Utente di HTML.it
    Registrato dal
    Mar 2001
    Messaggi
    13
    quanto segna il tuo cronometro?
    -------------------------------------------

    si, ok, ma se ho bisogno di una cella + alta del font, diciamo

    <td height="30">Menu 1</td>

    il gioco del rollover non si estende su 30 px, ma solo sui 10 del font.
    alluz

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.