stili tabella

[hankie]

http://www.theinvaders.it/the_inv_htmlv1/foto.html

Quello che ho linkato e' una tabella che dovra contenere una galleria, vorrei applicare degli stili a:link
a:hover a: visited, ma non riesco a venirne a capo, questo e' il codice html che ho usato per creare la tabella:

<div id="tabgallery" class="datatable">
                
                <table>
                <caption>Dati Tabellari</caption>
                    
                    <tr>
                        
                        <td>[url="#"][img]picsbn/00bn_prw.jpg[/img][/url]</td>
                        <td>[url="#"][img]picsbn/00bn_prw.jpg[/img][/url]</td>
                        <td>[url="#"][img]picsbn/00bn_prw.jpg[/img][/url]</td>
                        <td>[url="#"][img]picsbn/00bn_prw.jpg[/img][/url]</td>
                        <td>[url="#"][img]picsbn/00bn_prw.jpg[/img][/url]</td>
                        <td>[url="#"][img]picsbn/00bn_prw.jpg[/img][/url]</td>
                    </tr>
                    <tr>
                        <
                        <td>[url="#"][img]picsbn/00bn_prw.jpg[/img][/url]</td>
                        <td>[url="#"][img]picsbn/00bn_prw.jpg[/img][/url]</td>
                        <td>[url="#"][img]picsbn/00bn_prw.jpg[/img][/url]</td>
                        <td>[url="#"][img]picsbn/00bn_prw.jpg[/img][/url]</td>
                        <td>[url="#"][img]picsbn/00bn_prw.jpg[/img][/url]</td>
                        <td>[url="#"][img]picsbn/00bn_prw.jpg[/img][/url]</td>
                    </tr>
                </table>
            </div> 

questa e' la classe (datatable) che ho applicato alla tabella:

/* TABELLA */
table{ border-collapse: collapse; caption-side: top; position:relative;margin:0 auto; }

.datatable a:link { 

}
.datatable a:visited { 


}
.datatable a:hover { 
position:relative;
border: 5px; border-style: solid; border-color: #000000;
 }

.datatable td {
padding: 3px;

}

.datatable th {


} 

come potete vedere il risultato e' abbastanza strano, il bordo si vede ma sono in basso !! perche ???

[Myaku]

non so se è quella la causa, ma mi è saltato all'occhio:

<tr>
                        <
                        <td>[img]picsbn/00bn_prw.jpg[/img]</td>

[hankie]

si infatti se guardi ci sta sto simbolo sulla sinistra...correggo !!
Ma non e' quello il problema !

[Myaku]

Originariamente inviato da hankie
si infatti se guardi ci sta sto simbolo sulla sinistra...correggo !!
Ma non e' quello il problema !

occhio che ho visto altri errori nel link che hai postato

[hankie]

?? la pagina e fatta in due minuti !! che tipo di errori ??

[Myaku]

Originariamente inviato da hankie
?? la pagina e fatta in due minuti !! che tipo di errori ??

valida la pagina il w3c ti spiega in dettaglio gli errori

[hankie]

ma non esiste in italiano sto benedetto validatore, non ci capisco una mazza !


che poi mi da errori incomprensibili tipo:

Line 83, Column 7: "html" not finished but document ended.
</html>

...e mi indica come errore il > di chiusura ???? ma che significa, non lo posso cancellare naturalmente !

[hankie]

Ok! ho risolto gli errori che mi dava sul validatore, ma il mio problema rimane comunque!
Qualcuno e' in grado di capire perche le pseudo classi della mia tabella si comportano cosi ?????



queste sono le correzzioni apportate:

<div id="tabgallery" class="datatable">
                
                <table>
                <caption>Dati Tabellari</caption>
                    
                    <tr>
                        
                        <td>[url="#"][img]picsbn/00bn_prw.jpg[/img][/url]</td>
                        <td>[url="#"][img]picsbn/00bn_prw.jpg[/img][/url]</td>
                        <td>[url="#"][img]picsbn/00bn_prw.jpg[/img][/url]</td>
                        <td>[url="#"][img]picsbn/00bn_prw.jpg[/img][/url]</td>
                        <td>[url="#"][img]picsbn/00bn_prw.jpg[/img][/url]</td>
                        <td>[url="#"][img]picsbn/00bn_prw.jpg[/img][/url]</td>
                    </tr>
                    <tr>
                        
                        <td>[url="#"][img]picsbn/00bn_prw.jpg[/img][/url]</td>
                        <td>[url="#"][img]picsbn/00bn_prw.jpg[/img][/url]</td>
                        <td>[url="#"][img]picsbn/00bn_prw.jpg[/img][/url]</td>
                        <td>[url="#"][img]picsbn/00bn_prw.jpg[/img][/url]</td>
                        <td>[url="#"][img]picsbn/00bn_prw.jpg[/img][/url]</td>
                        <td>[url="#"][img]picsbn/00bn_prw.jpg[/img][/url]</td>
                    </tr>
                </table> 

CSS:

/* TABELLA */
.table{ border-collapse: collapse; caption-side: top; position:relative; margin:0 auto; }

.datatable a:link { 
border-width: 1px;
border-style: solid;
border-color:#000000; 
}
.datatable a:visited { 


}
.datatable a:hover { 

border-width: 5px;
border-style: solid;
border-color:#000000; 
 }

.datatable a:active { 
 
 }

.datatable td {
padding: 5px;

}

.datatable th {


} 

[Mich_]

In pratica tu stai cambiando stile all':hover.
In un caso inserisci un posizionamento, nell'altro cambi i bordi.
Questo chiaramente comporta modifiche nel layout comlessivo, e questo non sta bene all'occhio.

Quello che puoi fare e` cambiare colore al bordo (in un caso puoi farlo del colore dello sfondo in modo che non si veda), ma se cambi la dimensione tutto il layout ne viene modificato, dato che cambia la larghezza totale della tabella.

Stesso discorso per il posizionamento: se lo cambi tutto il layout viene a cambiare aspetto, o altri blocchi si devono spostare per permettere il cambio.

[hankie]

Originariamente inviato da Mich_
In pratica tu stai cambiando stile all':hover.
In un caso inserisci un posizionamento, nell'altro cambi i bordi.
Questo chiaramente comporta modifiche nel layout comlessivo, e questo non sta bene all'occhio.

Quello che puoi fare e` cambiare colore al bordo (in un caso puoi farlo del colore dello sfondo in modo che non si veda), ma se cambi la dimensione tutto il layout ne viene modificato, dato che cambia la larghezza totale della tabella.

Stesso discorso per il posizionamento: se lo cambi tutto il layout viene a cambiare aspetto, o altri blocchi si devono spostare per permettere il cambio.

Ma io non assegno nessun posizionamento alla tabella ! e anche eliminando tutto il TABLE, posizionamento relativo e bordi, non cambia molto, anzi non cambia niente !

Scusami ancora non capisco, un po di pazienza !!!

grazie mille