Home/ Questions/Q 5994583
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T23:50:18+00:00

I have an img element that I am using as the background of a

  • 0

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
This is how it looks

This is how it should look
This is how it should look

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0