0

タグを使用してさまざまな要素 (ヘッダー/バナーとメニュー) を分離する Web ページをセットアップしようとしています。後でコンテンツが追加されますが、今のところ十分な問題があります。

私のdivは次のように配置されています：

<!-- Header showing banner and sitename -->
<div class="header">
    pagetitle
</div>

<!-- Small space for the menu -->
<div class="menu">
    <a class="menuItem" href="google.com">Google is here!</a>
    <a class="menuItem" href="somewhere.com">Work work</a>
</div>

それらを正しく配置するために、CSSスタイルシートを使用します（私はCSSが初めてで、これが私の問題だと思います...）

/* Holds the style information for the header/banner */
div.header{
    /* Size of div/header */
    width:900px;
    height:200px;

    /* Header image, main content actually */
    background-image:url('../img/header.png');


    /* Font look */
    font-family:"Lucida Console","Curier New",Monospace;
    font-size:75px;
    color:#CCCCCC;
    text-align:right;

    /* Used for putting text in buttom right corner.
     * -->NOT<-- supported in IE8 and earlier.
     */
    display:table-cell;
    vertical-align:bottom;
}

/* Holds the style information for the menu */
div.menu{
    /* Size of div/menu */
    width:900px;
    height:50px;

    /* Background for the menu */
    background-image:url('../img/menu.png');

    /* Positioning of items */
    text-align:center;
    vertical-align:middle;
    /* FIXME: Causes the menu to jump up next to the header!
     * NOT VERY GOOD BEHAVIOUR!
     */
    display:table-cell;
}

これで、「display:table-cell」と「vertical-align」部分を使用して、テキストを垂直方向に正しく配置できます。そして正常に動作し、テキストはdivに正しく配置されますが、複数存在する場合、それらは隣同士にジャンプします。これはすべきではありません。

私の考えでは、非常に汚い解決策が2つ見つかりました。でdivを区切る

<p></p>

また

</br>

しかし、私は本当にそれが方法だとは思わない... CSSシートでこれを解決する良い方法はありますか?

私の問題の「ライブ デモ」については、次の URL にアクセスしてください。ヘッダーは、実際のレンダリング中のプレースホルダーです。あなたが私を助けてくれることを願っています。

4

1 に答える 1

1

それを取り除くdisplay: table-cell。代わりにline-height、テキストを垂直方向に配置margin: 0 auto;し、div をページの中央に配置するために使用します。

div.header {
    background-image: url("../img/header.png");
    color: #CCCCCC;
    font-family: "Lucida Console","Curier New",Monospace;
    font-size: 75px;
    height: 200px;
    line-height: 350px;
    margin: 0 auto;
    text-align: right;
    width: 900px;
}

div.menu {
    background-image: url("../img/menu.png");
    height: 50px;
    line-height: 50px;
    margin: 0 auto;
    text-align: center;
    vertical-align: middle;
    width: 900px;
}
于 2012-10-26T22:51:20.353 に答える