Не работает position: relative;
#main li {
list-style: none;
display: inline-block;
position: relative;
}
Вот что получается https://prnt.sc/wjygwr
Меню не выравнивается в одну линию. Этот код еще актуален??
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Макет сайта</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div id="frame">
<header></header>
<!--начало навигации-->
<nav>
<menu id="main">
<li><a href="#">Главная</a></li>
<li><a href="#">Маршруты</a></li>
<menu>
<li><a href="#">Европа</a></li>
<li><a href="#">Азия</a></li>
<li><a href="#">Австралия</a></li>
</menu>
</li>
<li><a href="#">Контакты</a></li>
</menu>
</nav> <!--конец навигации-->
<!--основная часть-->
<main>
<article><!--тут какая то статья--></article>
</main>
<aside><!--тут будут новости-->
</aside>
<div class="clear">
</div>
<footer>©</footer>
</div>
</body>
</html>body {
background-image: url(../img/4-tekstura-krupnogo-temnogo-karbona.png);
}
#frame {
width: 1000px;
margin: 0 auto;
background-color: white;
display: table;
}
header {
width:90%;
height: 50px;
border: 1px solid #000;
margin: 0 auto;
margin-top: 10px;
text-align: center;
}
nav {
width:90%;
height: 40px;
border: 1px solid #000;
box-shadow: 5px 5px 25px 2px black;
margin: 0 auto;
margin-top: 10px;
font-size: 20px;
font-family: Comic Sans MS;
}
main {
height: 400px; /* по добавлению контента удалить */
width: 65%;
margin: 10px;
padding: 10px;
float: left;
border: 1px solid #000;
border-radius: 5px;
}
aside {
width: 25%;
height: 400px;
margin: 10px;
float: right;
border: 1px solid #000;
}
.clear {
clear: both;
}
footer {
width: 90%;
height: 30px;
border: 1px solid #000;
margin: 0 auto;
padding: 20px;
margin-bottom: 10px;
text-align: center;
}
#main {
margin: 0;
padding: 0;
padding-left: 10px;
}
#main li {
list-style: none;
display: inline-block;
position: relative;
}а что нужно получить в итоге?
В итоге меню должно было построиться в один ряд, так как я задал значение
#main li {
list-style: none;
display: inline-block;
position: relative;
}
А меню вообще не реагирует https://prnt.sc/wjygwr
Точнее частично среагировало.
Нашел)
<nav>
<menu id="main">
<li><a href="#">Главная</a></li>
<li><a href="#">Маршруты</a></li> <!--закрывающий тег li не нужно было ставить-->
<menu>
<li><a href="#">Европа</a></li>
<li><a href="#">Азия</a></li>
<li><a href="#">Австралия</a></li>
</menu>
</li>
<li><a href="#">Контакты</a></li>
</menu>
</nav> <!--конец навигации-->наверно не #main li {display: inline-block;}
а #main {display: inline-block;}
и где <ul> ?
