problema css : hover{}

**unbreker** · 25-11-2013, 14:48

ciao a tutti stavo giocando con i css e mi è uscito fuori un problema di cui non ne conosco la causa, ne capite qualcosa?

ho una tabella con 5 colonne, quando il mouse è sopra cambia il colore di sfondo da nero a grigio, mi sono reso conto che nella prima e nell'ultima colonna questo non avviene...
Volevo inserire il codice in in uno spoiler ma non lo trovo scusatemi.

codice:

<html><head>
<link rel="stylesheet" type="text/css" href="untitled.css">
</head>


<body>
<div class="testa">
    <table id="contenitore">
    <tr>
        <td id="home">
            <p>Home</p>
        </td>
        <td id="tutorial">
            <p>Tutorial</p>
        </td>
        <td id="collabora">
            <p>Collabora</p>
        </td>
        <td id="galleria">
            <p>Galleria</p>
        </td>
        <td id="blog">
            <p>Blog</p>
        </td>
        
    </tr>
    </table>
</div>


</body>


</html>

codice:

body{    font-family: Ubuntu;
    background-color: #000;
    margin: 0 auto;
    width: 100%;
    height: 100%;


}
p{
    color: #A8E401;
}
td{
    text-align: center;
}
.testa{
    position:relative;
    height: 100px;
    width: 76%;
    left: 12%;
    right: 12%;
    margin-top: -90px;
    border-bottom: 1px dashed #A8E401;
    background-image: -moz-linear-gradient(top,  rgba(58, 58, 58, 1) 0%, rgba(168, 228, 1, 1) 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(58, 58, 58, 1)), color-stop(100%,rgba(168, 228, 1, 1)));
    background-image: -webkit-linear-gradient(top,  rgba(58, 58, 58, 1) 0%,rgba(168, 228, 1, 1) 100%);
    background-image: -o-linear-gradient(top,  rgba(58, 58, 58, 1) 0%,rgba(168, 228, 1, 1) 100%);
    background-image: -ms-linear-gradient(top,  rgba(58, 58, 58, 1) 0%,rgba(168, 228, 1, 1) 100%);
    background-image: linear-gradient(to bottom,  rgba(58, 58, 58, 1) 0%,rgba(168, 228, 1, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3A3A3a', endColorstr='#A8E401',GradientType=0 );
    opacity: 1;
    border-radius: 0px 0px 10px 10px;
    -webkit-border-radius: 0px 0px 10px 10px;
    -moz-border-radius: 0px 0px 10px 10px;
    -ms-border-radius: 0px 0px 10px 10px;
    -o-border-radius: 0px 0px 10px 10px;
    transition:All 0.3s ease-in-out;
    -webkit-transition:All 0.3s ease-in-out;
    -moz-transition:All 0.3s ease-in-out;
    -o-transition:All 0.3s ease-in-out;
}
.testa:hover{
    transform: translateY(90px);
    -webkit-transform: translateY(90px);
    -moz-transform: translateY(90px);
    -o-transform: translateY(90px);
    -ms-transform: translateY(90px);
    transform: translateY(90px);
}
#contenitore{
    position: absolute;
    border: none;
    width: 100%;
    height: 25px;
    bottom: -25px;




}
#home{
    border-radius: 10px 0px 10px 0px;
    -webkit-border-radius: 10px 0px 10px 0px;
    -moz-border-radius: 10px 0px 10px 0px;
    -ms-border-radius: 10px 0px 10px 0px;
    -o-border-radius: 10px 0px 10px 0px;
    background-color: #000;    
    transition:All 0.2s ease-in-out;
    -webkit-transition:All 0.2s ease-in-out;
    -moz-transition:All 0.2s ease-in-out;
    -o-transition:All 0.2s ease-in-out;
}


}
#home:hover{
    background-color: #333;
}


