0
Я создаю новую веб-страницу в качестве упражнения для изучения HTML5. К сожалению, я столкнулся с очень неприятной проблемой.Как отображать элементы навигации друг под другом внутри элемента заголовка
На моей странице есть элемент заголовка "topbar", который содержит один элемент "h1" (название страницы) и два элемента "nav". Я хочу, чтобы элемент «h1» появлялся в левой части «верхней панели». Я хочу, чтобы элементы «nav» отображались в правой части «верхней панели».
Nav элемент "nav_secondary" содержит две ссылки, "Регистрация" и "Войти". Это должно появиться в верхнем правом углу «верхней панели». Ниже «nav_secondary» должен появиться элемент «nav_main», содержащий строку навигационных ссылок.
К сожалению, на моем сайте все выглядит неправильно. Элементы nav находятся на левой стороне верхней панели и вытесняются с экрана. Я потратил несколько часов на изменение CSS и обучающих программ в Google, но еще не нашел решения.
Вот скриншот из верхней части моей страницы: top half of page displaying incorrectly
Вот макет образ того, что я хочу, чтобы это выглядело как: top half of page displaying correctly mockup
Вот мой HTML код:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Site Name - Page Title</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div class="fullscreen-bg"></div>
<header class="topbar">
<h1>Page Title</h1>
<nav class="nav_secondary">
<a href="register.html">Register</a>
<a href="signin.html">Sign in</a>
</nav>
<nav class="nav_main">
<a href="home">Home</a>
<a href="archive">Archive</a>
<a href="about">About</a>
<a href="contact">Contact</a>
</nav>
</header>
<section class="bodycontainer">
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Interdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue, sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut lobortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Nullam varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Interdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue, sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut lobortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Nullam varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
</section>
</body>
</html>
Вот мой CSS:
html {
height:100%;
}
body {
background: #000000;
color: #ffffff;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
font-size: 12px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 20px;
}
h1 {
font-size: 24px;
}
.fullscreen-bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
background-attachment: scroll;
}
@media (min-width: 767px) {
.fullscreen-bg {
background: url('../img/background.jpg') center center/cover no-repeat;
}
}
.topbar {
background: #000000;
position: fixed;
display: block;
top: 0;
left: 0;
right: 0;
padding-left:50px;
border: none;
width: 100%;
height: 100px;
margin: none;
z-index: 999;
overflow: auto;
background: rgba(0, 0, 0, 0.85);
}
.topbar h1 {
float: left;
}
.nav_main {
float: right;
display: block;
margin-top: none;
margin-right: 50px;
margin-bottom: none;
margin-left: none;
padding-top: 0px;
padding-right: 50px;
padding-bottom: 0px;
padding-left: 0px;
font-size: 24px;
width: 100%;
height: 50px;
clear: both;
overflow: auto;
}
.nav_main a:link {
color: #ffffff;
}
.nav_main a:visited {
color: #ffffff;
}
.nav_main a:hover {
color: #C18E15;
}
.nav_secondary {
position: relative;
float: right;
display: block;
margin-top: 10px;
margin-right: 50px;
margin-bottom: none;
margin-left: none;
padding-top: 0px;
padding-right: 50px;
padding-bottom: 0px;
padding-left: 0px;
font-size: 14px;
width: 100%;
height: 50px;
clear: both;
overflow: auto;
}
.nav_secondary a:link {
color: #ffffff;
}
.nav_secondary a:visited {
color: #ffffff;
}
.nav_secondary a:hover {
color: #C18E15;
}
.bodycontainer {
padding-top: 100px;
padding-left: 25px;
padding-right: 0px;
padding-bottom: 0px;
display: block;
overflow: hidden;
margin: none;
}
.articlecontainer {
background: #000000;
padding-top: 0px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 0px;
display: block;
overflow: hidden;
float: left;
margin: 10px;
width: 300px;
height: 300px;
background: rgba(0, 0, 0, 0.85);
}
Кто-нибудь знает, как я могу это исправить, поэтому он выглядит так, как показано в моем макете? Пожалуйста, дайте мне знать.
Спасибо!
Спасибо! Это поставило проблему. Я ценю вашу помощь. – ag415