css - CSSヘッダーのスタイル

Question

添付画像のようにヘッダーのスタイルを設定する方法を考えています。左はテキスト用、右は水平方向の繰り返し画像用の2つのdivを使用することを考えていました。問題は、ヘッダーの長さを変えるために正しいdivの幅を変更する必要があることです。

どんな助けでもいただければ幸いです！

ヘッダー画像

Answer 1

右のdivにロードされたコンテンツが右に残り、コンテンツのサイズに応じて左に増加するように、DIVsそれぞれのプロパティで左と右を使用widthし、次にright divuseプロパティを使用しますtext-align: right;

<div class="header">
  <div class="left"></div>
  <div class="right"></div>
</div>

.header{overflow: hidden;} //Considering width: 1000px;
.left{float: left; width: 100px;}
.right{float: right; width: 900px; text-align: right;}

Answer 2

あなたはそれを簡単に行うことができます。

.header{
    width:100%;
    height:20px;
    background:url('http://jsfiddle.net/favicon.png') repeat;
}
.header span{
    background-color:#FFF;
    display:inline-block;
    height: 20px;
}

<div class="header"><span class="title">Header Text</span></div>

これをさまざまなページに含めることができ、それに応じてタイトルスペースのサイズを変更します。

これが実際のライブデモです

Answer 3

<h1>セマンティックな理由でタグだけでそれを行い、それに背景画像を追加することができます。パディングライトを使用すると、それが繰り返されて必要なスペースを埋める回数を制御できるようになります。