Div "linkabile"

[chiara1311]

Buongiorno a tutti! Mi piace tanto una soluzione adottata da questo sito:

https://chichesterdesign.co.uk

Ovvero quei rettangoli "what we do", "case study" e "how we do it".

La mia domanda è come si fanno? Ho provato a creare un modulo. Esteticamente, copiando i css, mi viene uguale ma non so come far diventare un link tutto il rettangolo. Cioè, dall'editor di joomla, posso linkare solo i testi...come faccio a far essere tutto il rettangolo un link?

Mi dispiace per le domande che a voi sembreranno idiote... Prima di scrivere qui faccio sempre molti tentativi e leggo le guide...ma se arrivo a scrivere è perché non sono riuscita a capire o non ho trovato nulla!

Grazie a tutti!

[tomtomeight]

Ciao

Prova a ricercare con google 'rendere un div linkabile' troverai molte risorse

[chiara1311]

Quello lo avevo già fatto... Come dicevo, se arrivo a scrivere qui è perché non ho capito :-) Perché molte spiegazioni sono in generale ma io non riesco a metterle in pratica su joomla perché non c'è un vero codice html...


Ho letto che devo usare <div> <a href> ecc, ma dove? Nell'html del modulo personalizzato? Direttamente dall'editor?

[tomtomeight]

L'html lo inserisci nel punto ove crei il div, modulo html come hai detto e la parte css in un css del template.

[chiara1311]

Io il div lo creerei dall'editor del modulo "html personalizzato". Solo che se faccio <a href etc> <div> testo [/url] <>, mi fa sparire l' "a href"...

[tomtomeight]

Devi disabilitare l'editor

[X-mac]

Un div non può essere contenuto dentro un link, comunque senza fare troppi giri, non puoi creare una immagine da mettere dentro il modulo e quindi linkare dall'immagine?

[tomtomeight]

Un div non può essere contenuto dentro un link,

Chi te lo ha detto? Certo che è possibile farlo.

[X-mac]

Allora ricordo male, può essere  controllo

[X-mac]

Per me ricordavo bene posto qui un breve riassunto in inglese:
HTML 4.01 specifies that <a> elements may only contain inline elements. A <div> is a block element, so it may not appear inside an <a>.

Of course you are at liberty to style an inline element such that it appears to be a block, or indeed style a block so that it is rendered inline. The use of the terms inline and block in HTML refers to the relationship of the elements to the semantic structure of the document, whereas the same terms in CSS are related more to the visual styling of the elements. If you make inline elements display in a blocky manner, that's fine.

However you should ensure that the structure of the document still makes sense when CSS is not present, for example when accessed via an assistive technology such as a screen reader - or indeed when examined by the mighty Googlebot.

HTML 5 states that the <a> element "may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links)".

[tomtomeight]

http://www.html.it/pag/18989/link-su-un-elemento-blocco/

[X-mac]

Appunto stiamo dicendo la stessa cosa:


<a...><div>.....</div></ a>  È una bad pratic

[tomtomeight]

<div><a href="#" class="block">Lorem ipsum dolor sit amet.[/url]</div>

Non mi sembra sia la stessa cosa. 

[X-mac]

appunto, scusa leggi bene. Io ho detto che un div non si può mettere dentro un tag a.
mettere un tag a dentro un div ovviamente si fa.

[tomtomeight]

Sì ma l'oggetto era div linkabile e questo si può fare, come farlo sembra che chiara non l'abbia ancora capito nonostante gli sforzi e il tuo intervento mi sembrava fuorviante circa la possibilità fi farlo ma mi è sfuggito che tu intendevi la forma sbagliata e non il metodo.

[claudiocarrera]

Puoi usare uno span:

Codice: [Seleziona]

<a href="#">
<h2></h2>
<p></p>
<span></span>
</a>
e poi dici di visualizzarlo come se fosse un div tramite css:

Codice: [Seleziona]

span{ display:block;}