2011-09-21 59 views
2

我有一個div,如果你點擊div上的任何地方,它會打開另一個網頁。所以基本上整個div是一個巨大的超鏈接。正因爲如此,我有一個DIV,然後內部的我有一個一個元件然後內,我有DIV(這樣一些UL,一些p等)的所有元素。Valid HTML:ul,p,div'a'元素內

我的問題:當我嘗試驗證我的HTML在W3標記驗證,我得到的錯誤,因爲我有一個UL,P等一個元素內。

實際誤差:

document type does not allow element "p" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag

我怎樣才能讓我的HTML有效&仍然保持我的div作爲一個大的鏈接?

<div id="rentalAnnc"> 
    <a class="sidebarLink" href="facilitiesForHire.html"> 
     <p>KAZCARE has a range of Education Facilities available for Lease &amp; Hire at its Bowral location.</p> 
     <!--<p>Click here for more information.</p>--> 
    </a> 
</div> 

回答

3

只能在HTML 5中的錨點中包含塊級內容。不能在任何非草稿版本中使用。如果您希望它符合*規範,請切換到HTML 5.

請注意,這樣做是causes problems

*讓我們不要談論<ins>黑客它可以讓你做一個有效的,但不符合標準的方式的DTD不夠傳神禁止,但規範的文本

1

在錨你可以有其他內聯元素。看看W3C文檔:

http://www.w3.org/TR/html401/struct/links.html#h-12.2

+0

這不僅僅是針對你,但所有的「應答者」,夥計們,我問了一個辦法讓我的整個DIV成爲一個鏈接併成爲有效的HTML。我知道它不是有效的HTML,我要求一種方法來做到這一點,建議一個庫,CSS技巧等。 – Mitch

+0

設置aanchor爲100%高度的塊,更改p元素以跨度並設置它們以顯示:塊。這就是它 – simoncereska

2

如果可能的onclick屬性添加到div而不是使用a標籤。 例如: -

<div id="rentalAnnc" onclick="window.location.href='facilitiesForHire.html'" style="cursor: pointer"> 
    <p>KAZCARE has a range of Education Facilities available for Lease &amp; Hire at its Bowral location.</p> 
    <!--<p>Click here for more information.</p>--> 
</div> 
+3

請注意,這種方法意味着它不是一個真正的鏈接,所以它不會顯示在鏈接列表中(這對於屏幕閱讀器用戶非常有用),並且無法在沒有定位設備的情況下導航(有些人更喜歡使用鍵盤,有些人使用鼠標會阻止他們使用鼠標),但如果沒有JavaScript,它也無法工作。 **在div中添加一個鏈接!** – Quentin

1

這種鏈接只能使用HTML5進行驗證,爲「昆汀說:」在他的答覆。要做到這一點,更改您的文檔的定義(HTML的第一行)到:

<!DOCTYPE html> 

這樣做,你的HTML將現在HTML5(!魔法)和塊級元素爲[H1]和[p]將A HREF標籤內是允許的,堅持標準:

<a href=」Destination.html」> 
    <h3>Cool link</h3> 
    <p>The coolest link in the world.</p> 
</a> 

有這個問題,當然,因爲你可能有一個以前的文檔定義類似以下內容:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

將doc類型從「strict」更改爲「Transitional」或HTML5可以使瀏覽器渲染元素略有不同(特別是如果它們處於quircks模式),所以您應該再次檢查使用新的文檔類型來呈現頁面的方式。

我討厭HTML自HTML5以來就不允許這樣做,因爲如果HTML的語義需要有一個標題和一個parragraf作爲鏈接,標準應該允許你這樣做。

無論如何,請注意思考如何將這個「塊內錨定」影響可訪問性,因爲鏈接內的非常長的內容對於使用屏幕閱讀器的盲人可能是一個問題。

現在,提供一個很好的CSS樣式爲您的錨塊內的塊元素,並享受它! :)

0

您可以設置顯示以阻止<a>元素並使用它來代替<div>

所以,如果你有這樣的: <a href="#"><div style="width: 100px; height: 100px; background-image: url('xyz.png');"></div></a>

使用,而不是: <a href="#" style="display: block; width: 100px; height: 100px; background-image: url('xyz.png');"></a>