Having smaller images appear over a larger image
I am trying to have 2 small shapes appear over one larger image; one at the top left & the other at the bottom right. So the picture should look like the below one:
http://i52.tinypic.com/j5cqw9.png
My problem is that my HTML & CSS is not making the smaller images lie over the top of the larger image & the smaller images are not placed in the correct position.
What am I doing wrong? PS: is CSS vertical-align cross-browser
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
<!--
body { background-color: gray; }
.col1 { width: 30%; float: left; background-color: blue; }
.col2 { width: 70%; float: left; }
#pastEvents { background-color: red; }
#pastEvents td { padding: 20px; background-color: blue; }
.pastEventDiv { position: relative; background-color: yellow; }
.eventBorderNorth { position: absolute; left: 0px; top: 0px; z-index: 10; }
.eventBorderSouth { float: right; vertical-align: bottom; z-index: 10; /*text-align: right;*/ }
.eventPic { position: absolute; left: 0px; top: 0px; z-index: 0; }
-->
</style>
</head>
<body>
<div class="col1">
abvdvf
</div>
<div class="col2">
<table id="pastEvents">
<tr>
<td>
<div class="pastEventDiv">
<img class="eventBorderNorth" src="images/picBorderNorth.png" width="30" height="30" alt=""/>
<img class="eventBorderSouth" src="images/picBorderSouth.png" width="30" height="30" alt=""/>
<img class="eventPic" src="images/1.jpg" width="100" height="200" alt=""/>
</div>
开发者_高级运维 </td>
<td>
</td>
</tr>
</table>
</div>
</body>
</html>
Why do you float .eventBorderSouth? It should be:
.eventBorderSouth { position: absolute; right: 0; bottom: 0; z-index: 10;}
So just like the left-top image, but then in the other corner.
You need to do a couple small things to make this work. First, get rid of the float and vertical-align on .eventBorderSouth, then add the positioning that GolezTrol suggests:
.eventBorderSouth {
position: absolute;
right: 0;
bottom: 0;
z-index: 10;
}
Now you'll see that .eventBorderSouth is to the upper-left of the .eventBorderNorth. Why is this? Well, your .pastEvent <div> contains only absolutely positioned elements so it has a width and height of zero; the obvious solution is to tell the <div> how big it should be:
.pastEventDiv {
position: relative;
background-color: yellow;
width: 100px;
height: 200px;
}
Live example (with broken images of course): http://jsfiddle.net/ambiguous/MBGVX/
加载中,请稍侯......
精彩评论