0

これは、現在私のスケルトン デザイン用に持っているもののリンクです。

ここに画像の説明を入力 私はdivを使用するのが初めてで、常にテーブルを使用していましたが、divに移行しています。とにかく、私の質問は...各 div のコンテンツを適切に配置するにはどうすればよいですか。ナビゲーションをメインコンテンツの中央に配置したい.

索引.html

<!DOCTYPE html>
<html lang="en-US">
<head>

<title>Chomas Tool</title>

<meta charset="windows-1252">
<meta name="Keywords" content="chomas,tool,pinconning,michigan,machine,shop" />
<meta name="Description" content="Chomas Tools- description" />
<!-- <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> -->

<link rel="stylesheet" type="text/css" href="css/main.css">

</head>
<body>

<div id="wrapper">

<div id="header">
<div id="logo">
<img src="images/logo.gif" width="270" height="100" alt="Chomas Tool"></div>
</div><!-- Close header-->

<div id="navbox">Home | About | Projects | Contact</div>

<div id="content">TEST</div>

<div id="footer">Copyright &copy; Chomas Tool</div>


</div><!--Close_wrapper-->

</body>

メイン.css

body {
background-color:#b0c4de;
}
p {
background-color:#e0ffff;
}
#wrapper {
height: 100%;
width: 900px;
border: 1px solid #000;
margin-right: auto;
margin-left: auto;
}
#header {
background-color:grey;
height: 100px;
width: 100%;
}
#logo {
height: 400px;
width: 300px;
float: left;
}
#search {
width: 350px;
height: 400px;
float: right;
}
#search table {
border: 0px solid #000;
padding: 0px;
}
#navbox {
background-color:darkgrey;
width: 100%;
height: 20px;
text-align:center
}
#content {
background-color:lightgrey;
width: 100%;
height: 150px;
}
#footer {
background-color:grey;
width: 100%;
height: 20px;
}
4

4 に答える 4

0

ヘッダーを閉じた後に追加 <div style="clear:both;"></div>

あなたの画像スタイルはすべて間違っているため、すべてが間違った位置に見えるのはなぜですか.


margin: 0 auto;を使用できることにも注意してください。 margin-right: auto;
ではなく
マージン左: 自動;

静的テキストだけでなく、ナビゲーションにリスト要素を使用することを検討してください。

于 2013-05-31T13:58:39.040 に答える