私は Web ページをデザインし、配置に CSS を使用しています。レイアウトは、ヘッダー、水平メニュー、およびコンテンツ セクション (2 列を含む) です。ヘッダー、水平メニュー、およびコンテンツ セクションはすべて同じ幅です。
それらを左側に並べることはできますが、ページの「中央」に配置したいと思います。
他のすべての DIV を含む「full」という DIV を作成しました。これを行うと、CSS コードを使用してヘッダーとメニューを中央に配置できます: margin: 0 auto; ヘッダーとメニュー ID では、左側にあるコンテンツ ID では機能しません。
コンテンツ セクションを左右にフロートさせることができ、それぞれの側で中心からずれています。float オプションを完全に削除すると、コンテンツ セクションの背景は本文の背景と同じ色になります。
デバッガーを使用すると、本文と #full がページの幅をカバーしていますが、ヘッダーとメニューを垂直方向にカバーしているように見えるだけですが、その理由はわかりません。
どこかで「クリア」を使用する必要があると思いますが、どこかわかりません。#menuBar で 'clear: both' 機能を試しましたが、うまくいきませんでした。
どんな助けでも大歓迎です。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My 1st Practice Page</title>
<style>
#content {
background-color: #eee;
float: left;
}
body {
background-color: silver;
}
#header {
width: 976px;
height: 154px;
background-image: url('images/header-bg.jpg');
background-repeat: no-repeat;
text-align: center;
margin: 0 auto;
}
#header h1 {
color: white;
text-align: center;
padding: 52px;
margin: 0 auto;
}
#menuBar {
width: 976px;
height: 33px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 1.2em;
font-weight: bold;
text-transform: uppercase;
color: white;
background-color: #2F3C4C;
background: 5px solid red;
margin: 0 auto;
}
#menuBar ul {
list-style-type: none;
float: left;
margin: 0 auto;
}
#menuBar li {
float: left;
width: 150px;
padding: 0 10px;
margin: 0 auto;
text-align: center;
}
#menuBar li:hover {
color: blue;
cursor: auto;
}
#columnLeft {
width: 582px;
padding-left: 18px;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 0.95em;
line-height: 1.2em;
float: left;
}
#columnLeft img {
float: left;
padding: 5px;
}
#columnRight {
width: 376px;
float: left;
}
#columnRight h2 {
margin: 0 auto;
padding: 10px;
}
#columnRight img {
height: 150px;
width: 150px;
float: left;
padding: 10px;
}
</style>
</head>
<body>
<div id="full">
<div id="header">
<h1> Company Name Inc. </h1>
</div>
<div id="menuBar">
<ul>
<li>home</li>
<li>products</li>
<li>services</li>
<li>about us</li>
<li>contact us</li>
</ul>
</div>
<div id="content">
<div id="columnLeft">
<h2> Category 1 </h2>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. This is some text talking about our first product. This is just a bunch of random information to fill some space. I bet your are really interested. </p>
<h2> Category 2 </h2>
<img src="images/ss_img007.jpg" width="100" height="100" alt="" border="0">
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Here is another paragraph with some more random infomration that I am sure you are not even reading and do not necessarily care about. Lets see how this works. </p>
<h2> Category 3 </h2>
<p> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. This is some text talking about our third product. This is just a bunch of random information to fill some space. I bet your are really interested. </p>
<h2> Category 4 </h2>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Here is another paragraph with some more random infomration that I am sure you are not even reading and do not necessarily care about. Lets see how this works. </p>
</div>
<div id="columnRight">
<h2> Pictures </h2>
<img src="images/ss_img001.jpg" alt="" >
<img src="images/ss_img002.jpg" alt="" >
<img src="images/ss_img003.jpg" alt="" >
<img src="images/ss_img004.jpg" alt="" >
<img src="images/ss_img005.jpg" alt="" >
<img src="images/ss_img006.jpg" alt="" >
</div>
</div>
</div>
</body>
</html>