How to make this type of image popping out of box using XHTML css. without using whole box along with image as a background
Only globe image will be image.
+2
A:
The globe needs to be a transparent png, and then style the box ignoring the image, padding and a border to get the desired look. Then, whack position: relative on the box, and position: absolute on the image inside it. Then use top: Xpx; left: Xpx; to position the image as you like.
Edit: I've taken the code from the siulamvictor below, and edited it so it'll work for you.
<html>
<head>
<style type="text/css">
.box {
position: relative;
width: 260px;
border: #000 1px solid;
background: #d5d5d5;
padding: 20px;
}
.box img {
display: block;
position: absolute;
z-index: 2;
top: 5px;
right: 5px;
}
</style>
</head>
<body>
<div class="box">
Text here.
<img src="image.png" />
</div>
</body>
</html>
Change the top and right properties to positon the image as you need it.
thebluefox
2010-05-05 08:41:05
@thebluefox - thanks it's wotking but a problem here if text is long then it goes behind the image
metal-gear-solid
2010-05-05 10:00:14
Put the text into a p tag, then give the p tag a width and display block, it'll wrap down onto multiple lines then. Alternatively you'll have to make the box wider.Bare in mind that when the number of lines of text increases, your image will move depending on which sides you've positioned it from.
thebluefox
2010-05-05 10:21:35
A:
try this :)
<html>
<head>
<style type="text/css">
.box {
position: relative;
width: 300px;
border-color: black;
border-width: 1px;
border-style: solid;
background-color: #d5d5d5;
height: 60px;
padding-top: 20px;
padding-left: 20px;
}
.image {
display: block;
position: absolute;
z-index: 2;
right: 20px;
}
</style>
</head>
<body>
<div class="box">
Text here.
<img src="image.png" class="image" />
</div>
</body>
</html>
siulamvictor
2010-05-05 08:43:29
You need the position absolute on the image, and position relative on the box, you have them the wrong way round. Also, use padding to gain a height, instead of the height property.
thebluefox
2010-05-05 09:17:04
ooo yes.... sorry for the mistake. this should be something similar to what you want, metal-gear-solid. :)
siulamvictor
2010-05-05 09:28:19
A:
<div class="globe-box">Some text<div class="globe"></div></div>
.globe-box {
position: relative;
border: 1px solid black;
padding-right: 110px; /* width of globe + some padding */
margin-bottom: 20px; /* how much globe should stick out of the bottom */
}
.globe-box .globe {
width: 100px; height: 100px; /* size of globe */
background-image: url(globe.png);
position: absolute;
bottom: -20px; /* same as margin-bottom above only negative */
right: 10px;
}
RoToRa
2010-05-05 08:44:02