0
웹 페이지를 디자인했으며 위치 지정을 위해 CSS를 사용하고 있습니다. 레이아웃은 Header, Horizontal Menu 및 Content Section (2 개 열 포함)입니다. 머리글, 가로 메뉴 및 내용 섹션은 모두 동일한 너비입니다.본문 내용을 CSS를 사용하여 페이지 중앙에 배치하는 방법
왼쪽에 정렬 할 수는 있지만 페이지에 "중앙에 배치"하고 싶습니다.
다른 모든 DIV를 포함하기 위해 '전체'라는 DIV를 만들었습니다. 이 작업을 수행 할 때 CSS 코드를 사용하여 머리글과 메뉴를 가운데에 맞출 수 있습니다. margin : 0 auto; 헤더 및 메뉴 ID에는 있지만 왼쪽에있는 콘텐츠 ID에는 작동하지 않습니다.
콘텐츠 섹션을 왼쪽 또는 오른쪽으로 플로팅 할 수 있으며 각면에서 중심이 벗어납니다. float 옵션을 모두 제거하면 콘텐츠 섹션의 배경색이 바디 배경색과 동일합니다.
디버거를 사용할 때 Body와 #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>
덕분에 나는 100 %는 당신이 제안하는 것을 이해 해달라고 vadl 그러나 나는 감사 당신의 도움. – user2924431