2

複数の背景色と画像を持つサイトのヘッダーを作成しようとしています。左側は黄褐色のグラデーションとロゴ画像で、右側はサンバースト/雲の画像で、下に示すようにティールにフェードします。

ヘッダ

左 (ロゴ) 部分は幅 230 ピクセル、右 (サンバースト) 部分は幅 770 ピクセル、合計 1000 ピクセルとし、これを中央に配置する必要があります。左側の黄褐色のグラデーションはブラウザーの左端まで伸び、ティールは右端まで伸びます。

私はパーセンテージでそれをやろうとしました:

CSS:

#header {
  height: 105px;
  min-width: 1000px;
}
#header .left {
  width: 31%;
  background: url(../images/header_left_gradient.png) bottom left repeat-x;
  height: 105px;
  float: left;
}
#header .left #logo {
  float: right;
  width: 230px;
}
#header .right {
  width: 69%;
  background: url(../images/header-right.png) bottom left no-repeat #009eb0;
  height: 105px;
  float: left;
}

HTML:

  <div id="header">
    <div class="left">
      <div id="logo">
        <img src="./media/images/logo.png" alt="">
      </div>
    </div>
    <div class="right">
      Text
    </div>
  </div>

これはほとんど機能しましたが、幅の広いブラウザーではヘッダーが中央に表示されませんでした。

フィドル

4

3 に答える 3

3

ヘッダーの余白と幅を設定: 

#header {
    height: 105px;
    margin: 0 auto;
    min-width: 1000px;
    width: 100%;
}


#header .left {
    background: none repeat scroll 0 0 #FF00FF;
    float: right;
    height: 105px;
    width: 31%;
}


#header .right {
    background: url("../images/header-right.png") no-repeat scroll 0 0 #009EB0;
    float: left;
    height: 105px;
    width: 69%;
}

これは私のために働いています。

于 2013-02-20T16:40:20.047 に答える
0

私はこれを少しハッキーな方法で解決することになりました。まず、@Raad が提案したようにヘッダーの周りにコンテナーを追加し、次に色を保持するために内部にさらに 2 つの div を追加しました。

<div id="header-wrap">
  <div id="filler-left">
  </div>
  <div id="filler-right">
  </div>
  <div id="header">
    <div class="left">
      <div id="logo">
        <img src="./media/images/logo.png" alt="">
      </div>
    </div>
    <div class="right">
      Text
    </div>
  </div>
</div>

次に、CSS:

#header-wrap {
  width: 100%;
  position: relative;
}
#header-wrap #filler-left {
  left: 0;
  width: 50%;
  position: absolute;
  height: 105px;
  background: url(../images/header_left_gradient.png) bottom left repeat-x;
}
#header-wrap #filler-right {
  left: 50%;
  width: 50%;
  position: absolute;
  height: 105px;
  background: #009eb0;
}
#header {
  height: 105px;
  width: 1000px;
  margin: 0 auto;
  position: relative;
}

.left および .right div を固定幅に設定します。かなりうまくいきました。私の理想的な解決策ではありませんが、うまくいきました。

于 2013-02-20T17:37:07.627 に答える
0

少しハックですが、これでうまくいくはずです：

body {
    text-align: center;
}

#header {
    display: inline-block;
    height: 105px;
    margin-left: auto;
    margin-right: auto;
    min-width: 1000px;
    text-align: left;
}

ラッパー div を使用して本文の代わりに text-align を適用することもできますが、構造を変更したくない場合に備えてこれを投稿しました。

于 2013-02-20T16:57:11.777 に答える