Web サイトをクロスブラウザーと解像度に対応させようとしていますが、ウィンドウのサイズを変更すると、何らかの理由で Web サイトの右側に奇妙な空白が表示されます。ネイティブの 1600x900 解像度で全画面表示であれば問題ありません。min-width: 100%
バナー、ナビゲーション タブ、上部の青いバーなどの要素を設定しました。
CSS:
body { background-color:#F5F5F5; font-family:Verdana, Geneva, sans-serif; font-size:14px; margin: 0px auto; border-top: 15px solid #003663; }
.header { padding:0px 10px 0px 10px; height:170px; margin:0 auto; width:1050px; margin-top:0px; }
.container { width: 1025px; margin: 0 auto; }
div.menubar { background: #ccc; width: 100%; min-width: 100%;}
div.banner-image { overflow: hidden; width: 100%; height: 100%; z-index: 1; }
画像バナーの HTML:
<div class="menubar">
<div class="container">
<ul id="topnav">
<?php
Template::Show('core_navigation.tpl');
?>
</ul>
</div>
</div>
<div class="banner-image">
<div class="slicebox-wrapper">
<ul id="sb-slider" class="sb-slider">
<li><img src="<?php echo SITE_URL?>/lib/skins/flyeuro/scripts/slicebox/img/ab1.jpg" alt="image1"/></li>
<li><img src="<?php echo SITE_URL?>/lib/skins/flyeuro/scripts/slicebox/img/ab2.jpg" alt="image2"/></li>
</ul>
</div>
</div>