0
CSSのリセットがメインのCSSスタイルシートとclearfixと干渉するここ
/* Don't erase box-sizing */
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-box-sizing: border-box;
}
/* Don't erase .group */
.group:after {
content: "";
display: table;
clear: both;
}
body {
background: #cccccc;
font-family: Helvetica, Arial, Sans-serif;
line-height: 1.5em;
font-size: 14px;
color: #666666;
margin: 0;
}
a{
color: #f58220;
}
#main_wrapper{
width: 960px;
margin: 0 auto;
}
header {
background: #333333;
padding: 30px 0 0 0;
}
.logo a{
display: block;
width: 133px;
height: 46px;
background: url(http://www.teamusa.org/~/media/USA_Fencing/Logo/Nike-Fencing.png?la=en);
background-repeat: no-repeat;
background-size: 100% 100%;
text-indent: -9999px;
margin: 0 0 25px 20px;
}
.primary ul {
background: #666666;
}
.primary ul li {
float: left;
border-right: 1px solid #333333;
}
.primary ul li a {
display: block;
padding: 20px;
color: #ffffff;
}
.content_wrap {
background: e5e5e5;
}
#main_content {
background: #ffffff;
float: left;
width: 660px;
}
aside {
width: 300px;
background: #e5e5e5;
float: right;
}
footer {
clear: both;
background: #333333;
height: 50px;
}
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
\t margin: 0;
\t padding: 0;
\t border: 0;
\t font-size: 100%;
\t font: inherit;
\t vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
\t display: block;
}
body {
\t line-height: 1;
}
ol, ul {
\t list-style: none;
}
blockquote, q {
\t quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
\t content: '';
\t content: none;
}
table {
\t border-collapse: collapse;
\t border-spacing: 0;
}<!DOCTYPE HTML}>
<html>
<head>
<title>Yonsei Fencing</title>
<link rel="stylesheet" href="reset.css" type="text/css"/>
<link rel="stylesheet" href="index5.css" type="text/css"/>
</head>
<body>
<div id="main_wrapper">
<header>
<h1 class="logo"><a href="#" title="cool image">This is an image</a></h1>
<nav class="primary">
<ul class="group">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</nav>
</header><!--end header-->
<div class="content_wrap" group>
<section id="main_content">
<article class="posts"><img class="thumbnail" src="#" alt="thumbnail">
<div>
<h1><a href="#" title="">This is a Lorem Ipsum Heading</a></h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<a href="#" title="readmore">Read More</a>
</div>
</article>
<article class="posts"><img class="thumbnail" src="#" alt="thumbnail">
<div>
<h1><a href="#" title="">This is a Lorem Ipsum Heading</a></h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<a href="#" title="readmore">Read More</a>
</div>
</article>
<article class="posts"><img class="thumbnail" src="#" alt="thumbnail">
<div>
<h1><a href="#" title="">This is a Lorem Ipsum Heading</a></h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<a href="#" title="readmore">Read More</a>
</div>
</article>
<article class="posts"><img class="thumbnail" src="#" alt="thumbnail">
<div>
<h1><a href="#" title="">This is a Lorem Ipsum Heading</a></h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<a href="#" title="readmore">Read More</a>
</div>
</article>
<article class="posts"><img class="thumbnail" src="#" alt="thumbnail">
<div>
<h1><a href="#" title="">This is a Lorem Ipsum Heading</a></h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<a href="#" title="readmore">Read More</a>
</div>
</article>
</section><!--end main_content-->
<aside>
<div class="side_box">
<h2 class="sidebar_heading">Sidebar Links</h2>
<ul>
<li><a href="#" title="">Link 1</a></li>
<li><a href="#" title="">Link 2</a></li>
<li><a href="#" title="">Link 3</a></li>
<li><a href="#" title="">Link 4</a></li>
</ul>
</div><!--end sidebox-->
<div class="side_box">
<h2 class="sidebar_heading">Text Widget</h2>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </br></br>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div><!--end sidebox-->
</aside><!--end sidebar-->
</div><!--end content wrap-->
<footer>
<small>Copyright <a href="#">WebSite.</a> All rights reserved.</small>
</footer>
</div>
</body>
</html>こんにちは、初心者コーダを動作しません。
別のスタイルシートにあるMy CSS Reset（http://meyerweb.com/eric/tools/css/reset/）は、私のロゴの周りのヘッダーの黒い背景色を無効にすることで、メインのスタイルシートを妨害しているようです。本文のfont-sizeとline-heightも変更されません。また、 ".group：after"（https://css-tricks.com/snippets/css/clear-fix/）は、サイドバーに欠けている背景色の隙間を埋めることになっていますが、空白が残ります。
ヘルプ？
私はその部分を修正するのを手伝ってくれてありがとう！残りのために何をすべきかまだ分かりません。 – noddy