ヘッドラインをトップ画像に重ねる

独自レイアウトのヘッドライン(タイトル)はトップ画像の右上に配置されています。

他のレイアウトのようにGUIで移動できないので、困る方が多いのではないでしょうか?

 

ヘッドラインを画像に重ねるには、まずHTMLを編集してHeadlineと画像の順番を変えます。

後に書いた方が重ね合わせの手前に来ます。

修正前

    <div id="header">
        <h1>
            Headline
        </h1>
        <img src="header.jpg" alt="" />
    </div>

修正後

    <div id="header">
        <img src="header.jpg" alt="" />
        <h1>
            Headline
        </h1>
    </div>

次にCSSを編集します。

ヘッダ部の左上を基点として、ヘッドラインの位置を決めます。

 

まず、#header に position:relative; を追加します。これによってh1の親ボックスである#headerの左上が基点になります。

次に#header h1 からtext-align:right; を削除して、position:absolute;を追加します。

最後に top, left, width を追加します。

widthはヘッドラインの内容を変えたときに、折り返されてしまう場合を考慮して予め追加しています。

 

※この修正方法だとヘッダ部に書く文字列が全て同じ位置から開始されてしまいます。

  本来はidを付与してid毎にpositionを決めるべきですが、ここでは初期状態から少ない手順で変更することを優先していています。

修正前

 

#header
{
    padding:17px;
}

#header h1,
#header a
{
    padding:0;
    font-family:"Helvetica","Lucida Sans Unicode",Tahoma,Verdana,Arial,Helvetica,sans-serif;
    font-size:30px;
    font-weight:normal;
    text-decoration:none;
    line-height:1.3em;
    color:#666666;
    text-align:right;
}

修正後

#header
{
    padding:17px;
    position:relative;
}

#header h1,
#header a
{
    padding:0;
    font-family:"Helvetica","Lucida Sans Unicode",Tahoma,Verdana,Arial,Helvetica,sans-serif;
    font-size:30px;
    font-weight:normal;
    text-decoration:none;
    line-height:1.3em;
    color:#666666;
    //text-align:right;
    position: absolute;
    top:   100px;
    left:  100px;
    width: 500px;
}
コメント: 0 (ディスカッションは終了しました。)
    まだコメントはありません。