- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- Come rendo linkabile un intero div rettangolare anche su IE
-
Come rendo linkabile un intero div rettangolare anche su IE
Voglio creare dei "banner" testuali creati da dei div larghi 240 px ed alti 60 px.
Ho scoperto che se metto l'intero div linkato esso funziona bene e funziona anche la proprietà hover per tutto il div.
Per capirci faccio così:
<a href="bla bla"><div class="cc01"><p>bla titolo</p></div></a>
Però non funziona con Internet explorer.
Come posso fare questi bannerini testuali completamente cliccabili? Su Opera e firefox anche lo spazio bianco del div è linkato e non solo il testo.
Grazie
-
.pippo {width:240px; height:60px;}
.pippo a {display:block; border:2px solid #ff0000;}
.pippo a:hover {display:block; border:2px solid #000;}<div class="pippo">
<a href="#">Il mio banner</a>
</div>funzia?
-
Si ma la zona linkabile risulta grande come il link e non come l'intero div...
-
@fabioski said:
Si ma la zona linkabile risulta grande come il link e non come l'intero div...
**Attenzione!
**<a> è un elemento inline, pertanto **non **può contenere elementi block (vedi le nostre faq). Potresti far diventare block <a> e dargli le dimensioni che ti servono (display = block)
-
@misterwo said:
.pippo {width:240px; height:60px;}
.pippo a {display:block; border:2px solid #ff0000;}
.pippo a:hover {display:block; border:2px solid #000;}<div class="pippo">
<a href="#">Il mio banner</a>
</div>ho messo display block nell'elemento a...eppure ero sicuro che funzionasse... lo rivedrò
-
@misterwo said:
ho messo display block nell'elemento a...eppure ero sicuro che funzionasse... lo rivedrò
Sorry, volevo quotare un'altra cosa ...
Il commento era riferito al primo post
-
de nada...resta il fatto che ero starmegaconvinto che funzionasse
-
Ciao, puoi farlo semplicemente con javascript e impostando il cursore:
<!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" /> <title>Untitled Document</title> <style type="text/css"> <!-- .link { background-color:#999999; height:200px; min-height:200px; width:200px; cursor:pointer; text-align:center; } --> </style> </head> <body> <div> <div onclick="location.href='http://www.google.com/';" class="link"><a href="http://www.google.com/">Google</a></div> </div> </body> </html> ```Più semplice di così credo sia impossibile. :ciauz:
-
Usando la soluzione con il javascript non "regalo" nulla ai link in termini di posizionamento giusto? E poi il link si parirà in una nuova finestra?
-
@fabioski said:
Usando la soluzione con il javascript non "regalo" nulla ai link in termini di posizionamento giusto?
In parte è vero, anche se con questo javascript ultra semplice anche gli spider riescono a seguirlo, ma non dovrebber (notare il condizionale) passare PR. @fabioski said:
E poi il link si parirà in una nuova finestra?
Così come ti ho indicato io no. Apre nella stessa finestra.
Se vuoi farlo dovresti creare una funzione apposita.
-
Sono riuscito a risolvere il problema ed ora funzionano anche con IE (il browser maledetto). Un esempio lo vedete qui:
http://www.skiforum.it/skiforum/index.php
Sono i 3 rettangoli skipromo in alto.Grazie!
Difficilotto gestire tanti css.