#tutorial{
    border-radius: 0px 0px 10px 10px;
    -webkit-border-radius: 0px 0px 10px 10px;
    -moz-border-radius: 0px 0px 10px 10px;
    -ms-border-radius: 0px 0px 10px 10px;
    -o-border-radius: 0px 0px 10px 10px;
    background-color: #000;
    transition:All 0.2s ease-in-out;
    -webkit-transition:All 0.2s ease-in-out;
    -moz-transition:All 0.2s ease-in-out;
    -o-transition:All 0.2s ease-in-out;
}
#tutorial:hover{
    background-color: #333;
}
#collabora{
    border-radius: 0px 0px 10px 10px;
    -webkit-border-radius: 0px 0px 10px 10px;
    -moz-border-radius: 0px 0px 10px 10px;
    -ms-border-radius: 0px 0px 10px 10px;
    -o-border-radius: 0px 0px 10px 10px;
    background-color: #000;
    transition:All 0.2s ease-in-out;
    -webkit-transition:All 0.2s ease-in-out;
    -moz-transition:All 0.2s ease-in-out;
    -o-transition:All 0.2s ease-in-out;
}
#collabora:hover{
    background-color: #333;
}


#galleria{
    border-radius: 0px 0px 10px 10px;
    -webkit-border-radius: 0px 0px 10px 10px;
    -moz-border-radius: 0px 0px 10px 10px;
    -ms-border-radius: 0px 0px 10px 10px;
    -o-border-radius: 0px 0px 10px 10px;
    background-color: #000;
    transition:All 0.2s ease-in-out;
    -webkit-transition:All 0.2s ease-in-out;
    -moz-transition:All 0.2s ease-in-out;
    -o-transition:All 0.2s ease-in-out;
}
#galleria:hover{
    background-color: #333;
}
#blog{
    border-radius: 0px 0px 10px 10px;
    -webkit-border-radius: 0px 0px 10px 10px;
    -moz-border-radius: 0px 0px 10px 10px;
    -ms-border-radius: 0px 0px 10px 10px;
    -o-border-radius: 0px 0px 10px 10px;
    background-color: #000;
    transition:All 0.2s ease-in-out;
    -webkit-transition:All 0.2s ease-in-out;
    -moz-transition:All 0.2s ease-in-out;
    -o-transition:All 0.2s ease-in-out;
}


}
#blog:hover{
    background-color: #333;
}

**ac_socmel** · 25-11-2013, 17:18

hai delle parentesi in eccesso
bilancia bene aperture e chiusure

**unbreker** · 26-11-2013, 14:44

homer-simpson-doh.jpg grazie

percaso c'è un programma che mi sgama errori di sintassi?

**ac_socmel** · 26-11-2013, 14:52

non credo
ma basta che scrivi le cose a mano senza fare copia e incolla e certi errori li eviti alla grande

**unbreker** · 26-11-2013, 15:30

Originariamente inviata da ac_socmel

non credo
ma basta che scrivi le cose a mano senza fare copia e incolla e certi errori li eviti alla grande

Presupponi....
Chiedi a gedit se ho copi/ncollato...

http://csslint.net/ e altre web-app aiutano. Grazie comunque

**ac_socmel** · 26-11-2013, 15:58

non credo che un editor aggiunga caratteri random
controlla le impostazioni e il tuo modus operandi

ho guardato il link e non sono molto convinto, ma a qualcuno potrebbe anche servire

**unbreker** · 26-11-2013, 16:21

esatto, il modus operandi; errore di distrazione.
Controllare 168 righe di codice ad occhio nn è facile...
proprio perchè non uso programmi a click di mouse, una doppia graffa è probabile e, dall'aver visto due graffe mi è parso assurdo saltare alla conclusione che abbia copiato e incollato il codice...
Mi dispiace dovermi impuntare, perchè sei stato disponibile a farmi accorgere dell'errore... ma ho "rosicato" dato che nn ho mai usato una GUI per scrivere codice.
Dall'altra ti ringrazio della "presunzione" che un pò di stizza m'aiuta a fare meglio
Credo di doverti consigliare di non fare di tutta l'uva trovata bottiglie di aceto.

Discussione: problema css : hover{}

Strumenti discussione

Ricerca discussione

Visualizza

problema css : hover{}

Permessi di invio