さまざまなコンテナの幅を持つ画像の上にテキストを浮かべるより良い方法

サイトを再設計していて、さまざまなセクション（ヘッダー、バナー画像、メインなど）は背景全体が伸びていますコンテンツは一定の幅に含まれ、そのボックスは中央に配置されます。さまざまなコンテナの幅を持つ画像の上にテキストを浮かべるより良い方法

しかし、デザインでは、 "バナーイメージ"（ヘッダーの下のメインコンテンツの上にあるイメージです）は、残りのコンテンツの幅を超えて広がります。最初は、バナー画像の上にテキストを置く必要が生じ、そのテキストを残りのテキストと整列させる必要があるまで、これは簡単でした。

一部のページで、バナー画像領域がタグを必要とするスライダーになるため、CSS背景画像を使用できません。

私は実用的なソリューションを持っているが、それは不格好ようだと、私はより良い方法を見つけることを期待していた：http://jsfiddle.net/PkStg/10/

HTML：

<div class="header"> 
    <div class="content-wrapper"> 
     header text 
    </div> 
</div> 
<div class="banner"> 
    <div class="content-wrapper"> 
     <div class="banner-text-outer"> 
      <div class="banner-text-inner"> 
       <h2>banner text header</h2> 
       <p>banner text paragraph</p> 
      </div> 
     </div> 
    </div> 
    <div class="banner-image-wrapper"> 
     <img src="http://www.brokenbowlakeguide.com/rainbow-trout-1.jpg" /> 
    </div> 
</div> 
<div class="main-content"> 
    <div class="content-wrapper"> 
     main content text 
    </div> 
</div>

はCSS：

.header, .banner, .main-content { width: 100%; } 
.header { background: red;} 
.banner { background: green; } 
.main-content { background: yellow; } 
.content-wrapper { 
    margin: 0 auto; 
    max-width: 300px; 
} 

.banner-text-outer { 
    position: relative; 
} 
.banner-text-inner { 
    position: absolute; 
    top: 10px; 
} 

.banner-image-wrapper { 
    margin: 0 auto; 
    max-width: 400px; 
    min-width: 300px; 
    font-size: 0; 
} 
.banner-image-wrapper img { 
    width: 100%; 
}

出典

2013-06-27 gregtheross

はあなたにいくつかの答えを取得します –

私は2番目の '.bannerを想定します-text-outer'は '.ba nner-text-inner'？ – Justin

私は '.banner-text-outer'と' .banner-text-inner'には使用しません。 '.banner-text-outer'を削除し、パディングを使用して' h2'と 'p'タグ内のテキストを整列させることができます。それ以外はコードがきれいに見えると思います。 –

私が知っていますあなたがバックグラウンドイメージを使用しないことを望んでいたが、ここにページを見る他の人にそれを使用する解決策がある。

スライダーが背景画像を使用する可能性がありますか？

これはそれを行う必要があります。あなたの質問を短縮 jsFiddle

HTML

<body> 
    <div class="header"> 
     <div class="content-wrapper"> 
      header text 
     </div> 
    </div> 
    <div class="banner"> 
     <div class="content-wrapper"> 
      <div class="banner-text-outer"> 
       <div class="banner-text-inner"> 
        <h2>banner text header</h2> 
        <p>banner text paragraph</p> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="main-content"> 
     <div class="content-wrapper"> 
      main content text 
     </div> 
    </div> 
</body>

CSS

.header, .banner, .main-content { width: 100%; } 

.header { background: red;} 
.banner { background: green; } 
.main-content { background: yellow; } 
.content-wrapper { 
    margin: 0 auto; 
    max-width: 300px; 
} 

.banner { 
    background: green url("http://www.brokenbowlakeguide.com/rainbow-trout-1.jpg") no-repeat; 
    background-size: contain; 
    background-position: center; 
    min-height: 150px; 
}

出典

2013-06-27 16:23:24 screenmutt

ありがとう、それは完全にテーブルからではありません、私はちょうど幅広く検索し、現在使用しているスライダーに多くのカスタマイズを入れます。詳細で実用的な解決策のためにあなたにアップアップを与えて、そのアイデアを再訪するかもしれません。あなたのコードでは、タグはもう存在しないので、あなたのソリューションにはbanner-text-outerとbanner-text-innerは不要ですか？ – gregtheross

私はあなたが他のスタイルのためにそれらを使用していると仮定しました。 – screenmutt

あなたの答えは遅れて受け入れられましたが、結局私は分解して背景画像の交換を使用しました=） – gregtheross

さまざまなコンテナの幅を持つ画像の上にテキストを浮かべるより良い方法

答えて

関連する問題