Идеи на альтернативу функции <nav> - ДОЛЖНЫ использовать XHTML Strict 1.0

Выполнение проекта в uni, и я полностью неверно прочитал краткую, использовал HTML5 в своем проекте и понял, что мне не разрешено это делать. К сожалению!Идеи на альтернативу функции <nav> - ДОЛЖНЫ использовать XHTML Strict 1.0

Моя единственная проблема: я попытался преобразовать ее в стандарты XHTML Strict 1.0, используя div, и это просто не так просто, как я думал.

Я отправлю только раздел навигации, так как мне нужна помощь, нет необходимости в дополнительных битах и бобах.

Перед тем, как пост - просто хотел уточнить вопрос:

Этот код HTML5 совместимый, мне нужно, чтобы быть XHTML Strict 1,0 совместимый, но я не могу получить CSS работать с дивы вместо нав функция.

Вот код:

<!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

Я не вижу проблемы? Поиск и замена «nav» на «div» должны выполнять эту работу. По умолчанию стиль для обоих элементов идентичен. http://tinker.io/06140 – cimmanon

Эмм ... Как смущающе. Это типично для меня, как обычно. Спасибо. – iXiiN

Часто вы используете идентификаторы в вашем HTML, но моделирование на основе классов.

например. Если вы собираетесь сказать

div.navbar { 
    ... 
}

Это будет применяться к:

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

не

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

источник

2013-04-30 17:29:07

Ошибка новичков, спасибо, были вдали от него на некоторое время. – iXiiN

Идеи на альтернативу функции <nav> - ДОЛЖНЫ использовать XHTML Strict 1.0

ответ

Смежные вопросы