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

CSS課題

ケーキサイトより難しかった・・・
http://felica.boy.jp/xhtml-css/index.html

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

@charset "UTF-8";

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #fff;
  font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}

a {
  text-decoration: none;
}


h1 {
  background-image: url(images/logo.gif);
  background-repeat: no-repeat;
  color: aqua;
  padding-top: 36px;
  height: 0 !important;
  overflow: hidden;
  margin-top: 20px;
}

#container {
  width: 760px;
  margin: 0 auto;
}

#global_nav {
  margin-top: 20px;
}
#global_nav li {
  float: left;
}
#global_nav li a {
  background-position: left top;
  background-repeat: no-repeat;
  width: 152px;
  height: 34px;
  display: block;
  overflow: hidden;
  padding-top: 34px;
  height: 0 !important;
  overflow: hidden;
}

#home a {
  background-image: url(images/global_btn1.gif);
  background-position: left top;
}
#home a:hover {
  background-image: url(images/global_btn1.gif);
  background-position: left bottom;
}

#service a {
  background-image: url(images/global_btn2.gif);
  background-position: left top;
}
#service a:hover {
  background-image: url(images/global_btn2.gif);
  background-position: left bottom;
}

#product a {
  background-image: url(images/global_btn3.gif);
  background-position: left top;
}
#product a:hover {
  background-image: url(images/global_btn3.gif);
  background-position: left bottom;
}

#support a {
  background-image: url(images/global_btn4.gif);
  background-position: left top;
}
#support a:hover {
  background-image: url(images/global_btn4.gif);
  background-position: left bottom;
}

#contact a {
  background-image: url(images/global_btn5.gif);
  background-position: left top;
}
#contact a:hover {
  background-image: url(images/global_btn5.gif);
  background-position: left bottom;
}

#pan {
  clear: both;
  padding: 10px 0 5px 10px;
  font-size: 0.8em;
}

#wrapper {
  margin: 0 10px 0 10px;
  overflow: hidden;
}

#content {
  float: right;
  width: 550px;
}

#sidebar {
  float: left;
  width: 190px;
  font-size: 0.8em;
}
#sidebar li {
  background-image: url(images/link_point.gif);
  background-repeat: no-repeat;
  background-position: 5px 15px;
  padding: 10px 0 10px 15px;
  margin-left: 10px;
  width: 145px;
}

#sidebar li a:link {
  text-decoration: none;
}
#sidebar li a:hover {
  text-decoration: underline;
}

#fall {
  width: 145px;
  border-top: 1px dotted #999;
  border-bottom: 1px dotted #999;
}
#summer {
  width: 145px;
  border-bottom: 1px dotted #999;
}
#winter {
  border-bottom: 0;
}

.section {
  background-image: url(images/leftmenu_bg.gif);
  background-repeat: repeat-y;
}
#sidebar_footer {
  background-image: url(images/leftmenu_bottom.gif);
  background-repeat: no-repeat;
  padding-bottom: 20px;
}

#footer {
  clear: both;
}

h2 {
  background-color: #529416;
  color: #fff;
  font-size: 0.8em;
  padding: 10px;
}

#content_main {
  margin: 10px;
}

hr {
  margin-top: 10px;
  margin-bottom: 20px;
}

p {
  margin-top: 5px;
}

h3 {
  padding-left: 10px;
  border-left: 6px solid #529416;
}

h4 {
  background-image: url(images/leftmenu_top.gif);
  background-repeat: no-repeat;
  padding: 10px;
  width: 160px;
}

#footer {
  font-size: 0.8em;
}
#footer li {
  display: inline;
}

#news_nav {
  border-left: 0;
  padding: 0 8px 0 0;
}
#support_nav {
  border-left: 1px solid #999;
  padding: 0 8px 0 8px;
}
#sitemap_nav {
  border-left: 1px solid #999;
  padding: 0 8px 0 8px;
}

#copyright {
  float: right;
  position: relative;
  bottom: 30px;
}