Proprietà dei link

[lavoroweb]

Salve a tutti, visitando un sito ho scaricato un css per dare un layout più carino alle tabelle. Questo css agisce anche sui link presenti nella tabella e quando il link è visitato mette al lato una spunta. A questo proposito vorrei che su alcuni link delle tabelle questa spunta non compaia. ho provato a creare una classe che agisca su tali link e l'ho applicata ma sembra non funzioni.

Posto il codice della classe da me creata:

a.frecce:link     { color:#FFFFFF; text-decoration: none; }
a.frecce:visited  { color:#FFFFFF; text-decoration: none; }
a.frecce:hover    { color:#FFFFFF; text-decoration: none; }
a.frecce:active   { color:#FFFFFF; text-decoration: none; }

come potete vedere ho delle frecce che utilizzo per l'ordinamento dei record e voglio che quando vengono cliccate non mi compaia questa spunta vicino.

Il codice invece del css che ho scaricato, almeno la parte che agisce è:

tbody td a[href="#"] {
	margin: 0 auto;
	display: block;
	width: 15px;
	height: 15px;
	background: transparent url('data:image/gif;base64,R0lGODlhDwAPAIAAACEpMf///yH5BAAAAAAALAAAAAAPAA8AAAIjjA8Qer0JmYvULUOlxXEjaEndliUeA56c97TqSD5pfJnhNxYAOw%3D%3D') no-repeat;
	text-indent: -999em;
	border-bottom: 0
}

tbody a:visited:after {
	font-family: Verdana,sans-serif;
	content: "\00A0\221A"
}

Qualcuno sa dirmi dove sbaglio? come si puo intuire non sono molto pratico di css....

Grazie

[lavoroweb]

Uppettino!!!

[Mich_]

Da quanto scrivi non e` possibile fare una dignosi.

Provo a riassumere in modo schematico quanto ho capito da quello che scrivi:
- avevo una pagina funzionante
- ho aggiunto un pezzo di CSS preso da un altro sito, e qualcosa che prima andava ora non va piu`

Ci sono comunque alcune cose che si possono dire:
1. i CSS devono essere scritti nell'ordine corretto: una dichiarazione successiva sovrascrive una precedente; pertanto prima va definito il comportamento generale, e poi quello specifico (classi e id)
2. a[href="#"] questa sintassi non e` riconosciuta dai browser IE fino alla versione 7, per cui non e` ancora utilizzabile in pratica
3. a:visited:after anche questo puo` avere problemi in qualche browser
4. l'url dell'immagine di sfondo usa una sintassi strana: ti conviene copiarti il file ed utilizzarlo con una sintassi standard
5. i caratteri usati presuppongono un charset utf-16 o altro sistema ad almeno 16 bit: lo hai dichiarato correttamente?

[lavoroweb]

Ciao Mich_ grazie per la risposta.

Cerco di spiegarmi meglio.

Prima di scaricare il css da questo sito non avevo implementato nessun foglio di stile per le tabelle quindi non c'è mai stato problema di paginazione con le tabelle.

Una volta scaricato questo css lo ho applicato e pare che tutto funzioni alla perfezione.

A questo punto però volevo apportare una modifica a questo css. La modifica che vorrei apportare riguarda proprio l'immagine di cui parli, quella strana. Questa immagine è una spunta, non so se è corretto il termine, è una v che si posiziona al lato del link una volta che è stato visitato.

Siccome all'interno delle tabelle ho inserito delle frecce per ordinare i risultati in modo crescente o decrescente, e visto che queste frecce sono dei link quando clicco su queste frecce mi si affianca l'immagine.

Cosa ho pensato di fare. Dichiarare una pseudo classe frecce ed applicare questa pseudo classe solo alla riga che contiene le frecce e lasciare il resto applicato alla tabella.

Però non funziona...

Spero di essermi spiegato emglio e di aver chiarito cosa voglio.

Grazie

[Mich_]

Spiegazioni a parole (piu` o meno contorte ), non servono molto.

Posta il codice HTML e CSS del pezzo; posta inoltre il DOCTYPE che usi.
E da quanto scrivi mi pare di intravvedere del JS: puo` essere un problema (la pagina viene modificata "al volo"), ma se c'e` devi postare anche quello.

Ma la cosa migliore sarebbe postare il link alla pagina (eventualmente anche in un sito provvisorio), per rendersi conto di cosa succede.

[lavoroweb]

Purtroppo il link non posso fartelo vedere è un back office protetto da pw...

questo è il codice relativo alla riga ed a una singola colonna con le frecce!!

<tr>
<td class="frecce">
<div align="center">
[img]../images/su.gif[/img]
/
[img]../images/giu.gif[/img]</div></td>
..
</tr>

questo è il css per la manipolazione delle tabelle

/**************************TABELLE***********************/







table {

	color: #7F7F7F;

	font: 0.8em/1.6em "Trebuchet MS",Verdana,sans-serif;

	border-collapse: collapse

}



table,caption {

	margin: 0 auto;

	border-right: 1px solid #CCC;

	border-left: 1px solid #CCC

}



caption,th,td {

	border-left: 0;

	padding: 10px

}



caption,thead th,tfoot th,tfoot td {

	background-color: #E63C1E;

	color: #FFF;

	font-weight: bold;

	text-transform: uppercase

}



thead th {

	background-color: #C30;

	color: #FFB3A6;

	text-align: center

}



tbody th {

	padding: 20px 10px

}



tbody tr.odd {

	background-color: #F7F7F7;

	color: #666

}



tbody a {

	padding: 1px 2px;

	color: #333;

	text-decoration: none;

	border-bottom: 1px dotted #E63C1E

}



tbody a:active,tbody a:hover,tbody a:focus,tbody a:visited {

	color: #666

}



tbody tr:hover {

	background-color: #EEE;

	color: #333

}



tbody tr:hover a {

	background-color: #FFF

}



tbody td+td+td+td a {

	color: #C30;

	font-weight: bold;

	border-bottom: 0

}



tbody td+td+td+td a:active,tbody td+td+td+td a:hover,tbody td+td+td+td a:focus,tbody td+td+td+td a:visited {

	color: #E63C1E

}



tbody td a[href="#"] {

	margin: 0 auto;

	display: block;

	width: 15px;

	height: 15px;

	background: transparent url('data:image/gif;base64,R0lGODlhDwAPAIAAACEpMf///yH5BAAAAAAALAAAAAAPAA8AAAIjjA8Qer0JmYvULUOlxXEjaEndliUeA56c97TqSD5pfJnhNxYAOw%3D%3D') no-repeat;

	text-indent: -999em;

	border-bottom: 0

}



tbody a:visited:after {

	font-family: Verdana,sans-serif;

	content: "\00A0\221A"

}


a.frecce:link     { color:#FFFFFF; text-decoration: none; }

a.frecce:visited  { color:#FFFFFF; text-decoration: none; }

a.frecce:hover    { color:#FFFFFF; text-decoration: none; }

a.frecce:active   { color:#FFFFFF; text-decoration: none; }

Nella pagina non uso codice js per il momento...
essendo una pagina php apro direttamente i tag html e body.. potrebbe essere questo il problema?

Grazie mille.

[Mich_]

Ho chiesto il coidce HTML, tu hai postato il PHP. Quello non serve.
Devi postare ilcodice come arriva al browser.
E manca il DOCTYPE.

Inoltre vedo tag e attributi di formattazione HTML: vanno in contrasto con la formattazine CSS, e vanno eliminati.

[lavoroweb]

Ecco il codice della pagina preso da ie 8, te lo incollo e tolgo un pò di cose che si ripetono all'interno.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../../layout/Style.css">
</head>
<body>
<link rel="stylesheet" type="text/css" href="Style.css">
<ul id="maintab">
<li class="selected">G[*]U[*]Ea[/list]
</div>
<div id="MENU">


Inserisci</p>
</div>

 
<form name="g" method="post" action="delete_.php">
 
<table width="99%">
<tr>
  <td class="frecce"><div align="center">[img]../../images/su.gif[/img]/ [img]../../images/giu.gif[/img]</div></td>
  
  <td class="frecce"><div align="center">[img]../../images/su.gif[/img]/ [img]../../images/giu.gif[/img]</div></td>
  <td class="frecce"><div align="center">[img]../../images/su.gif[/img]/ [img]../../images/giu.gif[/img]</div></td>
  
  <td class="frecce"><div align="center">[img]../../images/su.gif[/img]/ [img]../../images/giu.gif[/img]</div></td>
  <td class="frecce"><div align="center">[img]../../images/su.gif[/img]/ [img]../../images/giu.gif[/img]</div></td>
  
  <td class="frecce"><div align="center">[img]../../images/su.gif[/img]/ [img]../../images/giu.gif[/img]</div></td>
 
<td></td>
  <td></td>
  <td></td>
</tr>
<tr>
<td>M</td>
<td>M</td>
<td>A</td>
<td>A</td>
<td>[b]R[b]</td>
ALTRE COLONNE……………
</tr>
<tr>
<td>Add</td>
<td>Edit</td>
<td><input type="checkbox" name="elimina[]" value="26" /></td>
</tr>
</table>
</form>
</body>
</html>

Spero che sia quello che mi chiedevi...

Come vedo anche io c'è una anomalia, un foglio di stile richiamato dopo il body, questo perchè importo un header all'interno della pagina che a sua volta ha un foglio di stile suo...

Come faccio? richiamo il foglio di stile sopra e lo tolgo dall'header??

Grazie per la pazienza...

[Mich_]

Il codice sembra piu` HTML 4.0 transitional, che XHTML. L'ideale sarebbe passare a XHTML Strict, con il quale risolvi una buona meta` dei problemi con IE6 e IE7. Pero` in tal caso la sintassi va adeguata (pero` ci sono i validatori che aiutano a verificarla).

Comunque se vuoi poter sfruttare i CSS devi togliere i tag [b] ed i <div align="center"> che non servono e portano solo confusione. Anche il width="99%" va tolto dall'HTML e spostato nel CSS (se serve, perche` anche quello puo` essere eliminato, probabilmente)

Anche il padding all'interno di td, va un po' a contraddirsi con l'allineamento centrato.

Il <link type="text/css" ... /> andrebbe posto nella head. Funziona anche nel body, ma non e` buona programmazione: vuol dire che il tuo PHP e` stato realizzato senza un progetto preventivo.
E faccio notare che i due CSS linkati hanno lo stesso nome (sono lo stesso file?). E` una cosa che al browser puo` non dare fastidio, ma al programmatore che ci deve mettere mano crea confusione, e la confusione e` fonte di errori quasi sicuri.

Poi per quanto riguarda il problema specifico, se il CSS e` quello non dovrebbe accadere. Per cui ritengo sia un errore, che puo` essere nel secondo CSS, che potrebbe riscrivere qualche formattazione definita nel primo (ma questa e` una illazione; in realta` non ho visto l'errore).

Se togli la formattazione HTML come detto sopra, L'HTML e il CSS relativo alla riga delle frecce potrebbe diventare:

<tr class="frecce">
  <td>
    [img]../../images/su.gif[/img] / 
    [img]../../images/giu.gif[/img]
  </td>
  ...
</tr>

CSS:
.frecce td {
  text-align: center;
  font-weight: bold;
}
.frecce a, .frecce a:hover {
  color:#FFFFFF;
  text-decoration: none;
}
.frecce a img {
  width: 16px;
  height: 18px;
  border:0;
}

[lavoroweb]

ti ringrazio per il tuo aiuto ma purtroppo ancora non ho ottenuto il risultato che volevo. Ho aggiustato la parte html come mi hai suggerito ma la classe frecce non viene applicata alla riga...


Il css che vedi richiamato nel body è lo stesso foglio di stile richiamato nella pagina, è un "doppione".

Il problema è stato risolto in quanto ho creato degli header per ogni sezione ed all'interno dell'header viene richiamato il css... ed all'interno della pagina veniva richiamato di nuovo...

adesso l'ho tolto.


Grazie per l'aiuto che mi stai dando hai qualche altro suggerimento??