ヘッダー部の説明文とタイトルロゴの間に余白を取るには?

名称未設定-1

デザイン上、ヘッダ部の説明文とロゴの間に余白を取りたいことがある。
下記のようにコーディングすればいいように思えるが、実際にはうまくいかない。
(ロゴの部分が、右側に回り込んでしまう。)

※コーディングは、ロゴ周りに限定。
<div id="header">
    <h1>ECサイト撮影、結婚式撮影、ホームページ(HP)作成<h1>
    <a href="index.html"><img src="aaa.png" width="xx" height="xx" alt="aa"></a>
</div>

上記のようなコーディングをしたいときは、CSSのdisplay:inline-block;を
使用するとよい。以下はコーディング例である。

[html]
-------------------------------------------------------------------
        <div id="com_header_logo">
            <h1>ECサイト写真撮影、結婚式撮影、ホームページ(HP)作成</h1>
            <p id="com_header_img">
                <a href="index.html"><img src="images/jpg/tit_title.jpg" width="419" height="38" alt="Photo Office Enomoto タイトル" /></a>
            </p>
        </div>
-------------------------------------------------------------------
[css]
#com_header {
    padding: 0px 30px 15px 30px;
}

/* タイトル ロゴ*/
#com_header #com_header_logo {
    float:left;
    width:418px;
    display:inline-block;
}

/* タイトル  キーワード */
#com_header #com_header_logo h1 {
    padding: 10px 0px 15px 0px;
    float:left;
    color:#999999;
    font-size:10px;
    font-weight:normal;
}

/* タイトル */
#com_header #com_header_logo p#com_header_img {
    display:inline;
    float:left;
}
タイトルロゴ(/* タイトル ロゴ*)/の横幅とfloat:leftを指定するのがポイントである。
これを指定しないと、タイトルが意図通りに表示されない。

スポンサーサイト

コメントの投稿

非公開コメント

プロフィール

e.swan

Author:e.swan
FC2ブログへようこそ!

最新記事
最新コメント
最新トラックバック
月別アーカイブ
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QR