hover impostare bordo
- Creatore Discussione andreahrc
- Data di inizio
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento senza titolo</title>
<style type="text/css">
<!--
table:hover {border:5px solid #00FF00;}
tr.pari:hover td {border:1px solid #FF0000;}
tr.dispari:hover td {border:1px solid #0000FF;}
-->
</style></head>
<body>
<table>
<tr class="dispari">
<td>dispari 1</td>
<td>dispari 2</td>
<td>dispari 3</td>
</tr>
<tr class="pari">
<td >pari 1</td>
<td >pari 2</td>
<td >pari 3</td>
</tr>
<tr class="dispari">
<td>dispari 4</td>
<td>dispari 5</td>
<td>dispari 6</td>
</tr>
<tr class="pari">
<td>pari 4</td>
<td>pari 5</td>
<td>pari 6</td>
</tr>
</table>
</body>
</html>Questo funziona, l'unica pecca è che ovviamente non puoi non visualizzare il bordo tra una cella e l'altra orizzontalmente (come immagino ti aspettassi).
Fammi risapere
Ultima modifica:
infatti si vede il bordo di tutte le celle invece io vorrei avere solo il perimetro della riga, inoltre come ci passo sopra il mouse riaggiusta il layout dunque con il pixel del bordo fa un effetto movimento del testo che non mi piace
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Righe Pari Rosso, Dispari Blu</title>
<style type="text/css">
<!--
table {border:5px solid #00FF00;}
tr.pari td {border:1px solid #FFFFFF;}
tr.pari:hover td.pari1 {border-bottom:1px solid #FF0000; border-top:1px solid #FF0000; border-left:1px solid #FF0000;}
tr.pari:hover td.pari2 {border-bottom:1px solid #FF0000; border-top:1px solid #FF0000;}
tr.pari:hover td.pari3 {border-bottom:1px solid #FF0000; border-top:1px solid #FF0000; border-right:1px solid #FF0000;}
tr.pari:hover td.pari4 {border-bottom:1px solid #FF0000; border-top:1px solid #FF0000; border-left:1px solid #FF0000;}
tr.pari:hover td.pari5 {border-bottom:1px solid #FF0000; border-top:1px solid #FF0000;}
tr.pari:hover td.pari6 {border-bottom:1px solid #FF0000; border-top:1px solid #FF0000; border-right:1px solid #FF0000;}
tr.dispari td {border:1px solid #FFFFFF;}
tr.dispari:hover td.dispari1 {border-bottom:1px solid #0000FF; border-top:1px solid #0000FF; border-left:1px solid #0000FF;}
tr.dispari:hover td.dispari2 {border-bottom:1px solid #0000FF; border-top:1px solid #0000FF;}
tr.dispari:hover td.dispari3 {border-bottom:1px solid #0000FF; border-top:1px solid #0000FF; border-right:1px solid #0000FF;}
tr.dispari:hover td.dispari4 {border-bottom:1px solid #0000FF; border-top:1px solid #0000FF; border-left:1px solid #0000FF;}
tr.dispari:hover td.dispari5 {border-bottom:1px solid #0000FF; border-top:1px solid #0000FF;}
tr.dispari:hover td.dispari6 {border-bottom:1px solid #0000FF; border-top:1px solid #0000FF; border-right:1px solid #0000FF;}
-->
</style></head>
<body>
<table width="500" cellspacing="0" cellpadding="0">
<tr class="dispari">
<td class="dispari1">dispari 1</td>
<td class="dispari2">dispari 2</td>
<td class="dispari3">dispari 3</td>
</tr>
<tr class="pari" >
<td class="pari1">pari 1</td>
<td class="pari2">pari 2</td>
<td class="pari3">pari 3</td>
</tr>
<tr class="dispari">
<td class="dispari4">dispari 4</td>
<td class="dispari5">dispari 5</td>
<td class="dispari6">dispari 6</td>
</tr>
<tr class="pari">
<td class="pari4">pari 4</td>
<td class="pari5">pari 5</td>
<td class="pari6">pari 6</td>
</tr>
</table>
</body>
</html>Qui rimane che tra una cella e l'altra si può notare lo stacco dei bordi sopra e sotto, ma meglio di così proprio non so cosa farti.
Si il fatto è che io le div non le ho mai usate dunque non saprei da dove iniziare
inoltre...dato che a quanto pare te la cavi molto bene con i css, ho un input type text che non mi riesce di allinearlo verticalmente mi sai dire come vengono trattati dai css?
inoltre...dato che a quanto pare te la cavi molto bene con i css, ho un input type text che non mi riesce di allinearlo verticalmente mi sai dire come vengono trattati dai css?
Basta che al tag input applichi una classe in css ti spiego:
Mentre nel css ci metti:
La tua domanda non è per niente chiara ma spero che questa spiegazione ti possa bastare a risolvere il problema, anche perchè è la prima volta che ho a che fare con una textbox XD.
Se comunque qualcosa non ti torna inserisci più dettagli e vediamo cosa si può fare.
Ciau ^^
HTML:
<input class="inputboxstyle" />Mentre nel css ci metti:
Codice:
input.inputboxstyle {/*va bene anche se metti solo .inputboxstyle, basta il nome della classe in questo caso*/
width:30px; /*Che sarebbe la larghetta */
height:15px; /*Che sarebbe l'altezza */
vertical-align:text-bottom; /*Che come si decuce facilmente è l'allineamento verticale dell'elemento (quello che cerchi tu)*/
border:2px solid #0066CC; /*che sono i parametri per i bordi della textbox*/}La tua domanda non è per niente chiara ma spero che questa spiegazione ti possa bastare a risolvere il problema, anche perchè è la prima volta che ho a che fare con una textbox XD.
Se comunque qualcosa non ti torna inserisci più dettagli e vediamo cosa si può fare.
Ciau ^^
Discussioni simili
