Displaying a list over an image: the text goes to the right of it_问答_开发者

Displaying a list over an image: the text goes to the right of it

开发者 https://www.devze.com 2023-03-10 09:14 出处：网络

相关专题：css javascript

I have an img element that I am using as the background of a navbar, I then will display the navigation links over the top of the img element. My problem as you will see in the images below is that the ul that holds the links get displayed to the right of the nav bar & not over it. Why does it do this & how can I get my links to be over the top of the img?

This is how it looks now: look at the white writting

Displaying a list over an image: the text goes to the right of it

This is how it should look

Displaying a list over an image: the text goes to the right of it

My code:

<!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>

you need to make the navbar background a background image to the div rather than an image that's part of the html. This is the cleanest way to display the image underneath the text. You can set a height and width in the css to the div to ensure the entire image appears as well.