Home/ Questions/Q 9197649
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T22:07:11+00:00

I am relatively new to HTML/CSS and am having an impossible time making two

  • 0

I am relatively new to HTML/CSS and am having an impossible time making two pics line up with an ASP MVC website. The bookend pic we are using for the menu bar cannot line up with the rest of the background pics. Below is a screenshot of the problem, the HTML and the CSS. The bookend pic that is not adjusted correctly is NAV-Left-Corner, and it’s id in the CSS is “#menuLeft.” The rest of the nav bar uses a small blue pic repeated horizontally. That portion of the CSS can be found in the “ul#Menu” section. (I’m having the same problem with the right bookend, just wanted to simplify things for the sake of this post)

Out of line menu pic

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;

    }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I agree with Nile in comment ("dont do it this way").

    Anyway – you can just move anything up or down by adding some padding or margin. You can also use negative padding-top, to move image up, even outside its container.

    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;
}

    Im not sure that is recipe for you, but it may be good tip about positioning items.

    Edit/added later:

    Maybe you should not experiment with CSS in serious app like this. App "for internal use only" dont need fancy effects.

    Read good tutorial about CSS and make some exercises (positioning, gradients, browser support) before you use it in work 🙂

    The New Boston is very good website with most professional free courses and tutorials i ever saw.

    • 0