Come rendo linkabile un intero div rettangolare anche su IE

fabioski

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

misterwo

.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?

fabioski

Si ma la zona linkabile risulta grande come il link e non come l'intero div...

meryk

@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

@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ò

meryk

@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

misterwo

de nada...resta il fatto che ero starmegaconvinto che funzionasse

claudioweb

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:

fabioski

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?

claudioweb

@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.

fabioski

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.