今日の応用編

sidebar in navigation
hoverの時に出る枠が小さい。
sidebarの中のナビゲーションの中の文字をcenter上ではなくcenter中央にしたい。
containerのbackgroundは＃０００の為同化しています。
text editorで作成し、はてなに載せた後プレビューすると必ずcssだけ省かれている。
試行錯誤の末、完璧に見ないでいきました。

20120530060933

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html: charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>外部css編</title>
<link rel="stylesheet" href="gaibu.css" type="text/css" media="screen.print" />
<style type="text/css">
<!--
*{
    margin: 0;
	padding: 0;
	font-size: 100%;
	font-style: normal;
	font-weight: normal;
	border: none;
	list-style-type: none;
	text-align: left;
}
#container{
    width: 820px;
	height: 740px;
	margin:10px;
	background-color: #000;
}
#header{
    width: 800px;
	height: 120px;
	margin: 10px;
	text-align: center;
	font-size: 2.0em;
	position: relative;
	top: 10px;
	background-color: #f0f;
}
#wrapper{
    width: 800px;
	height: 520px;
	margin: 10px;
	position: relative;
	top: 10px;
	background-color: #ff0;
	overflow: auto;
}
#content{
    width: 500px;
	height: 500px;
	float: left;
	margin: 10px 0 10px 10px;
	background-color: #00f;
}
#sidebar{
    width: 260px;
	height: 500px;
	float: right;
	margin: 10px 10px 10px 0;
	background-color: #333;
}
#nav{
     width: auto;
	 height: auto;
	 margin: 10px;
}
#nav ul{
    width: 120px;
	height: 120px;
}
#nav li{
    width: 224px;
	height: 80px;
	text-align: center;
	font-size: 20px;
	border-top: 8px ridge #fff;
	border-right: 8px ridge #fff;
	border-bottom: 8px ridge #fff;
	border-left: 8px ridge #fff;
}
#nav li a{
    width: auto;
	height: 120px;
	padding: 10px;
	display: list item;
}
#footer{
    width: 800px;
	height: 60px;
	margin: 10px;
	background: #090;
	position: relative;
	top: 10px;
}
#nav a:link,#nav a:visited{
    color: #f44;
	text-decolation: blink;
}
#nav a:hover{
    color: #fff;
	background-color: #777;
}
h1{
    text-align: center;
	text-decolation: blink;
	color: fdf;
}
-->
</style>
</head>
<body>
<div id="container">
	<div id="header">
		<h1>RIAL MAGZIN</h1>
	</div>
	<div id="wrapper">
		<div id="content">
			<p>コンテント内容＆本文</p>
		</div>
			<div id="sidebar">
				<div id="nav">
                    <ul>
                        <li><a href="#">REGGAE</a></li>
                        <li><a href="#">HIP-HOP</a></li>
                        <li><a href="#">SOUL</a></li>
                        <li><a href="#">JAZZ</a></li>
                        <li><a href="#">FUNK</a></li>
                    </ul>
				</div>
			</div>
	</div>
			<div id="footer">
				<address>管理者からのお知らせ</address>
			</div>
</div>
</body>
</html>