基礎訓練web講座 11日目。

本日はプレゼンの合間に2カラムと疑似クラスの課題とJimboの開設。
まずは課題から行ってみます。

◎ 2カラム完成図 2種

<?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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>2カラムA</title>
<style type="text/css">
<!--
* {
	margin:0;
	padding:0;
}
body {
	text-align: center; 
	background-color: #CCCCCC;
}
#container {
	text-align: left; 
	width: 650px;
	height: 240px;
	background-color: #FFFFFF;
	margin: 50px auto 0 auto;
	border: #FFFFFF solid 2px;
}
#content {
	float: right;
	display: inline;
	width: 440px;
	height: 240px;
	background-color: #FF7F50;
}
#sidebar {
	width: 200px;
	height: 240px;
	background-color: #66CDAA;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="content">
</div>
<div id="sidebar">
</div>
</div>
</body>
</html>

<?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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>2カラムB</title>
<style type="text/css">
<!--
* {
	margin:0;
	padding:0;
}
body {
	text-align: center; 
	background-color: #CCCCCC;
}
#container {
	text-align: left; 
	width: 650px;
	height: 240px;
	background-color: #FFFFFF;
	margin: 50px auto 0 auto;
	border: #FFFFFF solid 2px;
}
#content {
	float: left;
	display: inline;
	width: 440px;
	height: 240px;
	background-color: #FF7F50;
}
#sidebar {
	float: right;
	display: inline;
	width: 200px;
	height: 240px;
	background-color: #66CDAA;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="content">
</div>
<div id="sidebar">
</div>
</div>
</body>
</html>

◎ 疑似クラス完成図

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>メニューのリンク</title>
<style type="text/css">
<!--
#menu {
	border: 1px solid #CCCCCC;
	font-size: bold;
	padding: 10px;
	width: 250px;
}
#menu ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
#menu li {
	border-bottom: 1px solid #CCCCCC;
	padding: 10px;
	margin: 0;
}
#menu li.line {
	margin: 0;
	border-top: 1px solid #CCCCCC;
}
/*ナビゲーション*/
#menu li a {
	color: #000000;
	text-decoration: none;
	text-align: center;
	height: auto;
}
#menu li a:hover {
	color: #FF4500;
}
-->
</style>
</head> 
<body>
<div id="menu">
<ul>
<li class="line"><a href="#">メニューのリンク １</a></li>
<li><a href="#">メニューのリンク ２</a></li>
<li><a href="#">メニューのリンク ３</a></li>
<li><a href="#">メニューのリンク ４</a></li>
<li><a href="#">メニューのリンク ５</a></li>
<li><a href="#">メニューのリンク ６</a></li>
</ul>
</div>
</body>
</html>

ええっと、不思議な点線の囲み罫を無くしたいのですが方法が...わかりません。非常に残念。

※↑↑↑ 先生のご享受のおかげでなんとか！修正出来ました。ありがとうございます。。。