0

ゲーム コミュニティ用の Web サイトを作成しようとしています。Web サイトは、ヘッダー/ナビゲーションがページの 100%x20% をカバーし、プライマリ コンテンツが 100%x80% をカバーする、非常にミニマリストであると想定されています。div が表示されますが、div を正しく配置できないようです。「position:absolute;」を使用する必要があるためです。これらを正しく機能させる方法が本当にわかりません。私は HTML/CSS にかなり慣れていないことを覚えておいてください。

<!DOCTYPE html>

<html style="height:100%;">
<head>
<title>ESI | Missioners and Miners Haven</title>
<link rel="stylesheet" type="text/css" href="styles/styles.css" />
</head>

<body style="height:100%;">
<div id="contianer">

<div id="navbar">

<div id="logobox">
<p>ESI Official Site</p>
</div>

<ul>
    <li><a href="#">Sign Up!</a></li>
    <li><a href="#">ESI Blog</a></li>
    <li><a href="#">Corp Op's</a></li>
    <li><a href="#">Home</a></li>
</ul>

</div>

<div id="content">

</div>

</div>

</body>
</html>

これが HTML で、CSS の重要な部分は次のとおりです。

#container
{
width:100%;
height:100%;
}

#navbar
{
width:100%;
height:20%;
background:#35291F;
list-style:none;
float:left;
position:absolute;
}

#content
{
margin:10%;
width:90%;
height:80%;
background:grey;
position:absolute;
}

この質問が何度も寄せられていることは知っていますが、このサイトで見つけた解決策はどれもうまくいきませんでした.

助けていただきありがとうございます。

4

5 に答える 5

1

margin:10%すべてに 10% を与えます (上、下、右、左)。

与えるmargin-top

位置が絶対的な場合、フロートは必要ありません。

于 2013-02-12T07:03:02.493 に答える
0

これはあなたが望んでいたものですか？

#content
{
    margin-top:20%;
    width:100%;
    height:80%;
    /* ... */
}

http://jsfiddle.net/WJrW3/

于 2013-02-12T06:55:45.413 に答える