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

Я работаю над проектом в универе, и я совершенно неправильно понял краткое изложение, использовал HTML5 в своем проекте и понял, что мне нельзя это делать. К сожалению!

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

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

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

Этот код совместим с HTML5, мне нужно, чтобы он соответствовал XHTML Strict 1.0, но я не могу заставить CSS работать с div вместо функции nav.

Вот код:

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

ааа а вот 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;}
Источник

1 ответ

Решение

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

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

div.navbar { 
  ...
}

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

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

не

<div id="navbar">...</div>
Источник
Другие вопросы по тегам