box cliccabili contenenti elementi di blocco

[gabar-el]

ciao, per creare dei box cliccabili che mantengano anche contesti di indicizzazione ho creato quessto codice html:

<a><span id="first">
			<h2 class="homePage">****</h2>
			

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
		</span></a>

purtroppo il validatore non mi passa il tag h2 che giustamente non può stare all'interno di un elemento inline essendo un elemento di blocco. come posso risolvere la situazione?

ho pensato di dare del padding al tag a, ma al momento non ho ancora provato...

grazie

[marco.carrieri]

E mettere i tag h2 all'esterno?

[gabar-el]

mmhhh...
il tag h2 deve comparire all'interno del tag div o span che sia.
forse si riuscirebbe anche con posizionamenti particolari ma non saprei se è la soluzione migliore...
grazie

[Mich_]

Soluzione secondo il W3C (non supportata da vari browser - credo sia XHTML 2.0):

<div href="..." title="...">
  <h2>Titolo</h2>
  

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim 
    ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip 
    ex ea commodo consequat.</p>
</div>

Soluzione pratica:

<div id="...">
  <h2>Titolo</h2>
  

<a href="..." title="...">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 
    nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim 
    ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip 
    ex ea commodo consequat.</a></p>
</div>

Note:
1. Il blocco e` racchiuso in un <div>, dato che uno <span> non potrebbe contenere ne` il

ne` l'<h2>
2. Il tag <a> deve essere contenuto all'interno sia del <h2> che del

; per questa soluzione e` necessario usare due <a>: non e` elegante, ma e` l'unica soluzione valida

[gabar-el]

cavolo che fregatura! non credevo fosse così complicato!
comunque la prima soluzione non mi viene letta nemmeno da ff3
la seconda si è un pò bruttina, la potrei tenere come ultima spiaggia ma essendo il sito accessibile non posso avere due collegamenti uguali con testo diverso...

mi chiedevo se giocando con il padding dell'a non si riesca a fare qualcosa. Ho provato a dare un padding all'a del tag h2, ma il testo del p ci rimane sotto e il link è attivo solo tra i "buchi" del testo...

[gabar-el]

al momento l'ho implementato così:

<div id="third">
	<h2 class="homePage">*****</h2>
	

<a>testo testo testo lungo.</a></p>
</div>

applicando questo css che gioca semplicemente sui padding del tag a

div#third a {
	padding: 15% 3% 25%;
	display: block;
	margin-top:-11%;
	}

ho reso a un elemento di blocco, in modo che non ci siano slittamenti causati dai padding.
i padding mi permettono di coprire tutta la zona da me interessata.
il margin negativo mi permette di coprire il tag h2.

non l'ho ancora testata sui vari browser, ma per ora su ff3 rende bene, l'unica pecca in fase di ridimensionamento finestra, dove appaiono un paio di pixel (non si vedono ovviamente) tra il bordo del div e il padding-top dell'a che fanno perdere appunto 2 px di link, ma mi pare una perdita accettabile. del resto rende bene sotto ogni concetto di accessabilità.
cosa ne pensate? probabile ci saranno problemi con altri browser? specialmente con ie?

[gabar-el]

alcuni piccoli errori durante il ridimensionamento li ho corretti sostituendo le misure % in em

div#third a {
	padding: 2.8em 0.5em 5em;
	display: block;
	margin-top: -2.3em;
}

l'unico problema ora è in fase di ingrandimento, quando raggiunto livelli elevati il testo del tag h2 si posiziona su due righe lasciando un buco in alto in cui il collegamento del tag a è assente per ovvi motivi di padding.

[gabar-el]

tralasciando il collegamento al p e giocando sui paddign del tag a all'interno del tag h2 non si riesce utilizzando una proprietà z-index ad ottenere un unico link valido per entrambi i tag? Io ho provato un pò ma non son riuscito (sinceramente non capendo il perchè)

[simotenax]

e una cosa del genere??

<div title="..." onClick="location.href='http://pagina-da-linkare'">
  <h2>Titolo</h2>
  

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim 
    ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip 
    ex ea commodo consequat.</p>
</div>

[gabar-el]

grazie simotenax ma non credo possa andare.

Non si vede il cambio di puntatore passando sopra il link, quindi ne viene meno l'accessibilità oltre che l'usabilità.

Inoltre non mi intendo di js e dovrebbe essere non ostrusivo. Generalmente evito.