Question

我有一个img元素，我用作导航栏的背景，然后我会在img元素的顶部显示导航链接。您将在下面的图片中看到的问题是，保存链接的ul显示在导航栏右侧。没有超过它。为什么这样做＆amp;如何让我的链接超出img的顶部？

这就是现在的样子：看看白色的文字 This is how it looks http://i56.tinypic.com/jhwor7.png

这就是它的外观 This is how it should look http://img26.imageshack.us/img26/5305/capture2nv.png

我的代码：

<!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"><!-- InstanceBegin template="/Templates/homepage.dwt" codeOutsideHTMLIsLocked="false" -->
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Kamalei - Home Page</title>
        <style type="text/css">
        <!--
            html, body, div, form, fieldset, legend, label, img {  margin: 0;  padding: 0;  }  table {  border-collapse: collapse;  border-spacing: 0; }  th, td {  text-align: left;  }  h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; }  img { border: 0; } 

            body { text-align: center; min-width: 1200px; }

            #backgroundImg  { z-index: -1; position: absolute; left: 0px; top: 0px; }

            #heading        { height: 300px; }
            #main           { margin: 0 auto; }
            #navBar         { display: inline; height: 700px; width: 200px; z-index: 1; position: relative; } /* I am pretty sure the cause is because I use "inline" but I need it to position the navbar correctly to the left */
            #content        { display: inline; height: 700px; width: 800px; padding: 20px; padding-left: 30px; }

            #navBarImg      { position: relative; z-index: 0; padding-right: -5px; margin-right: -5px; } /* Remove gap between navbar & content divs */
            #contentImg     { }

            #navbar ul li   { padding: 0; margin: 0; }
            #navLinks       { color: white; top: 0; left: 0; position: absolute; }
        -->
        </style>

    </head>

    <body>

        <div id="heading"> 
            abc
        </div>

        <div id="main">
            <div id="navBar">
                <!-- Error occurs here: the unordered list is displayed to the right of the nav bar instead
                     of where it should be which is inside the navbar -->
                <ul>
                    <li id="navLinks">abcdef</li>
                </ul>

                <img id="navBarImg" src="images/navBackground.png" alt="" width="200px" height="700px"/>

            </div>

            <div id="content">
                <img id="contentImg" src="images/contentBackground.png" alt="" width="800px" height="700px"/>
            </div>
        </div>


        <!-- Must keep the background image at the bottom of body -->
        <img id="backgroundImg" src="images/background.png" alt="" width="100%" height="1100px"/>

        <script type="text/javascript">
        <!--
            window.onresize = setBackgroundImgWidth;
        -->
        </script>

    </body>

    </html>

Answer 1

您需要将导航栏背景设为div的背景图像，而不是html中的图像。这是在文本下方显示图像的最简洁方法。您可以将css中的高度和宽度设置为div，以确保整个图像也显示出来。

在图像上显示列表：文本位于其右侧

1 个答案: