Rewrite diesen Code: anklickbare divs

Question

Ich möchte, dies ändern:

<a href='foo'> 
    <div> Moo </div>
</a>

sein standardkonform (Sie nicht haben, Blockelemente in Inline-Elemente soll). Wiring javascript den divs nur für die Navigation wie ein Hack scheint und verschlechtert Zugänglichkeit .. In diesem Fall meine Anforderungen sind für 2 Sätze Grenzen auf meiner Fest Dimension Links, so dass der obige nicht-konforme Code funktioniert perfekt nach Arten anwenden.

Auch ist "a { display:block; }" eine rechtliche Möglichkeit, die Validierung zu umgehen?

Answer 1

Warum nicht verwenden, um einen und nicht als

ein und Anzeige: Block auf beiden Elementen

Darüber hinaus Ihre letzte Frage zu beantworten: Ich glaube nicht, Hinzufügen von display: block; Ihren Anker wird es Validierung übergehen zu lassen. Der Validator überprüft, ob Sie folgende (X) HTML-Regeln, nicht, wie die Seite an den Benutzer zu präsentieren.

Answer 2

Sie möchten die div außerhalb des a setzen zu prüfen, ob es nur für die Anzeige ist, es sei denn, es ist wichtig, dass der äußere Rand angeklickt werden. Entweder:

<div class="dbl_border_links"><a href="blah">Blah text</a></div>

oder folgt aus:

<a class="dbl_border_links" href="blah"><span>Blah text</span></a>

arbeiten und Sie können so etwas wie folgt verwenden:

<style>
  .dbl_border_links, .dbl_border_links>* {
    display: block;
    border: 1px solid;
    padding: 1px;
  }
  .dbl_border_links {
    border-color: red;
  }
  .dbl_border_links > * {
    border-color: blue;
  }
</style>

die Stile zu spezifizieren. Persönlich würde ich mit dem div gehen die a enthalten, aber entweder Ansatz funktioniert.

Answer 3

Ich halte normalerweise der <a > Tag ein Sonderfall für diesen Zweck sein. Sie sollten sich, dass etwa nur anwenden können anything- ist es nach Art des ganzen Punkt von Hypertext (<tr > kommt ein gutes Beispiel in den Sinn). Aber wenn man einen Validator irgendwo passieren muss ich verstehen.

Könnten Sie Javascript onclick Handler für das div verwenden, und die Beseitigung des Ankers vollständig?

Answer 4

Zum einen gibt es sicherlich nichts falsch mit geben einen Anker display: block; Ich würde sagen, es ist eines der häufigsten Dinge, die Menschen mit CSS zu tun und ist perfekt Standards kompatibel. Zweitens gibt es eine Reihe von Möglichkeiten, um einen doppelten Rahmen auf einem HTML-Elemente zu erreichen. Für eine Sache, überprüfen Sie die „outline“ Eigenschaft aus:

http://webdesign.about.com/od/advancedcss/a /outline_style.htm

Allerdings wird dies nur in den modernen Browsern funktionieren soll aber ordnungsgemäß beeinträchtigt wie die Kontur nimmt keinen Platz in der Seite. Wenn der Inhalt des Link ein Bild sein soll, können Sie einfach geben dem eine wenig Polsterung und eine Hintergrundfarbe sowie eine normale Grenze (in einer anderen Farbe), um den Eindruck eines doppelten Rahmen zu schaffen. Oder geben dem Bild einen Rahmen seiner eigenen. Natürlich kann man auch etwas entlang der Linien von Ihrer ursprünglichen Idee tun, wenn auch um den anderen Weg, um Ihre HTML-Verschachtelung und einfach eine andere Grenze zu jedem Element zugeordnet wird. Sie können auch ein Inline-Element in der Verbindung (wie ein oder ein oder etwas) benutzen, die Sie auch auf display: block; (Ja, das ist auch gültig!). Glücklich Codierung!

Answer 5

Wenn ich es richtig, Ihre Absichten zu verstehen, sollten Sie setzen, wie bereits erwähnt, die div außerhalb der Anker und die gleiche Präsentation zu erhalten, um den Anker width:100%;height:100% machen. Cross-Browser-milage können variieren. Auch Sie könnten die div Dump zusammen und geben den Anker display:block;

Was machen Sie genau das zu tun versuchen?