擬似クラスを含むレイアウト

CSS 課題

擬似クラスを含むレイアウト

<!DOCTYPE html>
<lang="ja">
<head>
<meta charset="UTF-8">
<title>XHTML+CSS</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen, print">
</head>

<body>
<!--▼container-->
<div id="container">
<h1><img src="images/logo.gif" alt="株式会社XHTML＋CSS" width="300" height="37"></h1>
<!--▼nav-->
<div id="nav">
<ul>
<li><a href="#" class="home">HOME</a></li>
<li><a href="#" class="service">SERVICE</a></li>
<li><a href="#" class="product">PRODUCT</a></li>
<li><a href="#" class="support">SUPPORT</a></li>
<li><a href="#" class="contact">CONTACT</a></li>
</ul>
</div>
<!--▲nav-->
<p id="bread"><a href="#">トップページ </a>&gt; ニュース一覧</p>
<div id="wrapper">
<!--▼main-->
<div id="main">
<h2>2009.01.01　新年あけましておめでとうございます。</h2>
<p><img src="images/sample.jpg" alt="" width="530" height="125"></p>
<p class="content">
日本国民は、正当に選挙された国会における代表者を通じて行動し、われらとわれらの子孫のために、諸国民との協和による成果と、わが国全土にわたつて自由のもたらす恵沢を確保し、政府の行為によつて再び戦争の惨禍が起ることのないやうにすることを決意し、ここに主権が国民に存することを宣言し、この憲法を確定する。そもそも国政は、国民の厳粛な信託によるものてあつて、その権威は国民に由来し、その権力は国民の代表者がこれを行使し、その福利は国民がこれを享受する。これは人類普遍の原理であり、この憲法は、かかる原理に基くものである。われらは、これに反する一切の憲法、法令及び詔勅を排除する。
</p>
<h3>新年のごあいさつ</h3>
<p class="content">日本国民は、恒久の平和を念願し、人間相互の関係を支配する崇高な理想を深く自覚するのであつて、平和を愛する諸国民の公正と信義に信頼して、われらの安全と生存を保持しようと決意した。われらは、平和を維持し、専制と隷従、圧迫と偏狭を地上から永遠に除去しようと努めてゐる国際社会において、名誉ある地位を占めたいと思ふ。われらは、全世界の国民が、ひとしく恐怖と欠乏から免かれ、平和のうちに生存する権利を有することを確認する。</p>
<h3>今年度の目標</h3>
<p class="content2">われらは、いづれの国家も、自国のことのみに専念して他国を無視してはならないのであつて、政治道徳の法則は、普遍的なものであり、この法則に従ふことは、自国の主権を維持し、他国と対等関係に立たうとする各国の責務であると信ずる。日本国民は、国家の名誉にかけ、全力をあげてこの崇高な理想と目的を達成することを誓ふ。</p>
</div>
<!--▲main-->
<!--▼sidebar-->
<div class="sidebar">
<div class="title">
<h4>２００９年度</h4>
</div>
<ul>
<li><a href="#">９月 - １２月</a></li>
<li><a href="#">５月 - ８月</a></li>
<li><a href="#">１月 - ４月</a></li>
</ul>
</div>
<div class="sidebar">
<div class="title">
<h4>２００８年度</h4>
</div>
<ul>
<li><a href="#">９月 - １２月</a></li>
<li><a href="#">５月 - ８月</a></li>
<li><a href="#">１月 - ４月</a></li>
</ul>
</div>
<!--▲sidebar-->
</div>
<!--▼footer-->
<div id="footer">
<ul>
<li><a href="#">ニュース一覧 </a></li>
<li><a class="border" href="#">サポート</a></li> 
<li><a class="border"href="#">サイトマップ</a></li>
</ul>
<address>Copyright 〓</address>
</div>
<!--▲footer-->
</div>
<!--▲container-->
</body>
</html>

@charset "UTF-8";
* {
  padding: 0;
  margin: 0;
}
body {
  font-size: 0.875em;
  font-family: Meiryo, "メイリオ", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", osaka, sans-serif;
  line-height: 1.7;
  background-color: #fff;
}
img {
  border: none;
}
a {
  color: #58a0c8;
  text-decoration: none;
}
#container {
  width: 760px;
  margin: 10px auto;
}
h1 {
  margin-bottom: 10px;
}
/*navi*/
#nav {
  overflow: auto;
  margin-bottom: 10px;
}
#nav ul, .sidebar ul, #footer ul {
  list-style-type: none;
 }
#nav li {
  display: inline;
  float: left;
}
#nav li a {
  display: block;
  width: 152px;
  height: 0;
  padding-top: 34px;
  overflow: hidden;
}
/*navi_hover*/
#nav a:hover {
  background-position: 0 -34px;
}
a.home {
  background-image: url(../images/global_btn1.gif);
  background-position: 0 -34px;
}
a.service {
  background-image: url(../images/global_btn2.gif);
}
a.product {
  background-image: url(../images/global_btn3.gif);
}
a.support {
  background-image: url(../images/global_btn4.gif);
}
a.contact {
  background-image: url(../images/global_btn5.gif);
}
/*content*/
#bread {
  margin-bottom: 10px;
}
#wrapper {
  width: 760px;
}
/*main*/
#main {
  width: 540px;
  float: right;
  margin: 0 10px 0 10px;
}
h2 {
  color: #fff;
  font-size: 1.2em;
  padding: 10px;
  margin-bottom: 10px;
  background-color: #529416;
}
#main p.content, #main p.content2 {
  padding: 10px 0 10px 0;
  margin-bottom: 15px;
  border-bottom: solid 1px #ccc;
}
#main p.content2 {
  margin-bottom: 50px;
}
h3 {
  font-size: 1.15em;
  padding-left: 10px;
  border-left: solid 7px #529416;
}
/*sidebar*/
.sidebar {
  width: 175px;
  float: left;
  margin: 0 10px 0 15px;
 }
.sidebar  {
  margin-bottom: 20px;
  background-image: url(../images/leftmenu_bottom.gif);
  background-repeat: no-repeat;
  background-position: left bottom;
}
.sidebar .title {
  background-image: url(../images/leftmenu_top.gif);
  background-repeat: no-repeat;
  background-position: left top;
  border-bottom: dashed 1px #ccc;
}
h4 {
  padding: 10px 0 0 10px;
}
.sidebar ul {
  background-image: url(../images/leftmenu_bg.gif);
  background-repeat: repeat-y;
  background-position: left top;
}
.sidebar li {
  padding: 10px 0 5px 25px; 
  background-image: url(../images/link_point.gif);
  background-repeat: no-repeat;
  background-position: 15px 15px;
  border-bottom: dashed 1px #ccc;
}
/*footer*/
 #footer {
  clear: both;
  position: relative;
  border-top: solid 2px #ccc;
}
#footer ul {
  padding: 10px 0;
}
#footer li {
  display:  inline;
}
#footer li a.border {
  padding: 0 10px ;
  border-left: solid 2px #ccc;
}
address {
  font-style: normal;
  position: absolute;
  right: 5px;
  top: 10px;
  margin-bottom: 10px;
}

sidebarの下に配置している画像が上手く表示できない。