;

しんみゆ.com

群馬県高崎市在住の夫婦で日記というか、つぶやきブログしてます:しんみゆ.com

メモ:z-indexと縦幅可変調整

だいぶ悩んだのでメモします。

◆サンプル◆
zindexなどのサンプル

————————————————-

【css】
.zheader_box {
background: url(img/headerimg.jpg) no-repeat right;
height: 100px;
width: 950px;
margin-right: auto;
margin-left: auto;
}
.zboxArea {
overflow: hidden;
}
div#zside_box {
float: left;
padding-bottom: 32768px;
margin-bottom: -32768px;
}
div#zcontents {
float: right;
width: 680px;
padding-bottom: 32768px;
margin-bottom: -32768px;
}
div.zside {
position: relative;
z-index: 5;
float: left;
width: 248px;
background: #FFF;
margin-right: 20px;
-webkit-box-shadow: 3px 0px 3px #999;
-moz-box-shadow: 3px 0px 3px #999;
box-shadow: 3px 0px 3px #999;
border-right: 1px solid #CCC;
border-left: 1px solid #CCC;
top: -390px;
}
.z_index {
z-index: 1;
background: url(img/bg_zindex_mi.jpg) repeat-x;
width: 100%;
border-top: 5px solid #F66;
}
.zimg_box {
text-align: right;
}

.zwidth_950 {
width: 950px;
margin-right: auto;
margin-left: auto;
}
div.zcontents {
float: right;
width: 680px;
}
.zfooter_box {
position: relative;
clear: both;
background: #FFDBE4;
padding-top: 15px;
padding-bottom: 50px;
width: 100%;
z-index: 10;
}

【html】
<div class="zboxArea">
<div class="zheader_box"></div><!– /header_box –>
<div class="z_index">
<div class="zwidth_950 zimg_box">
<img src="img/zindex_img.jpg" width="680" height="285" alt="イメージ" />
</div>
</div>
<div class="zwidth_950">
<div id="zside_box" class="zside">
<p>会社名</p>
<p>電話</p>
<ul>
<li>ホーム</li>
<li>人材システム</li>
<li>アウトソーシング</li>
<li>会社概要</li>
<li>総務部</li>
<li>人材紹介</li>
<li>Q&amp;A</li>
<li>お知らせ</li>
<li>お問合わせ</li>
</ul>
</div>
<div class="zcontents">
<p>最新のお知らせ</p>
<p>ページトップへ</p>
<p>ごあいさつ</p>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</div>
</div>
<div class="zfooter_box">
<p>フッターです。</p>
</div>

%d人のブロガーが「いいね」をつけました。

ページトップ