| Precedente :: Successivo |
| Autore |
Messaggio |
xbandx
Eroe
Registrato: 31/05/06 22:12
Messaggi: 41
|
 Inviato: 04 Apr 2007 00:51 Oggetto: immagine di fondo come link nel css... |
 |
|
e' possibile creare una cosa del genere?
| Codice: |
<div id="listagusti" class="gustogelato">
<a href="gusti_gelato/creme/fiordipanna.php</a>
</div>
<div id="listagusti" class="gustogelato2">
<a href="gusti_gelato/creme/fiordipanna2.php</a>
</div>
|
e il css:
| Codice: |
#listagusti.gustogelato {
background-image: url(../images/button_gelati.png);background-repeat: no-repeat;
height: 100px;
}
#listagusti.gustogelato a:link,#listagusti.gustogelato a:visited {
margin: 0px ;
}
#listagusti.gustogelato a:hover,#listagusti.gustogelato a:active {
margin: 10px ;
}
#listagusti.gustogelato2 {
background-image: url(../images/button_gelati2.png);background-repeat: no-repeat;
height: 100px;
}
#listagusti.gustogelato2 a:link,#listagusti.gustogelato2 a:visited {
margin: 0px ;
}
#listagusti.gustogelato2 a:hover,#listagusti.gustogelato2 a:active {
margin: 10px ;
}
|
in modo da avere un codice html molto snello e poter cambiare immagini in base al css.
ma come faccio ad attivare il link? dove sbaglio?
come faccio a non far vedere quel fastidioso tratteggio del link e la sua cornice azzurra?
grazie a tutti
notte! |
|
| Top |
|
 |
kluster
Dio maturo
Registrato: 15/04/06 13:14
Messaggi: 2898
|
| Inviato: 04 Apr 2007 03:46 Oggetto: |
|
|
Gli Id sono univoci nell'html, servono appunto per essere riconosciuti precisamente all'interno del codice quindi non puoi usare lo stesso ID per tutte e 2 i div, poi c'è qualcosa di sbagliato proprio nel tag A, ma forse quello un copia ed incolla barbaro.
La sottolineatura se è quella che ho capito si leva con text-decoration:none;
Domanda, ma tu vuoi fare un menu con ognuno un'immagine di sfondo che al mouse over cambia immagine, il tutto cliccabile?
Perchè se è semplicemente cosi' credo che tu stia creando tanti layer inutili. |
|
| Top |
|
|
xbandx
Eroe
Registrato: 31/05/06 22:12
Messaggi: 41
|
| Inviato: 04 Apr 2007 11:26 Oggetto: |
|
|
| si vorrei fare proprio cosi, ma senza cambiare immagine, ma spostandola di poco per simulare un punsante |
|
| Top |
|
|
kluster
Dio maturo
Registrato: 15/04/06 13:14
Messaggi: 2898
|
| Inviato: 04 Apr 2007 21:55 Oggetto: |
|
|
dunque se vuoi creare un menu con dei semplici link
| Codice: | <div>
<a href="pagina1.htm">link1</a>
<a href="pagina2.htm">link2</a>
.....
<a href="pagina10.htm">link10</a>
</div> |
devi per prima cosa dare un display:block ai tag A, perchè gli elementi A sono inline e per poter attribuire una larghezza ed un'altezza ad un elemento o gli dai il float:left (che automaticamente imposta il display a block) o gli dai proprio il valore display:block.
Se attribuisci un elemento blocco agli A questi pero' occupano tutta la riga e quindi il menu diventa verticale.
Se pero' gli dai un float:left li puoi affiancare orizzontalmente. Poi pero' dopo devi contenere il float dando all'elemento dopo una proprieta' clear:both o clear:right.
per poter giocare sull'effetto pulsante potresti dare l'effetto bottone in questo modo:
| Codice: | A{ border:1px inset #E1E1E1; }
A:HOVER { border:1px outset #E1E1E1; } |
ricapitolando se vuoi creare un bottone con un elemento A
| Codice: | A
{
display:block;
width: misura;
height:misura;
background-image: bla bla bla...
/* se ti serve orizzontale float:left */
}
|
Edit: per tua conoscenza ti direi di studiarti questo e sopo averlo capito, questo
Qui invece ci sono tutti i metodi per contenere il float |
|
| Top |
|
|
xbandx
Eroe
Registrato: 31/05/06 22:12
Messaggi: 41
|
| Inviato: 05 Apr 2007 12:08 Oggetto: |
|
|
grazie mille mi metto a studiare!!  |
|
| Top |
|
|
xbandx
Eroe
Registrato: 31/05/06 22:12
Messaggi: 41
|
| Inviato: 06 Apr 2007 11:46 Oggetto: |
|
|
ho risolto in questo modo:
link
vi piace?
lo spunto lo preso da qui |
|
| Top |
|
|
kluster
Dio maturo
Registrato: 15/04/06 13:14
Messaggi: 2898
|
| Inviato: 06 Apr 2007 12:00 Oggetto: |
|
|
mm, hai usato dei bottoncini, ini ini eh?  .
Si cmq, carina come soluzione e molto leggibile
Disabilitando i css rimane un semplice UL leggibile, buono
In uno screen reader la soluzione è buona. |
|
| Top |
|
|
SverX
Supervisor Macchinisti
Registrato: 25/03/02 12:16
Messaggi: 11806
Residenza: Tokelau
|
| Inviato: 06 Apr 2007 12:42 Oggetto: |
 |
|
se accetti un consiglio: cambia nophoto.jpg con una gif, vedi che è tutto "sporco" tra le lettere? ...  |
|
| Top |
|
|
|
FAQ
Cerca
Lista utenti
Gruppi
Registrati
Profilo
Messaggi privati
Log in
