練習問題 headerレイアウト position

headerレイアウト1

メモ

positionを使って作成しました。
親boxにrelative、位置を指定するセレクタにabsoluteをかけてleftとtopを指定。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<link href="0524.css" rel="stylesheet" type="text/css" media="print,screen">
</head>
<body>
<div id="container">
<div id="header"> 
<h1>Information World</h1>
<h2>Technical Information</h2>
</div>
</div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
 * {
  margin: 0;
  padding: 0;
}
body {
  font-family:
  "Hiragino Kaku Gothic Pro",
  "ヒラギノ角ゴ Pro W3",
  Meiryo, 
  "メイリオ", 
  Osaka, 
  "MS P Gothic", 
  "ＭＳ Ｐゴシック", 
  sans-serif;
  text-align: center;/*IE6でブラウザの中央表示*/
}
#container {
	width: 800px;
	margin: 0 auto;/*ブラウザの中央表示*/
	padding: 20px;
	text-align: left;
}
#header {
	background-image: url(images/01.jpg);
	background-repeat: repeat-x;
	position: relative;
	height: 110px;
}
h1,h2 {
	color: #fff;
}
h1 {
	position: absolute;
        left: 15px;
        top: 35px;
	font-size: 2.0em;
}
h2 {
	font-size: 0.8em;
	position: absolute;
	left: 620px;
	top: 5px;
}

headerレイアウト2

メモ

formにpositionをかける。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<link href="0524_2.css" rel="stylesheet" type="text/css" media="print,screen">
</head>
<body>
<div id="container">
<div id="header">
<ul id="nav">
<li><a href="#">Internet</a></li>
<li><a href="#">Computer</a></li>
<li><a href="#">Networking</a></li>
<li><a href="#">Database</a></li>
</ul>
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
<input name="textfield" type="text" size="15">
<input type="submit" name="Submit" value="検索">
</form>
<h1>Information World</h1>
</div>
</div>
</body>
</html>

@charset "utf-8";
/* CSS Document */

html,body,div,h1,h2,ul,li,form {
  margin: 0;
  padding: 0;
  font-size: 1.0em;
}
body {
  font-family:
  "Hiragino Kaku Gothic Pro",
  "ヒラギノ角ゴ Pro W3",
  Meiryo, 
  "メイリオ", 
  Osaka, 
  "MS P Gothic", 
  "ＭＳ Ｐゴシック", 
  sans-serif;
}

#container {
	width: 800px;
	height: auto;
	padding: 20px;
	text-align: left;
}
#header {
	background-image: url(images/02.jpg);
	position: relative;
	height: 110px;
}

h1 {
  position: absolute;
  left: 15px;
  top: 35px;
  font-size: 2.0em;
  color: #fff;
}
ul#nav {
	list-style-type: none;
	overflow: hidden;
}
#nav li {
	float: left;
	width: 90px;
	text-align: center;
}
#nav li a {
	text-decoration: none;
	color: #fff;
	font-size: 0.75em;
	font-weight: bold;
	line-height: 1.8;
	display:block;
	width: 90px;
}
#nav li a:hover {
	color: #FF9;
}
form {
	position: absolute;
	left: 620px;
	top: 1px;
}