0
我正在製作一個新的網頁作爲學習HTML5的練習。不幸的是，我遇到了一個非常令人沮喪的問題。如何在標頭元素的內部顯示導航元素下方
我的頁面有一個包含一個「h1」元素（頁面標題）和兩個「nav」元素的「topbar」標題元素。我希望「h1」元素出現在「頂欄」的左側。我希望「nav」元素出現在「頂欄」的右側。
導航元素「nav_secondary」包含兩個鏈接，「註冊」和「登錄」。這應該出現在「頂欄」的右上角。在「nav_secondary」下面應該出現包含一行導航鏈接的「nav_main」元素。
不幸的是，我的網站看起來都錯了。導航元素一直位於頂欄的左側，並從屏幕上推出。我花了幾個小時來改變CSS和Googling教程，但還沒有找到解決方案。
這裏是我的網頁的上半部分的截圖： 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