Displaying a list over an image: the text goes to the right of it
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 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>
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.
加载中,请稍侯......
精彩评论