I want to place a small circular login image on the border of div such that half image will be outside the border line just for style purpose?I think I have to set z-index but how OR is there any better way?
views:
47answers:
3
+2
A:
Thats exactly what you need to do.
Give you img a class name. Then in your style sheet add something like this
#classname
{
position: absolute;
z-index: 10;
top: #distance from top of page#
left: #distance from left of page#
}
z-index needs to be a number greater than your div which will have an index of 0 if you haven't changed it.
Hope this helps.
Ash Burlaczenko
2010-08-01 12:24:18
+1
A:
.overout {
text-decoration:none;
position: relative;
z-index: 10;
top: 105px;
right: -25px;
}
nectar
2010-08-01 12:38:01
A:
You can do this very easily using divs. Consider the following code
<html>
<head><title>Logo test</title></head>
<body>
<div style="position: relative; width: 400px; height: 100px; margin: 0px auto 0px auto; top: 50px; background-color: #f00;">
<div style="position: relative; height: 100px; width: 100px; background-color: blue; left: 20px; top: -50px;">
</div>
</div>
</body>
</html>
All you have to do is replace the second divs "background-color" property with the "background-image" property and nest that div inside your existing div. Make sure you make the div the exact size of your logo and set background-repeat: no-repeat;
Hope that helps. Test the example code I posted. You can place all the style information into a css class like this:
.logo
{
background-image: url(yourlogo.png);
background-repeat: no-repeat;
width: /* width of logo */
height: /* height of logo */
top: /* distance from top */
left: /* distance from left */
}
Aelux
2010-08-01 12:46:13
Generally you want to stay away from absolute positioning, as this will interrupt the flow of a page if your page mainly consists of relative objects. I've found that the z-index is really only useful on absolute positioned objects, otherwise you can use nested divs for the same effect.
Aelux
2010-08-01 12:53:19