Displaying a div over the top of an img
I have a relatively simple HTML layout where a div is meant to be displayed over the top of an img.
But what actually happens is that the div gets displayed below the image. Do you know how I can get the div with the id 'main' to be displayed over the top of the img with the id 'mainImg' (but the div also needs to be/remain centred).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<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; }
#mainImg { z-index: -1; }
#main { text-align: center; width: 1000px; height: 700px; top: 0px; }
#navBar { float: left; width: 200px; height: 700px; /*margin-left: 10%; margin-top: 20%; padding: 30px; width: 20%;*/ }
开发者_运维问答#content { float: left; width: 800px; height: 700px; /*margin-right: 10%; margin-top: 20%; padding: 30px; width: 80%;*/ }
-->
</style>
</head>
<body>
<div id="heading">
<img src="images/heading.png" alt="" width="100%" height="300px"/>
</div>
<img id="mainImg" src="images/mainBackground.png" alt="" width="100%" height="100%"/>
<!-- the below div is meant to be displayed over the top of the above image but it actually get display below it -->
<div id="main">
<div id="navBar">
<img src="images/navBackground.png" alt="" width="100%" height="700px"/>
</div>
<div id="content">
<img src="images/contentBackground.png" alt="" width="100%" height="700px"/>
</div>
</div>
</body>
<!-- InstanceEnd -->
</html>
Instead of using an img tag for your site's background I would strongly suggest applying a background image style to a div or your body tag. That way you can keep a floated layout & the contents will appear above the image since your #main div can be nested inside the element with the backgrund image applied.
so for example css would be:
body { background:url('images/mainBackground.png'); }
and just remove the img (#mainImg) tag from your markup
you may also want to do this for your navigation
you must use the css property position: absolute for your div and then tamper with margins of the div to position it properly.
Instead of referencing the image as an inline tag, try setting the CSS background properties of the content div itself. Something like this should do the trick:
#main {
background-image:url('images/mainBackground.png');
background-repeat:no-repeat;
}
try this:
#mainImg {
left: 100px;/*adjust accordingly*/
position: relative;
top: 100px;/*adjust accordingly*/
z-index: 2;
}
z-index is for layering html elements.
加载中,请稍侯......
精彩评论