觀念上的替代功能<nav> - 必須使用XHTML嚴格1.0

做在大學一個項目，我已經完全誤讀了簡短的，使用HTML5在我的項目，並意識到，我不能這樣做。哎呀！觀念上的替代功能<nav> - 必須使用XHTML嚴格1.0

我唯一的問題是，我試過用div的將其轉換爲XHTML 1.0的嚴格標準，它只是並不像我想的那麼簡單。

因爲這就是我需要，沒有必要對所有的額外位和鮑勃幫我只會張貼的導航部分。

我發佈之前 - 只是想澄清的問題是：

此代碼兼容HTML5，我需要的是嚴格的XHTML 1.0標準，但我不能讓CSS與div的工作到位的資產淨值功能。

下面是代碼：

<!DOCTYPE html> 
<head> 
<link rel="stylesheet" type="text/css" href="style\main.css" /> 
<title>Wessex Round Table of Investors</title> 
</head> 
<body> 
    <div id="whole"> 
     <div id="header"> 
     <img class="logo" src="images\wrtilogo.gif" alt="WRTI Logo" /> 
    </div> 
    <div id="navbar"> 
     <div id="container"> 
      <nav id="menu"> 
       <ul> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">Link</a> 
        <ul> 
         <li><a href="#">Sublink</a></li> 
         <li><a href="#">Sublink</a></li> 
         <li><a href="#">Sublink</a></li> 
         <li><a href="#">Sublink</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Link</a> 
        <ul> 
         <li><a href="#">Sublink</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Link</a> 
        <ul> 
        <li><a href="#">Sublink</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Link</a></li> 
      </ul> 
      </nav> 
     </div> 
    </div> 
</div> 
</body> 
</html>

aaaand這裏是基於類的CSS

div.whole { 
margin-left: 15%; 
margin-right: 15% } 

div.header { 
width: 100%; } 

div.navbar { 
position: absolute; 
display: block; 
width: 90%; 
margin-left: auto; 
margin-right: auto; 
text-align: center } 

img.logo { 
display: block; 
margin-left: auto; 
margin-right: auto } 

#content 

#footer 

#navigation { 
width: 800px; 
margin: 30px auto;  
background: #fff; 
box-shadow: 0 0 20px #8493A6; 
overflow: auto; 
} 
nav#menu { 
margin: 10px 30px 30px; 
padding: 0; 
border-bottom: 1px solid #ccc; 
border-top: 1px solid #ccc; 
text-align: center; /*this is the first bit that centers the menu*/ 
font: 100%/40px Verdana, Geneva, sans-serif 
} 
nav#menu ul {margin: 0;} 
nav#menu ul li { 
    margin: 0; 
    padding: 0; 
    display: inline-block; /*this is the second bit that centers the menu*/ 
    position: relative; 
    list-style: none; 
    background: #fff; 
} 
    nav#menu ul li a { 
     padding: 1px 20px; 
     display: block; 
     font-size: 17px; 
     font-weight: 300; 
     color: #cc0000; 
     text-decoration: none; 
    } 
    nav#menu ul li:hover {background: #fff;} 
     nav#menu ul ul { 
      width: 160px; 
      margin: 0; 
      padding: 0; 
      position: absolute; 
      top: 42px; 
      left: -999px; 
      border: 1px solid #ccc; 
     border-radius: 3px 3px 3px 3px; 
     box-shadow: 0 0 0 transparent; 
     } 
      nav#menu ul li:hover ul { /*this bit centers the dropped ul relative to the parent li*/ 
       margin: 0 0 0 -80px; 
       left: 50%; 
     } 
nav#menu a:hover {color: #540000;}

來源

2013-04-30 iXiiN

我看不出有什麼問題？用「div」搜索並替換「nav」應該能夠完成這項工作。兩個元素的默認樣式是相同的。 http://tinker.io/06140 – cimmanon 2013-04-30 17:27:44

呃......多麼尷尬。這是典型的我，像往常一樣過分複雜。謝謝。 – iXiiN 2013-04-30 18:25:33

通常情況下，你使用的ID在你的HTML，但造型。

例如如果你會說

div.navbar { 
    ... 
}

這將適用於：

<div class="navbar">...</div>

不

<div id="navbar">...</div>

來源

2013-04-30 17:29:07

新秀的錯誤，謝謝，已經離開了一段時間。 – iXiiN 2013-04-30 18:26:56

觀念上的替代功能<nav> - 必須使用XHTML嚴格1.0

回答

相關問題