css 左右の背景が異なる設定方法
下記の１ページだけ、右背景が途中で切れてしまう不具合が出てしまいました。
このような感じです。
http://marimekko2525.web.fc2.com/
設定方法は下記のサイトを参考にして作りました。
http://www.webopixel.net/javascript/517.html
スライドショーが入っている”<div id="cont">”部分に原因があると思うのですが、
改善策が分かりません。。。
どなたか分かる方いらっしゃいましたらアドバイスをお願いします。
cssソース
/*====↓reset.css↓====*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,legend,input,p,blockquote,th,td { margin:0;padding:0; }
img{
border: 0;
}
/*====↓base.css↓====*/
#cont {
width: 610px;
height: 100%;
position: relative;
margin: 50px auto;
z-index: 70;
overflow: hidden;
}
#works_deta{
clear:both;
margin-top:100px;
margin-bottom:10px;
padding:20px;
background-color:#333535;
}
#works_deta h4,
#works_deta_right h5{
margin-bottom:10px;
}
#works_deta_left{
float:left;
}
#works_deta_right{
float:right;
width:390px;
}
#works_deta_right p{
color:#ffffff;
font-size: 85%;
line-height:1.8em;
}
hr#works_deta_right{
clear:both;
}
p.works_deta{
color:#ffffff;
font-size: 85%;
line-height:1.8em;
text-align:right;
clear:both;
}
#works_deta_right img.back_to_list{
float: right;
}
/*====↓iview.css↓====*/
/* The slider */
.iviewSlider {
overflow: hidden;
}
/* The timer in the Slider */
#iview-timer {
position: absolute;
z-index: 100;
border-radius: 5px;
cursor: pointer;
}
#iview-timer div {
border-radius: 3px;
}
/* The Preloader in the Slider */
#iview-preloader {
position: absolute;
z-index: 1000;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: #000 1px solid;
padding: 1px;
width: 100px;
height: 3px;
}
#iview-preloader div {
float: left;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
height: 3px;
background: #000;
width: 0px;
}
/* The strips and boxes in the Slider */
.iview-strip {
display:block;
position:absolute;
z-index:5;
}
.iview-block {
display:block;
position:absolute;
z-index:5;
}
/* Direction nav styles (e.g. Next & Prev) */
.iview-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.iview-prevNav {
left:0px;
}
.iview-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.iview-controlNav {
position:absolute;
z-index:9;
}
.iview-controlNav a {
z-index:9;
cursor:pointer;
}
.iview-controlNav a.active {
font-weight:bold;
}
.iview-controlNav .iview-items ul {
list-style: none;
}
.iview-controlNav .iview-items ul li {
display: inline;
position: relative;
}
.iview-controlNav .iview-tooltip {
position: absolute;
}
/* The captions in the Slider */
.iview-caption {
position:absolute;
z-index:4;
overflow: hidden;
cursor: default;
}
/*====↓style.css↓====*/
.container {
display: block;
width: 600px;
margin: 0px auto;
}
#iview {
display: block;
width: 600px;
background: #000;
background: rgba(0, 0, 0, 0.7);
padding: 5px;
border-radius: 5px;
position: relative;
margin: 10px auto;
}
#iview .iviewSlider{
display: block;
width: 600px;
height: 360px;
overflow: hidden;
border-radius: 4px 4px 0px 0px;
}
.iview-controlNav {
position: static;
height: 45px;
text-align: center;
border-radius: 0px 0px 4px 4px;
}
.iview-controlNav .iview-items {
display: block;
padding: 0px 20px;
}
.iview-controlNav a img {
height: 60px;
border: #000 1px solid;
margin: 20px 10px 20px 0px;
border-radius: 2px;
}
.iview-controlNav a.active img {
border-color: #999;
}
#iview-preloader {
border: #666 1px solid;
width: 150px
}
#iview-preloader div {
background: #666;
}
お礼
ご返事ありがとうございます。 解りやすい解説大変助かりました。 まだ確認していませんが、これから勉強を兼ねて一つ一つ動作の確認をしてみたいと思います。