I have two DIVs stacked on top of eachother and enclosed by a third DIV. Then below the stacked DIVs I have a "red" DIV.
In Chrome, the DIVs show up correctly. In IE6 and IE7, there is a whitespace between the stacked DIVs and the red DIV.
<style>
div.imgbox {
position:relative;
top:0;
left:0;
bottom:0;
right:0;
width:103px;
height:58px;
}
div.imgthumb {
position:relative;
background:#000000;
z-index:3;
width:103px;
height:58px;
}
div.imgplay {
position:relative;
top:-58;
color:red;
z-index:4;
}
div.imgplay a {
width:103px;
height:58px;
display:block;
}
div.imgplay img {
width:25px;
height:25px;
}
</style>
<div class="imgbox">
<div class="imgthumb"></div>
<div class="imgplay"><img src="http://freetvpower.com/attachments/Image/play_up.gif" /></div>
</div>
<div style="width:103px; height:58px; background-color:red;"></div>
Where you have top: -58 in your CSS, you've omitted the 'px' suffix - it should be:
div.imgplay {
position:relative;
top:-58px;
color:red;
z-index:4;
}
The following solution gets rid of the position:relative chaff, to get straight to the wheat:
http://jsfiddle.net/4UEdJ/
(untested in Internet Explorer :$)
You need 'position:relative;' in your last div and to change the position of the top, i.e.
<div style="width:103px; height:58px; top:-58px; background-color:red; position: relative;"></div>
Related
Basically i'm using a background(body) and i need certain elements to be positioned exactly where i want them to be(i used top/left %) (usually images and tables, but in this example i have used simple div elements); after resizing the browser window/ changing the resolution the elements are of course moving accordingly to the new size, hence they change position. I tried using a div parent to solve that, but i failed.
HTML & CSS :
body
{
background:black;
}
#content
{
background:blue;
top:1%;
position:relative;
height:900px;
max-width:1600px;
margin-left:auto;
margin-right:auto;
}
.a
{
position:absolute;
background:yellow;
height:600px;
width:800px;
top:15%;
left:5%;
}
.b
{
background:red;
height:100px;
width:100px;
position:absolute;
top:50%;
left:80%;
}
<div id="content">
<div class="a">
Box1
</div>
<div class="b">
Box2
</div>
</div>
I have changed the values to px rather than %
this would be helpful
the values are not exact, just for depiction
body
{
background:black;
}
#content
{
background:blue;
top:9px;
position:relative;
height:900px;
max-width:1600px;
margin-left:auto;
margin-right:auto;
}
.a
{
position:absolute;
background:yellow;
height:600px;
width:800px;
top:150px;
left:50px;
}
.b
{
background:red;
height:100px;
width:100px;
position:absolute;
top:50px;
left:80px;
}
<div id="content">
<div class="a">
Box1
</div>
<div class="b">
Box2
</div>
</div>
.a, .b{transform:translate(-50%,-50%);}
after adding this css you need to change top and left value according to place where you want to display those div/images.
I made this sorta simple circular loader-thingy, whith two half circles covered with another two half circles that are positioned right on top of them. The covers rotate and reveal the bottom circles to make it look like a circular loading bar.
The problem is that the edge of the bottom circles are visible in some browsers, and there are some mobile browser issues with that as well. Is there a solution for this?
CSS
.wrap{
position:relative;
width:100px;
height:100px;
overflow:hidden;
border-radius:50px;
}
.circle{
position:absolute;
top:0;
width:50px;
height:100px;
background:black;
}
.cover{
position:absolute;
left:0;
width:50px;
height:100px;
background:white;
}
.halfcircleleft{
width:50px;
position:absolute;
top:0;
left:0;
}
.halfcircleleft .circle{
z-index:3;
border-radius:50px 0 0 50px;
}
.halfcircleleft .cover{
z-index:4;
border-radius:50px 0 0 50px;
}
HTML
<div class="wrap">
<div class="halfcircleleft">
<div class="circle"></div>
<div class="cover"></div>
</div>
<div class="halfcircleright">
<div class="circle"></div>
<div class="cover"></div>
</div>
</div>
what about using a circle with transparent background and white border bigger than holeto put it over the border you want to remove?like:
.hole, .hole2{
z-index:99;
position:absolute;
width:86px;
height:86px;
top:7px;
left:7px;
background:lightgrey;
border-radius:50%;
text-align:center;
line-height:86px;
font-family:Arial;
font-size:38px;
padding-right:2px;
}
.hole2 {
background:transparent;
border:4px solid white;
width:106px;
height:106px;
top:-3px;
left:-3px;
}
then just remove the overflow:hiddenof wrapwhich it's not doing anything (at least in your example)
JSFIDDLE
I am trying to make two columns separated by or inside a circle page the second column should have an image it like this :
<div class="step second">
<div id="upload-img"></div>
<div id="sperator">
<div class="circle" id="or"><p class="number" style="padding-left:25%;">or</div>
</div>
<div id="default-img">
<img src=""/>
</div>
</div>
But for some reason the position of the #sperator div is changing with the image my css is bit long so here is a js fiddle for more explaining : here
As you can see the image should be in the same line with the other div but its changing the position of the separator div
You should re-check your html tags. Make sure each tag closed correctly
Here your css :
.step{
position:relative;
width:500px;
height:250px;
border:1px solid black;
}
#upload-img{
position:absolute;
left:0;
top:0;
width:50%;
height:100%
}
#default-img{
position:absolute;
right:0;
top:0;
width:50%;
height:100%
}
#upload-img img, #default-img img{
max-width:100%;
max-height:100%;
}
#sperator .circle{
position:absolute;
height:66px;
width:66px;
background-color:black;
top:50%;
left:50%;
margin:-33px auto auto -33px;
border-radius:50%;
z-index:100;
text-align:center;
}
#sperator .circle p{
font-size:35px;
font-family:futura-book;
color:white;
padding:0 !important;
margin:0;
line-height:60px;
}
.step::after{
content:'';
height:100%;
width:3px;
left:50%;
margin-left:-2px;
z-index:90;
position:absolute;
background-color:black;
}
potition:relative will be an area that will "lock" every potition:absolute inside it.
You can use position:relative as parent div and position:absolute as child div.
Is it possible to design what is shown in image using only html and css?
If yes, how?
If No, what is the alternative?
creating transparent image with 2 colored corners and applying it as background image to div that holds text is in my mind. Is there any better way to do this?
I like to do it using html and css only because then it becomes flexible than using image.
I added the code that i tried. please check. got the desired output. but i would like to know if any improvements can be made ?
<style>
#rules
{
width:200px;
height:100px;
}
#rules .top, #rules .bottom
{
width:200px;
height:10px;
float:left;
}
#rules .top::before
{
content:"";
display:inline-block;
width:40px;
height:10px;
background-color:#000;
}
#rules .left, #rules .right
{
width:200px;
float:left;
height:30px;
}
#rules .left::before
{
content:"";
display:inline-block;
width:10px;
height:30px;
background-color:#000;
}
.center
{
width:200px;
height:20px;
float:left;
text-align:center;
}
#rules .right::after
{
content:"";
display:block;
width:10px;
height:30px;
background-color:#000;
float:right;
}
#rules .bottom::after
{
content:"";
display:inline-block;
width:40px;
height:10px;
background-color:#000;
float:right;
}
</style>
</head>
<body>
<div id="rules">
<div class="top"></div>
<div class="left"></div>
<div class="center">RULES</div>
<div class="right"></div>
<div class="bottom"></div>
</div>
</body>
Personally, I'd achieve this effect using psuedo-elements. Use ::before and ::after for each of the corners, and use their left and top (respectively right and bottom) borders in the colour you want. You can then set their width and height. Be sure to set the "hidden" borders to zero width so that you don't get slanted corners.
If you have a problem implementing this, please feel free to come back with the code you have tried :)
i have set the following css to ger border image of the div container but the problem is that my right image is not coming right on the border but it leaves spaces from the right border side of the div container when it stretches out.
<div id="container">
<div id="left-image"></div>
<div id="main-containts">
<div id="data-containts">
data
</div>
</div>
<div id="right-image"></div>
<div id="bottom">
<div id="bottom-left"></div>
<div id="bottom-center"></div>
<div id="bottom-right"></div>
</div>
</div>
div#container{
position:relative;
margin-left:120px;
margin-right:120px;
float:top;
padding-top:0;
margin-bottom:50px;
width:auto;
height:100%;
}
div#left-image{
position:absolute;
left:0;
width:28px;
height:100%;
float:left;
background:url(border-left.png) repeat-y;
}
div#right-image{
position:absolute;
right:0;
float:right;
width:30px;
height:100%;
margin-right:0;
background:url(border-right.png) repeat-y;
}
div#bottom{
position:absolute;
bottom:0;
width:100%;
height:36px;
z-index:100;
}
div#bottom-left{
width:51px;
height:36px;
background:url(corner-left.png) no-repeat;
float:left;
}
div#bottom-center{
height:36px;
background:url(bottom-image.png) repeat-x;
margin-right:49px;
/*clear:both:*/
}
div#bottom-right{
width:49px;
height:36px;
background:url(corner-right.png) no-repeat;
float:right;
margin-top:-36px;
}
If you are targeting the modern browsers only which supports css3. It could be easily accomplished by the css3 border-image property. Its worth to have a look at the property incase if you are not aware.
http://css-tricks.com/understanding-border-image/
Incase if you want your above code to work.Paste your div structure.