特殊なカラムのデザイン設定について
いつもお世話になっております。閲覧ありがとうございます。
実は新しいことに挑戦して自己解決できず、宜しければお知恵をお借り頂ければと思います。
どのようなことかと言うと
１．左カラムのheight部分を100％表示して、position:fixedを使って位置固定とスクロールしないメニュー画面を作りたい。
２．左カラムにマウスを乗せるとカラムが右に若干スライドするようにしたい。スライド時、右カラムも左カラムが動いた分、スライドします。
以上のようなWEBサイトを作りたいのですが・・・項目１の部分で躓いてしまいました。
実は左カラムの部分に右カラムが隠れてしまっています。
解決策として左カラムの背面にボックスを作って解決しようとしましたが、別の問題が発生しました。
ブラウザのサイズを狭めてスクロールさせると右カラムが左カラムに隠れてしまいます。
どなたか解決案を頂けませんでしょうか。
お手数おかけ致しますが、何卒ご教授お願い致します。
【HTML】
<body>
<div id="MasterColumn">
<!--<div id="LeftColumu_z1"></div>-->
<div id="LeftColumu_z2">
<ol>
<li>コンテンツ１</li>
<li>コンテンツ２</li>
<li>コンテンツ３</li><!-- サブコンテンツ１ -->
<li>コンテンツ４</li><!-- サブコンテンツ２ -->
</ol>
</div>
<header>
<div id="LeftHeader">
<h1>タイトル</h1>
</div>
<div id="RightHeader">
<ol>
<li>１</li>
<li>２</li>
<li>３</li><!-- サブコンテンツ１ -->
<li>４</li><!-- サブコンテンツ２ -->
</ol>
</div>
</header>
<div id="RightColumu">
<h2>コンテンツ２</h2>
<h3>コンテンツ３</h3>
<h4>コンテンツ４</h4>
</div>
<footer>フッダー</footer>
</div>
</body>
【CSS部分】
body{
background-color: #FFE9E7;
background-image: none;
background-position: top left;
background-attachment: fixed;
font-family: "メイリオ", Meiryo, Verdana, Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif; /* フォントを設定 */
color: #333;
margin: 0;
padding: 0;
line-height: 1.5;
}
#MasterColumn{
width: 1200px;
margin-left: auto;
margin-right: auto;
}
#LeftColumu_z1 {
float:left;
width: 200px;
height: 100%;
background-color: #FFFFFF;
z-index: 1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#LeftColumu_z2{
float:left;
position: fixed;
width: 200px;
height: 100%;
background-color: #2C2B30;
z-index: 2;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
header{
float: left;
width: 1000px;
height: 80px;
line-height: 80px;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#LeftHeader{
float: left;
height: 80px;
width: 700px;
background-color: #FFFFFF;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#RightHeader{
float: left;
width: 300px;
height: 80px;
background-color: #920832;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
header h1{
display: inline;
}
header ol,li{
display: inline;
}
#RightColumu {
float: left;
width: 1000px;
height: 1000px;
border: dashed 1px #999;
margin: 0;
padding-left: 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
footer {
float: left;
width: 1200px;
background-color: #2C2B30;
color: #FFFFFF;
text-align: center;
}
お礼
ご回答ありがとうございます。 おっしゃるとおりです。 ここ2年ほどWEBの仕事がなく、勉強をサボっていたのがいけませんでした。 仕事はなくとも復習は大切だと身に染みてよく分かりました。 URLもありがとうございます。活用させていただきます。