-1
私はゼロから作成したシンプルなウェブサイトを持っています。私は、ヘッダーのレイアウトと混同してしまった：div内の配置要素
- H1のタイトル
- テキストライン
- ロゴ
- メニューは、これらの4つが私のdivヘッダ内にある
（w3schoolからコーディング）。私はdiv内のどこにいてもそれらを配置することができるようにしたいと思います。私が持っている問題は、これにどのようなコーディング（マージン、位置：相対または絶対、パディング、上:,右：など）を使用するかわからないということです。
私はすべての種類の組み合わせを試しましたが、私はそれらが欲しいところに決して配置されず、互いの位置を混乱させます。メニューが全幅を失い、ロゴが上からヘッダーdivの右側では、H1とタグは設定したピクセルに反応しないように見えます。
誰かが時間をかけてコードを見て、このレイアウトを安定させる方法を提案してもらえますか？
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title></title>
<style type="text/css">
body {
\t background-color: #F8F8F8;
\t }
#page {
\t width: 900px;
\t margin: 30px auto;
\t background-color: #FFFFFF;
\t }
#header {
\t height: 377px;
\t width: 100%;
\t background-image: url(images/banner.jpg);
\t background-repeat: no-repeat;
\t background-position: 0px 0px;
\t }
#header a {
\t color: black;
\t text-decoration: none;
\t }
\t
#header ul {
\t list-style-type: none;
\t margin-top: 0;
\t padding: 0;
\t overflow: hidden;
\t background-color: #3399FF;
\t position: relative;
\t top: 264px;
\t }
\t
#header li {
\t float: left;
\t }
\t
#header li a {
\t display: inline-block;
\t color: white;
\t text-align: center;
\t padding: 14px 16px;
\t text-decoration: none;
\t }
#header li a.active {
background-color: gray;
}
#header li a:hover:not(.active){
\t background-color: #3366CC;
\t }
.p1 {
\t font-family: Consolas, monaco, monospace;
font-size: 20px;
\t position: relative;
top: 28px;
\t left: 50px;
\t } \t \t
\t
.p2 {
font-family: Consolas, monaco, monospace;
\t font-size: 16px;
position: relative;
top: 5px;
\t left: 200px;
\t }
.logo {
\t float: right;
\t position: relative;
\t top: 8px;
\t right: 8px;
\t }
\t
#content {
\t position: relative;
\t top: 12px;
\t left: 10px;
\t }
\t
#footer {
\t font-size: 14px;
\t padding-top: 12px;
\t padding-bottom: 12px;
\t text-align: center;
\t border-top: #D3D3D3 0.5px solid;
\t }
</style>
</head>
<body>
<div id="page">
<div id="header">
<img class="logo" src="images/logo-d.png">
<span class="p1"><a href="http://www.finasteride-kopen.nl"><h1>This is my H1 Title</h1></a></span>
<span class="p2">"This is going to be my tag under H1"</span>
<ul>
<li><a class="active" href="">Link menu</a></li>
<li><a href="">Link menu 2</a></li>
<li><a href="">Link menu 3</a></li>
<li><a href="">Link menu 4</a></li>
<li><a href="">Link menu 5</a></li>
<li><a href="">Link menu 6</a></li>
</ul>
</div>
<div id="content">
<h1>H1 Title of the page content<h1>
<p></p>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
<p></p>
</div>
<div id="footer">
The footer of the page
</div>
</div>
</div>
</body>
</html>
これではありませんテンプレート。私はそれを自分で作った（それゆえの問題）。このコードは私に最もよく知られているように見えます。しかし、私はポジションスタイルを使用しており、divヘッダー内の他のコンテンツの位置に影響を与えたようです。 – Stryker79