5/16のまとめ - はれあめはれ

授業メモ

position

absolute の外側(囲み、親要素)はrelative にする
IE はfixed は使えない
z-index: 上に重ねられる→absolute に対して使う。100単位〜上が1000
position は右側のナビや、フッターナビの右端だけにコンテンツを置くときに使う。またはfloat の上に何か置く場合

<?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" />
<title>Position</title>
<style type="text/css">
* {
  margin: 0;
  padding: 0;
}
body {
  font-size: 1em;
  color: #fff;
  font-family: Meiryo, "メイリオ", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴシック Pro W3", Osaka, sans-serif;
  background-color: #ccc;
}
#container {
  margin: 20px auto;
  width: 800px;
  height: 400px;
  padding: 10px;
  background-color: #fff;
}
#header {
  width: 800px;
  height:100px;
  background-color: #a3bed5;
	position: relative;
}
h1{
  font-size: 1.85em;
  font-family: serif;
	position: absolute;
	left: 20px;
	top: 20px;
}
#header_inner ul {
  font-size: 0.875em;
  list-style-type: none;
	position: absolute;
	right: 20px;
	top: 30px;
}
#header_inner li {
  display: inline;
  margin: 10px;
}
#header_inner a:link {
  color: #000;

}
#header_inner a:visited {
  color: #000;
  text-decoration: none;
  border: solid 2px #72bd60;
}
#wrapper {
	position; relative;
  padding: 10px;
}
#content {
  width: 575px;
  height: 290px;
  position: absolute;
	right: 0;
	top: 110px;
  background-color: #dcd78a;
}
h2 {
  position: absolute;
  left: 20px;
  top: 5px;
}
h2 + p {
  position: absolute;
  left: 20px;
  top: 35px;
}
#sidebar {
  width: 210px;
 height: 290px;
  position: absolute;
	left: 0;
	top:110px;
  background-color: #9cc56e;
}
#sidebar p {
  position: absolute;
  left: 20px;
  top: 5px;
}

</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>ここにサイトタイトルが入る</h1>
<div id="header_inner">
<ul>
<li><a href="#">このサイトについて</a></li>
<li><a href="#">お問い合わせ</a></li>
<li><a href="#">サイトマップ</a></li>
</ul>
</div>
<div id="wrapper">
<div id="content">
<h2>ここに見出しが入る</h2>
<p>ここに本文が入る</p>
</div>
<div id="sidebar">
<p>sidebar</p>
</div>
</div>
</div>
</div>
</body>
</html>