1

左サイドバーが 220px に固定され、固定ページが画面の残りの部分を占めるサイトを構築しようとしています。ページ セクションを画像で埋め、その上に情報を表示しようとしています。コードは Chrome と Firefox では問題なく動作しますが、IE では動作しません。

絶対divを使用せずに私が想像するより良い代替案を誰かが提案できますか?

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
    <body>
    <div id="wrap"> 
    <div id="sidebar"> 
        <div class="logo">
        <a id="logo"> <img src="LOGO.png"/></a> 
        </div>
    <ul class="navigation red" id="red">
      <li><a href="#" class="active">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Shop</a></li>
    </ul>
    </div>

    <div id="page" style="padding:0 !important;">
    <img src="images/back.jpg" class="back" alt=""/>

    <div id="center">
        <div class="header">
        <center> <h3 class="page_title">Website Title</h3></center>
        </div>
        <!-- services -->
        <div class="section group">
            <div class="one_half first">
            <div class="column_content">
                <h4> Title</h4>
                <img src="images/2.png"/>
                <p> <small>Text text text text text text text text text text text text text text text text text text . </small></p>
            </div>
        </div>

<div class="one_half first">
            <div class="column_content">
                <h4> Title</h4>
                <img src="images/2.png"/>
                <p> <small>Text text text text text text text text text text text text text text text text text text . </small></p>
            </div>
        </div>

        <div class="one_half first">
            <div class="column_content">
                <h4> Title</h4>
                <img src="images/2.png"/>
                <p> <small>Text text text text text text text text text text text text text text text text text text . </small></p>
            </div>
        </div>
    <div class="one_half first">
            <div class="column_content">
                <h4> Title</h4>
                <img src="images/2.png"/>
                <p> <small>Text text text text text text text text text text text text text text text text text text . </small></p>
            </div>
        </div>

        </div>
</div>
</div>
</div>
</body>
</html>

CSS

body {
    background:#FFF;
    font-size:14px;
    height:100%;
    width: 100%;
}
div#wrap {
    width:100%;
    max-width:100%;
    overflow:hidden;
    margin:0 auto!important
}
div#sidebar {
    width:220px;
    height:100%;
    float:left;
    background: #FFF;
    border-right:1px solid #2e2f2f;
    position:fixed
}
div#page {
    height:100%;
    left:220px;
    right:0px;
    background: #FFF;
    position:absolute;
    padding:2% 5%;
}
div#center{
    margin:0 auto !important;
    width:100%;
    height:auto;
    z-index:1000;
    background:rgba(255,255,255,0.5);
}
.group {
    padding: 0 20px 0 20px !important;  
    position:absolute;
    z-index:10;
    bottom: 20px !important;
    left:0;
    right:0;
    max-width:850px;
    margin:0 auto !important;
    display:inline-table;
}
.header {
    padding:0 20px 0 20px !important; 
    position:absolute;
    z-index:10;
    top: 8% !important;
    left:0;
    right:0;
    max-width:850px;
    margin-left:auto !important;
    margin-right:auto !important;
}
img.back{
    min-height:100%;
    min-width:1024px;
    width:100%;
    height:auto;
}
.one_half {
    font-size: 17px;
    float:left;
    width:50%;
    overflow:hidden;
}

しばらくの間、これについて頭を悩ませようとしてきましたが、何の進展もありませんでした。

ありがとう！

- - 編集 - -

グループとヘッダーの div を中央に配置しようとしていて、IE にはないことを明確にしたとは思わないでください

4

1 に答える 1

0

これがあなたの望むものではない場合、あなたの要件をよりよく説明していただく必要があります. http://jsfiddle.net/HhddF/

.back {
    background-color:#3D6AA2;
    height:100%;
    width:100%;
}
于 2013-04-09T23:37:51.533 に答える