2
저는 스타일링에 멍청한 사람입니다.하지만 여기가 내 눈을 감추고 있습니다. 이유는 무엇입니까? 내 페이지에 주 내용에 맞지 않을거야 .. 나는 수레를 사용하고 해킹 clearfix를 추가했지만 아무것도 작동하지 않는 것 같습니다. 여기에 코드입니다 : HTML :사이드 바가 상단의 주 콘텐츠와 정렬되지 않는 이유를 파악합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Brereton C of E A Primary School</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class= "container">
<header>
<div id="logo">
<a href="index.html">
<img src="img/logo.png" alt = "Brereton C of E A Primary School">
</a>
</div>
<nav>
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="about.html">About Us</a>
</li>
<li>
<a href="governors.html">Governors</a>
</li>
<li>
<a href="pta.html">PTA</a>
</li>
<li>
<a href="contact.html">Conact Us</a>
</li>
</ul>
</nav>
</header>
<div id="main" class="cf">
<h2>Welcome to Brereton C of E (A) Primary School</h2>
<h3>
When you first visit Brereton School, you sense very quickly that it is a vibrant, happy, multi-cultural school with respect, tolerance and celebration at its core.
</h3>
<p>
Then, when you look at the school’s results, you will see that the friendly, caring atmosphere is accompanied by an ethos of supporting pupils to achieve their full potential and raise standards.
</p>
</div>
<div id="downloads" class="cf">
<div class="box" id="prospectus">
<a href="#">
<img src="img/prospectus.png">
</a>
</div>
<div class="box" id="newsletters">
<a href="#">
<img src="img/newsletters.png">
</a>
</div>
</div>
<aside class="cf">
<ul class="sidebar">
<li>
<a href="#">Newsletter</a>
</li>
<li>
<a href="">Staff</a>
</li>
<li>
<a href="">Learning Platform</a>
</li>
<li>
<a href="">NCSL</a>
</li>
<li>
<a href="">Ofsted Report</a>
</li>
<li>
<a href="">Teachernet</a>
</li>
</ul>
<form role="search" method="get" id="searchform" action="./Brereton C of E A Primary School_files/Brereton C of E A Primary School.htm">
<div><label class="screen-reader-text" for="s">Search for:</label>
<input type="text" value="" name="s" id="s">
<input type="submit" id="searchsubmit" value="Search">
</div>
</form>
</aside>
<footer>
<h1 class="bottom_logo">
<a href="index.html">Brereton C of E A Primary School</a>
</h1>
</footer>
</div>
</body>
</html>
그리고 CSS :
/* =====START HACK=====*/
*{
padding:0;
margin:0;
}
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
/* =====END HACK=====*/
/* =====GENERAL STYLING=====*/
body{
background: #fefcea; /* Old browsers */
background: -moz-linear-gradient(top, #fefcea 0%, #efe9bf 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefcea), color-stop(100%,#efe9bf)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fefcea 0%,#efe9bf 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fefcea 0%,#efe9bf 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fefcea 0%,#efe9bf 100%); /* IE10+ */
background: linear-gradient(to bottom, #fefcea 0%,#efe9bf 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefcea', endColorstr='#efe9bf',GradientType=0); /* IE6-9 */
width:960px;
margin:auto;
}
h2{
font-family: 'Museo500',"Trebuchet MS", Arial, Helvetica, sans-serif;
color:#553A2A;
}
h3,a,p{
font-family: arial;
}
h3{
font-size: 15px;
}
p{
font-size: 12px;
}
a{
font-size: 12px;
}
/* =====END GENERAL STYLING=====*/
/* HEADER*/
#logo {
width:113px;
margin:auto;
padding-top: 50px;
padding-bottom: 30px;
}
nav{
background:black;
color:white;
height: 30px;
padding-top: 7px;
margin-bottom: 20px;
}
nav a{
color:white;
text-decoration: none;
}
nav a:hover{
color:#e7e7e7;
}
#logo
nav ul{
list-style: none;
}
nav li{
display: inline;
padding-left: 20px;
}
/* END HEADER*/
/* MAIN*/
#main{
width: 60%;
min-width: 400px;
float: left;
padding:10px 0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #B8B079;
margin-left: 15px;
padding-left: 10px;
padding-right: 20px;
margin-bottom: 40px;
}
#main h2{
padding-bottom: 5px;
}
#main h3{
color:#3A3A3A;
padding-bottom: 10px;
}
#main p{
color:#3A3A3A;
padding-bottom: 50px;
}
#downloads{
width: 50%;
margin-left: 12px;
float: left;
}
#prospectus{
float: left;
padding-right: 10px;
}
#newsletters{
float: left;
}
/* END MAIN*/
/* ASIDE*/
aside{
float:left;
width: 30%;
}
aside ul{
list-style: none;
}
/* END ASIDE*/
여기에 저를 도와주세요, 나는 질문 섹션을 확인했지만 적절한 답변을 찾을 수 couldnt한다. 감사.
감사합니다. Alber, 바닥 글이 jsfidle을 검사했을 때 바닥에 있지 않지만 사이드 바를 사용하여 내 문제를 정리했습니다. 그래도 문제가 뭐라고 생각하니? 다시 한 번 감사드립니다. –
답변을 수락 한 것으로 잊지 말고 도움을 준 사람에게 투표하십시오. – TheAlbear