掲示板/総合質問板/過去ログ/一覧/ 画面全体を中心にしたいのですが。

0 名前： かつら ： 2007/05/17（木） 16:00 ID:PGD/btdf sub-ni: 初歩的な質問で申し訳ございません。
HP全体を常に画面の中心にしたいのですがやり方がわかりません。
お気に入り等のサイドバーなどを消すとと左に寄ってしまいます。
どうすればいいのでしょうか？

1 名前： カヅサツ ◆ThCi95HEzw ： 2007/05/17（木） 16:00 ［URL］ ID:Ehfvypix sub-r2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<title></title>
<style type="text/css">
html,body{
	height: 100%;
	margin: 0px;
	padding: 0px;
}
.whole{
	height: 100%;
	width: 100%;
}
.whole td{
	vertical-align: middle;
}
.main{
	width: 80%;
	margin: 0px auto;
	background-color: #FCC;
}
</style>
</head>
<body>
<table class="whole">
	<tr>
		<td>
			<div class="main">
				<h1>かつらのウェブページ</h1>
				<p>段落</p>
			</div>
		</td>
	</tr>
</table>
</body>
</html>

ただし、テーブルのheightを % 指定するのは公式のルールにないため、無視する環境はあるかもしれません。もっとも、あまり致命的ではないでしょうが。

また、テーブルをレイアウト目的で使用するのは本来の使い道ではありません。今回は IE 対策のために止むを得ず使用しましたが、なるべくならこのような使い方は避けたほうが無難です。

2 名前： かつら ： 2007/05/17（木） 16:00 ID:LaRKglOT sub-ni: カヅサツ様ありがとうございます。
しかしながらHP作成初めてなのでなかなかできません・・・。
このHPの場合どうすればいいでしょうか？

http://www.def-jp.com/new

お気に入りバーなどを出すと右によってしまいます。

3 名前： カヅサツ ◆ThCi95HEzw ： 2007/05/17（木） 16:00 ［URL］ ID:lF4.cd1a sub-gm

10分でデッチ上げたので、細かい文法違反があるかもしれません。
http://openlab.ring.gr.jp/k16/htmllint/htmllint.html

あたりでチェックしてください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<meta name="Keywords"
content="(略)"> 
<meta name="Description" content="COOTIE取扱店　通販可"> 
<meta name="Robots" content="index, follow">
<title>DEF.WEB</title>
<style type="text/css"><!--
body,html{
	height: 100%;
}
body{
	background-image: url("./untitled1.jpg");
	background-position: 50% 0%;
	margin: 0px;
	font-size: x-small;
}
hr{
	visibility: hidden;
	clear: both;
}
address{
	text-align: right;
}
a:link img,
a:visited img{
	border-width: 0px;
}
.whole{
	width: 680px;
	height: 100%;
	margin: 0px auto 0px auto;
	border-collapse: collapse;
}
.title{
	position: relative;
}
	.title h1{
		text-align: right;
		margin: 0px;
	}
	.title ul{
		position: absolute;
		margin: 0px;
		padding: 0px;
		list-style-type: none;
		top: auto;
		right: auto;
		bottom: 0px;
		left: 0px;
	}
	.title li img{
		height: 22px;
	}
.main{
	margin: 40px 0px 0px 0px;
}
	.main dl{
		margin: 0px;
		width: 208px;
		float: left;
	}
	.main dd{
		margin: 0px 0px 1em 0px;
	}
	.history{
		width: 455px;
		float: right;
	}
	.history p{
		margin: 0px;
	}
--></style>
</head>
<body>
<table class="whole"><tr><td>
	<div class="title">
		<h1><img src="./mide2.gif" alt="DEF" title=""></h1>
		<ul>
			<li><a href="./"><img
				src="./menu1.gif"
				alt="Home"
				title=""></a></li>
			<li><a href="./blog.html"><img
				src="./menu2.gif"
				alt="Blog"
				title=""></a></li>
			<li><a href="./info.html"><img
				src="./menu3.gif"
				alt="Info"
				title=""></a></li>
			<li><a href="./"><img
				src="./menu4.gif"
				alt="Style"
				title=""></a></li>
			<li><a href="./link.html"><img
				src="./menu5.gif"
				alt="Link"
				title=""></a></li>
			<li><a href="http://def.shop-pro.jp/"><img
				src="./menu6.gif"
				alt="Online Shop"
				title=""></a></li>
		</ul>
	</div>
	<div class="main">
		<dl>
			<dt><a href="http://navi.zozo.jp/shop/?sid=2073"><img
				src="./blogn.GIF"
				alt="DEF.blog"
				title=""
				width="206" height="91"></a></dt>
			<dd>DEF.blogリニューアル！！</dd>
			<dt><a href="http://navi.zozo.jp/shop/?sid=2073"
				target="_blank"><img
				src="zo.GIF"
				alt="ZOZO NAVI"
				title=""
				width="208" height="84"></a></dt>
			<dd>ZOZO NAVIにて更新情報等チェックできます。</dd>
		</dl>
		<div class="history">
			<p><img src="./crnr1.gif" alt=""></p>
			<p><iframe src="http://blog.def-jp.com/"
				width="455" height="280"
				frameborder="0"
				title="News"><a
				href="http://blog.def-jp.com/">NEWS!!</a></iframe></p>
			<p><img src="./crnr2.gif" alt=""></p>
		</div>
		<hr>
		<address><IMG src="reserved.gif"
		width="294" height="12"
		alt="Copyrights &copy; 2006/DEF CO. LTD. All rights reserved."
		title=""></address>
	</div>
</td></tr></table>
</body>
</html>

4 名前： かつら ： 2007/05/17（木） 16:00 ID:z0c3PHbq sub-ni: カヅサツ様ありがとうございます！
できました！本当にありがとうございます！！