0

クラス "inline" を持つ div の 2 つの要素を積み重ねる必要があるため、"SECURITIES" を含む要素は "AMS" の下にある必要があります。唯一の問題は
、AMS 要素の下に配置すると、右側の 3 つのメニュー項目も新しい行に配置されることです。

メニュー項目はすべて同じ行にある必要があります。これが私の望む効果を見ることができる私のインスピレーションです。 http://www.infinum.co/

編集 1 現時点での外観は次のとおりです: http://cdpn.io/wlEpA

編集 2 画像参照: https://dl.dropboxusercontent.com/u/63494571/howthis.jpg

メニュー項目の高さを 100% にすると問題が発生します。「メニュー」divの高さを変更してメニュー項目に影響を与え、垂直方向の中央に留まるようにしたいと考えています。

ただし、現時点では、テキストは要素の中央になく、要素の上部は、ページの上部ではなく「SECURITIES」テキストの上部に揃えられています。「A」とラベル付けされた図に示されているようにする必要があります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AMS Securities</title>
<style type="text/css">
body {
    background-color:#222222;
    margin:0px;
    font-family:Calibri;
}
.container {
    width:90%;
    margin:0 auto;
}
.content {
    background-color:#f4f4f4;
    text-align:center;  
}
.inline { display:inline; }

.menu { text-align:center; height:84px; }
.menu_item { color:#bababa; font-size:18px; padding:1.5em; cursor:pointer; }
.menu_item:hover { color:#eb1217; }
.selected { color:#eb1217; border-top:#eb1217 4px solid; }

.title { color:#eb1217; font-size:52px; }
.sub_title { font-weight:bold; color:#f4f4f4; font-size:20px; }

.content {
    padding:3em 0em;    
}
</style>
</head>
<body>
    <div class="container">
        <div class="menu">
            <span class="menu_item selected">HOME</span>
            <span class="menu_item">VENUES</span>
            <span class="menu_item">PHOTOS</span>

            <div class="inline">
                <span class="title">A.M.S</span>
                <span class="sub_title">SECURITIES</span>
            </div>

            <span class="menu_item">ABOUT</span>
            <span class="menu_item">CONTACT</span>
            <span class="menu_item">LOGIN</span>
        </div>
        <div class="content">
            content will go here
        </div>
    </div>
</body>
</html>
4

1 に答える 1

1

クラス.inlineは実際には に設定するdisplay: inline-block必要があり、 に追加する必要がありdisplay: blockます.sub_title。これらの変更を行うと、参照している問題が解決されます。しかし、メニュー全体が上から下に押し下げられていることに気付くでしょう。私もあなたのためにこれを解決し始めましたが、これは本当に基本的なcssのものです、アミーゴ。これを正しく機能させるには、再構築する必要があります。

正しい道を歩むために、次のヒントを提供します。

  • メニュー全体がドロップされるためdisplay: inline(そもそもそうあるべきではありません)、すべてが含まれている要素の下部にドロップされます。ロゴとサブタイトルの高さがレイアウトを壊す原因ですが、短くすることは解決策ではありません。

  • span.menu_itemこれらの をアンカーに置き換えたいと思うでしょう。

  • 専門的に開発されたサイトをチェックし、ブラウザーの開発ツールを使用してメニューを調べて、ナビゲーションのベスト プラクティスを感じてください。私の頭の中では、zurb.com と css-tricks.com が良い例です。また、自分が作成したサイトを強化している CSS をチェックすることは恥ではありません。そうすると、メニュー項目がすべて左に浮いていることに気付くでしょう。

  • まだ行っていない場合は、いくつかの CSS フレームワークを確認してください。Zurb の Foundation と Twitter の (以前の) Bootstrap が最も人気があります。一度にすべてを決めなくても、デザインとコーディングを学習し続けることができ、ベスト プラクティスを採用するための優れたコンテキストが提供されます。

これが更新された CodePen です。お役に立てれば。

于 2013-10-29T06:13:11.633 に答える