みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

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

解決済みの質問

ボックスの高さを揃える、について

こんばんは。
私は今CSSでHPを作っているのですが、左側にメニュー画像、右側に
内容、といった風にしたいのですが、左側だけに壁紙を貼り付けようと
しているのですが、上手く出来ません。
左側のボックスにmin-heightを付けたりしたのですが、それですと右のページの長さが変わると意味が無くなってしまいます・・・。
何処が間違っていましたら、ご指摘お願いします。

HTML部
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="css.css" type="text/css">
<title>あ/title>
</head>

<body>
<div id="wrapper">
<div id="layout">
<div id="side">
<img src="menu.gif" usemap="#map1" alt="menu">
<map name="map1">
(ここは略させて頂きます)</map>
</div>
<div id="main">
<div class="sample1">
<img src="webtitle2.gif" alt="title">
</div>
</div>
</div>
</div>
</body>
</html>

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

#wrapper {padding: 0px;}

#layout {width: 850px;
background-image: url("sidewall2.gif");
background-repeat: repeat-y;
background-attachment: fixed;}

#side {float:left;
width: 150px;
margin-left:0px;
margin-top:0px;}

#main {
float:right;
width: 700px;}

div.sample1{background-color: transparent;
margin:10px;
text-align:left;
color:#282828;
font-size:13px;}

投稿日時 - 2007-03-27 04:32:12

QNo.2869109

すぐに回答ほしいです

質問者が選んだベストアンサー

これであなたのやりたいことはOKなはずです。
要は、左側のイメージマップをつけたメニュー画像の背景画像が、右側のコンテンツの縦幅にかかわらずずれないように(繰り返されないように)ということだと読みましたがOKですか?。
あちこちいじってますが、ポイントは#layoutにsidewall2.gifに関するスタイルを入れていたのを#sideに替えたという所です。どうでしょう。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
* {margin: 0px;
 padding: 0px;}

#wrapper {
padding: 0px;

float:left;
border-width: 2px; border-style: solid; border-color:blue;
}

#layout {
width: 850px;
/*background-image: url("sidewall2.gif");
background-repeat: repeat-y;
background-attachment: fixed;*/


float:left;
border-width: 2px; border-style: solid; border-color:green;
}

#side {
float:left;
width: 150px;
margin-left:0px;
margin-top:0px;

background-image: url("sidewall2.gif");
background-repeat: repeat-y;
background-attachment: fixed;

/*height:500px;*/
background-color:red;
/*border-width: 2px; border-style: solid; border-color:red;*/
}

#main {
float:right;
width: 700px;

/*border-width: 2px; border-style: solid; border-color:orange;*/
background-color:orange;
}

div.sample1{
/*background-color: transparent;*/
margin:10px;
/*text-align:left;*/
/*color:#282828;*/
/*font-size:13px;*/

/*border-width: 2px; border-style: solid; border-color:#000000;*/
background-color:yellow;
}
-->
</style>
<title>title</title><!--endtag miss-->
</head>

<body>

<div id="wrapper">
#wrapper
<div id="layout">
#layout

<div id="side">
#side
<img src="menu.gif"></div><!--end_side-->

<div id="main">
#main
<div class="sample1">
.sample1
image
</div>
</div><!--end_main-->

</div><!--end_layout-->
</div><!--end_wrapper-->

</body>
</html>

投稿日時 - 2007-03-27 11:11:00

補足

私の文章力不足で、伝えたい事が上手く伝わってないみたいで、申し訳御座いません。
私の言いたい事は、左側のメニュー(つまりsideの部分)のメニュー画像の高さが500pxだとすると、そのsideのボックスは500pxのままになってしまい、右側のコンテンツの高さが800pxでしたりする場合に、右側と左側でボックスの長さが違ってしまう、という事なんです。つまりどれだけスクロールしてもsideのメニュー画像が置いてあるボックスの背景画像が右側と釣り合うように、という事なんです。
前述で回答して下さった場合のを一度試してみましたが、やはり左と右の高さが揃わず、layoutの方にも背景画像が表示されません。
もしよろしければご回答お願いします。
分かりにくい説明で申し訳御座いませんでした。

投稿日時 - 2007-03-27 17:28:40

お礼

丁寧なご回答有難う御座います。大分助かりました。

投稿日時 - 2007-03-28 15:03:44

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

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

回答(3)

ANo.3

「ボックスの高さ」ではなく、「メニュー画像とその位置」ですね?
で、「揃えたい」というよりも、
要はjavascriptでよくやるように、ページの下部を見ようとスクロールさせても、いつでもメニュー部分が真横にあるというか、スクロール時のブラウザ表示領域の最上部にメニューがまるまる表示されていてほしいと。
こういうことですか。

投稿日時 - 2007-03-28 14:03:17

お礼

わざわざご回答有難う御座います!
色々やってみた所、自分の納得する形が出来ました。

投稿日時 - 2007-03-28 15:05:59

ANo.2

こんにちは

領域が多すぎるので情報を整理したいのですが・・・
>領域について
wrapper → (ページ)全体領域
layout → 表示するコンテンツ領域
side → クリッカブルマップ(?)領域
main → テキスト領域の為の下準備領域(?)
sample1 → 実際のテキスト領域

>背景画像について
上記で言うところのコンテンツ領域(layout)の背景画像

>高さを揃えるについて
今現在(僕の環境では)
┌┐
└┼┐
  └┘
こんな感じでsideとmainが配置されてますが
┌┐┌┐
└┘└┘
こういう風にしたいということですか?
それとも上の状態で高さを揃えるということですか?


<style type="text/css">
<!--
* {
margin: 0px;
padding: 0px;
}

#layout {
width: 850px;
background-image: url("sidewall2.gif");
background-repeat: repeat-y;
background-attachment: fixed;
}

.side {
width: 150px;
margin-left:0px;
margin-top:0px;
vertical-align: top;
}

.main {
width: 700px;
vertical-align: top;
}

.sample1{
margin:10px;
text-align:left;
font-size:13px;
}
//-->
</style>

<table id="layout">
<tr><td class="side">
<img src="menu1.gif" usemap="#map1" alt="menu">
<map name="map"></map>
</td><td class="main">
<div class="sample1">
<img src="webtitle2.gif" alt="title">
</div>
</td</tr></table>


vertical-align: top;
は必要なければ削除してください

投稿日時 - 2007-03-28 01:17:31

お礼

わざわざ図解で説明していただいて有難う御座います。
お陰様でこちらの方で解決する事が出来ました。

投稿日時 - 2007-03-28 15:04:43

あなたにオススメの質問