ウェブ学のすすめ

Study of Web Design & Programing

header部のレイアウト(1)

課題

  • container幅:800px

引用元:復習:header - Webデザインの勉強|忘筌

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" type="text/css" media="screen,print">
<title>header(1)</title>
</head>
<body>
<div id="container">
<div id="header"> 
<h1 lang="en">Information World</h1>
<h2 lang="en">Technical Information</h2>
</div>
</div>
</body>
</html>

CSS(positionの場合)

@charset "UTF-8";

* {
	margin: 0;
	padding: 0;
}
body {
	color: #fff;
	background-image: url(bg.jpg);
	background-repeat: repeat-x;
	background-position: left top;
}
#container {
	width: 800px;
	margin: 0 auto;
}
h1 {
	margin: 35px 0 0 20px;
}
h2 {
	position: absolute;
	top: 8px;
	left: 800px;
	font-size: 0.875em;
	width: 150px;
}

正当なCSSです!