How do I put an image on top of an image without using absolute positioning?
Basically, I have some nice navigation button .png's given to me from a friend and a header/banner.jpg. I want to put these .png's on top of the .jpg banner. The problem is that I'm using a css rollover function (for the navigation buttons) that requires me to use position: relative for the divs that contain the individual navigation buttons. Otherwise the rollover function gets hairy in Opera. How would I be able to accomplish this?
Here's some code for the css (for the navigation buttons):
.cssnavabout { background: url(navigation/about_on_over.png) no-repeat; white-space: nowrap; display: block; height: auto; width: auto; float: left; position:absolute; top: 55%; left: 50% }
.cssnavabout a { display: block; color: #000000; width: auto; height: auto; display: block; float: left; color: black; text-decoration: none; }
.cssnavabout img { width: auto; height: auto; display: inline; margin: 0px; border-style:none }
.cssnavabout a:hover img { visibility:hidden }
And the HTML partition (for the navigation buttons):
<div id="csswrapper">
<div class="cssnavabout">
<a href="about.html"><img src="navigation/about_on.png" width=100 height=50 /></a&g开发者_JS百科t;
</div>
Heres the CSS for the header/banner:
#header { width: 1024px; height: 109px; position: relative; margin:0px; background-color:#FFFFFF; }
And the HTML for the banner:
<div id="header">
<img src="images/banner_about.jpg" width="100%" height="109" /> </div>
I'm sure this is easily solvable. Sorry, this is my first website.
How do I put an image on top of an image without using absolute positioning?
Like so...
<div style="background: url(image.png) no-repeat">
<img src="image2.png" alt="" />
</div>
Seems to be a case of z-index: http://www.w3schools.com/Css/pr_pos_z-index.asp
But you can give absolute position to the anchor that contains the png button which should do the trick.
#csswrapper a{
position:absolute;
top:20px; //edit
right:20px; //as needed
}
精彩评论