こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

CSSで、フレーム的な表現をしたいのですが、スマートなやり方を教えてください。

CSSにて、「サイドメニュー」「ヘッダ」「コンテンツ」と言うコンテンツを制作したく、以下のソースを記述したのですが、コンテンツ部分(.contents)を100%にすると当然、ヘッダ部分(.header)の100px分がはみ出てしまい、サイドメニュー(.side)の下に余白がでてしまいます。
これを回避するために、現状position: fixed;を使用し、IE用には分岐で他のcssを読ませるようにしているのですが、もっとスマートに、ひとつのcssでこのレイアウトを実現する方法はないものでしょうか?


<!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">

<head>
<title>test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--

*{
margin: 0px;
padding: 0px;
}

html, body {
height: 100%;
width: 100%;
overflow: auto;
}

.header {
position: absolute;
left: 200px;
width: 300px;
height: 100px;
background-color: #ddd;
}

.side {
position: absolute;
width: 200px;
height: 100%;
background-color: #aaa;
}

.contents {
position: absolute;
margin-top: 100px;
margin-left: 200px;
width: 300px;
height: 100%;
background-color: #333;
overflow: auto;
}

-->


</style>
</head>

<body>

<div class="header">
header
</div>

<div class="side">
side
</div>

<div class="contents">
contents<br />
</div>

</body>
</html>

投稿日時 - 2006-04-28 15:19:27

QNo.2119300

困ってます

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(5)

ANo.5

全体をさらにdivで囲んで、左から200pxの範囲のみ背景画像を利用(repeat-y)するのはどうでしょうか。

投稿日時 - 2006-04-29 20:40:44

No.1の者です。
.right {
margin-left:200px;
width:300px;
}

.right {
float:left;
width:300px;
}
に替えてください。すみません。

投稿日時 - 2006-04-28 17:08:11

ANo.3

No2ですが続きです。
css2.cssというファイルに
body {
margin: 0%;
padding: 0%;
text-align: center;
background: #ccffff;
}

#container {
position:relative;
width: 90%;
margin-top:0%;
margin-left:auto;
margin-right:auto;
padding: 0%;
text-align:left;
background: #ffffcc;
border-top: none;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
border-left: 1px solid #999999;
}

#banner {
margin: 0%;
padding: 1%;
background: #ccff99;
border-bottom:1px solid #999999;
}

#place {
margin: 0%;
padding: 1%;
font-size: 82%;
font-weight: bold;
color: #333333;
background: #ffffff;
border-bottom:1px solid #999999;
}

#content {
margin: 0% 0% 0% 20%;
padding: 10px;
color: #333333;
background: #ffffcc;
border-right: 1px solid #999999;
border-left: 1px solid #999999;
}

#side-left {
position: absolute;
top: 90px; 
left: 4px;
margin: 0%;
width : 19%;
background: #ffffff;
}

#footer {
margin: 0%;
padding: 1%;
color: #333333;
background: #ffffcc;
border-top: 1px solid #999999;
}
ul {
list-style-type: none;
margin: 5px;
font-size: 95%;
line-height: 130%;
}
li { border-bottom: 1px solid #999999; }

と書いています。

お望みのようなものができるかどうかわかりませんがやってみてください。

投稿日時 - 2006-04-28 16:59:28

ANo.2

自分の場合は、
htmlファイルに
<?xml version="1.0" encoding="Shift_JIS"?>
<!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" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="robots" content="INDEX,FOLLOW" />
<link rel="stylesheet" href="css2.css" type="text/css" />

<title>サイト名</title>
</head>

<body>

<div id="container">

<div id="banner">
<h1>サイト名</h1>
</div><!-- div id="banner" -->

<div id="place">
現在の位置</div><!-- div id="place" -->

<div id="side-left">
<ul>
<li>メニュー</li>
<li>ホーム</li>
<li><a href="annai.html">ご利用案内</a></li>
<li><a href="new.html>更新情報</a></li>



<li><a href="kensaku.html">キーワード検索</a></li>
</ul>
</div><!-- div id="side-left" -->

<div id="content">

<h2>本文のタイトル</h2>
<p>本文の中身</p>

</div><!-- div id="content" -->



<div id="footer">
<p>フッター</p>

</div><!-- div id="footer" -->

</div><!-- div id="container" -->

</body>
</html>

と書き
(続きます)

投稿日時 - 2006-04-28 16:54:07

↓なかんじで。widthを指定している要素にpaddingやborderを指定すると
WindIE5などでバグるので注意してください。
<head>
<title>test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-style-type" content="text/css" />
<style type="text/css">
<!--

*{
margin: 0px;
padding: 0px;
}
.container {
width:500px;
overflow:hidden;
}
.container:after {
content:".";
display:block;
clear:both;
height:0;
line-height:0;
visibility:hidden;
}
.side {
float:left;
width:200px;
background-color: #aaa
}
.right {
margin-left:200px;
width:300px;
}
.header {
background-color: #ddd;
}
.contents {
background-color: #333;
}
-->
</style>
</head>

<body>
<div class="container">
<div class="side">
side
</div>
<div class="right">
<div class="header">
header
</div>
<div class="contents">
contents<br />
</div>
</div>
</div>
</body>

投稿日時 - 2006-04-28 16:53:39

あなたにオススメの質問