Vai al contenuto

link css

stewie

Da stewie
in Web design e sistemisti

Messaggi raccomandati

stewie

stewie

Inviato
Inviato

Ciao,

domanda banale ma non sono un professionista del web...

Vorrei fare un link con la funzione a:hover che preveda un cambiamento di colore nello sfondo.

Questo è quello che riesco a fare usando questo css:

a:hover {

font-family: Geneva, Arial, Helvetica, sans-serif;

font-size: 12px;

line-height: 14px;

text-decoration: none;

color: #000000;

background-color: #669933;

display: block;

text-align: left;

}

.default {

font-family: Geneva, Arial, Helvetica, sans-serif;

font-size: 12px;

line-height: 14px;

text-decoration: none;

font-style: normal;

font-weight: normal;

color: #999999;

text-align: left;

vertical-align: middle;

}

.linkdefault {

font-family: Geneva, Arial, Helvetica, sans-serif;

font-size: 12px;

line-height: 14px;

text-decoration: underline;

color: #999999;

text-align: left;

I problemi sono 2:

1) Con safari non si vede, con Firefox ed IE sì

2) Non riesco ad aumentare la dimensione del fondo colorato, o meglio, ci riesco ma se inserisco un'altezza nell'a:hover poi non mi tiene centrato il testo del link.

Conscio di essere stato più che confuso spero nel vostro aiuto :ciao:

Grazie

I problemi più complessi hanno soluzioni semplici, facili da comprendere e sbagliate.

[Legge di Grossman]

Link al commento
Condividi su altri siti
Ce

Ce

Inviato
Inviato

Ahiahiahiahi :ciao: :ciao: :ciao:

Da dove comincio?

1. Nel css devi definire i link in un determinato ordine: Link, Visited, Hover, Active. Non puoi definire hover senza aver definito i precedenti, e a quel punto sfrutta i css, in a:hover metti solamente quello che cambia, ossia lo sfondo.

2. Perchè dai una classe ai link? Definendo a:hover e basta ottieni lo stesso risultato.

3. Hai una classe, .default, che hai specificato ma poi non usi nell'html. Ha una qualche ragione?

4. Quella è una lista di link, dovresti usare <ul> e <li> e non <tr> e <td>.

5. Le gif per fare spazio no, per favore no...

Questo codice si vede anche su Safari e risolve anche il problema dell'altezza della riga:

Ho eliminato le classi dai link in prova.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>PROVA - ITALIAMAC</title>
<link href="zero.css" rel="stylesheet" type="text/css">
</head>

<body>
<table border="0" cellspacing="0" cellpadding="0">
 <tr>
   <td colspan="2"><img src="immagini/spazio.gif" width="500" height="5"></td>
 </tr>
 <tr>
   <td width="59"><img src="immagini/spazio.gif" width="50" height="30"></td>
   <td width="471"><a href="http://www.italiamac.it/forum/" target="_blank">link 1</a></td>
 </tr>
 <tr>
   <td><img src="immagini/spazio.gif" width="50" height="30"></td>
   <td><a href="http://www.italiamac.it/forum/" target="_blank">link 2</a></td>
 </tr>
 <tr>
   <td><img src="immagini/spazio.gif" width="50" height="30"></td>
   <td><a href="http://www.italiamac.it/forum/" target="_blank">link 3</a></td>
 </tr>
</table>
</body>
</html>

E semplificato il css:

a, a:link, a:visited, a:active {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px; /* inserisci qui l'altezza della riga */
color: #000000;
display: block;
text-align: left;
}

a:hover {
background-color: #669933;
}

Il passo successivo sarebbe eliminare la tabella da sostituire con un div, creare una lista con <ul> e gestire le distanze con il css e non con una gif... :shock:

Link al commento
Condividi su altri siti
stewie

stewie

Inviato
  • Autore
Inviato

Grazie, adesso provo...

3) la pagina di "prova" è stata creata partendo da quello che stavo facendo... ho tolto il testo (che era associato a .default) e lasciato i link.

I problemi più complessi hanno soluzioni semplici, facili da comprendere e sbagliate.

[Legge di Grossman]

Link al commento
Condividi su altri siti
Ce

Ce

Inviato
Inviato
Grazie, adesso provo...

3) la pagina di "prova" è stata creata partendo da quello che stavo facendo... ho tolto il testo (che era associato a .default) e lasciato i link.

Ah ok, ha senso. Chiedevo perchè non mi piacciono i css "ridondanti". IMHO il css deve contenere il minimo indispensabile, ed essere scritto in maniera da sfruttarne al massimo le potenzialità. Ti faccio un esempio, il codice che ho scritto ieri sera:

 a, a:link, a:visited, a:active {
   font-family: Geneva, Arial, Helvetica, sans-serif;
   font-size: 12px;
   line-height: 18px; /* inserisci qui l'altezza della riga */
   color: #000000;
   display: block;
   text-align: left;
}

a:hover {
   background-color: #669933;
}

Se lo trasformo cosi:

body {
   font-family: Geneva, Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: #000000; 
}

a, a:link, a:visited, a:active {
   line-height: 18px; /* inserisci qui l'altezza della riga */
   display: block;
   text-align: left;
}

a:hover {
   background-color: #669933;
}

Prendo due piccioni con una fava: definisco body, che è il primo tag e non dovrebbe mai mancare, e TUTTI i tag successivi, a meno che non specifico diversamente, saranno in Geneva o simili in 12px nero. Se poi volessi un titolo h1 nello stesso font e colore ma diversa grandezza, basta che definisco solo le caratteristiche che cambiano:

h1 {
   font-size: 14px;
}

Immagina il numero di righe che risparmio mettendone tre all'inizio...

:)

Link al commento
Condividi su altri siti
stewie

stewie

Inviato
  • Autore
Inviato

Ok, funziona... non avevo messo "display:block" nel "a:link".

Terrò conto dei tuoi consigli e cercherò di imparare a progettare seriamente una pagina web... per ora rimango fedele alla carta!

I problemi più complessi hanno soluzioni semplici, facili da comprendere e sbagliate.

[Legge di Grossman]

Link al commento
Condividi su altri siti
Ce

Ce

Inviato
Inviato
Ok, funziona... non avevo messo "display:block" nel "a:link".

Terrò conto dei tuoi consigli e cercherò di imparare a progettare seriamente una pagina web... per ora rimango fedele alla carta!

Anche io parto sempre dalla carta, a volte dai pennarelli, e sempre a computer spento. Hai delle ottime basi se vieni dalla carta, la tecnica si impara... spero di averti fatto venire un po' di voglia di approfondire!

:)

Link al commento
Condividi su altri siti

Archiviato

Questa discussione è archiviata e chiusa a future risposte.

Vai alla lista discussioni
×
×
  • Crea Nuovo...