1

私はHTML/CSSに比較的慣れておらず、ASPMVCWebサイトに2枚の写真を並べるのに不可能な時間を過ごしています。メニューバーに使用しているブックエンドの写真は、他の背景の写真と並べることができません。以下は、問題のスクリーンショット、HTMLおよびCSSです。正しく調整されていないブックエンドの写真はNAV-Left-Cornerであり、CSSのIDは「#menuLeft」です。ナビゲーションバーの残りの部分は、水平方向に繰り返される小さな青い写真を使用しています。CSSのその部分は、「ul＃Menu」セクションにあります。（私は正しいブックエンドで同じ問題を抱えています、この投稿のために物事を単純化したかっただけです）

アウトオブラインメニューの写真

HTML

    <body>
    @using Monet.Common


            <div class="page">
                <header>            
                <div style="margin: 20px;">
    @*                <a href="Home" style="color: white; font-size: 36px; font-weight: bold;text-decoration: none;" onclick="DoFun();">Monet </a>*@
                    <span href="Home" style="color: white; font-size: 36px; font-weight: bold;text-decoration: none;" onclick="DoFun();">Monet </span>
                    <span style="color: white; font-size: 18px; ">&nbsp;&nbsp; </span>
                </div>
    @*            </a>*@
    @*            <div id="logindisplay">
                    @Html.Partial("_LogOnPartial")
                </div>*@
                    <nav>                               
                        <ul id="menu">     
                            <img src="../../Content/images/NAV-Left-Corner.gif" id="menuLeft" alt="mLeft"/>
                            <li id="mTop">@Html.MenuLink("Agents", "Index", "Agent")</li>
                            <li class="mProducts">@Html.MenuLink("Products", "Index", "Product")</li>
                            <li class="mPt">@Html.MenuLink("Product Training", "Index", "Course")</li>
                            <li class="mCe">@Html.MenuLink("Continuing Ed", "Index", "ContEdCourse")</li>
                            <li id="mBottom">@Html.MenuLink("Help", "About", "Home")</li>                        
                            <img src="../../Content/images/NAV-Right-Corner.gif" id="menuRight" alt="mRight"/>
                         </ul>                    
                    </nav>
            </header> 
            <img src="../../Content/images/TEST2body_top.png"  id="topPic" alt="tag"/>       
                <section id="main">            
                @RenderBody()
            </section>
            <footer>
                <span style="color: Gray;"> Copyright © 2012 For Internal Use Only. </span>
            </footer>
            </div>
    </body>

CSS

    ul#menu {
        /*border-bottom: 1px #5C87B2 solid;*/
        background-image: url('../../Content/Images/Nav-Background.gif');
        background-position:center;
        background-repeat:repeat-x;
        padding: 0 0 2px;
        position: relative;
        margin: 0;
        text-align: right;
    }

    #menuLeft
    {
        vertical-align:middle;
    }

    #menuRight
    {
        vertical-align:middle;

    }
4

1 に答える 1

0

私はコメントでナイルに同意します（「このようにしないでください」）。

とにかく-パディングやマージンを追加することで、何でも上下に移動できます。ネガティブパディングトップを使用して、コンテナの外でも画像を上に移動することもできます。

ul#menu {
    /*border-bottom: 1px #5C87B2 solid;*/
    background-image: url('../../Content/Images/Nav-Background.gif');
    background-position:center;
    background-repeat:repeat-x;

    /* HERE */
    padding: -5 0 2px; 

    position: relative;
    margin: 0;
    text-align: right;
}

それがあなたのためのレシピかどうかはわかりませんが、アイテムの配置についての良いヒントかもしれません。

後で編集/追加：

たぶん、このような本格的なアプリでCSSを試してはいけません。「内部使用のみ」のアプリは、派手な効果を必要としません。

CSSに関する優れたチュートリアルを読み、仕事で使用する前にいくつかの演習（ポジショニング、グラデーション、ブラウザーのサポート）を行ってください:)

ニューボストンは、私が今まで見た中で最もプロフェッショナルな無料のコースとチュートリアルを備えた非常に優れたWebサイトです。

于 2013-01-20T02:19:49.147 に答える