I used 2 div's with fixed positioning, and after resize - opera doesen't redraw elements.
#wrapper{
position:fixed;
z-index:10000;
height: auto;
background-color: transparent;
margin: 0;
}
#label {
position: fixed;
bottom:0px;
left: 50%;
background-color: transparent;
z-index: 9999999;
height: 40px;
width: 200px;
border: 1px solid red;
margin-left:-100px;
}
<div id="wrapper">
<div id="label">content</div>
</div>
U can see this bug here
http://jsfiddle.net/6Cm6J/1/
Just load page in Opera browser and resize window.
Pls help
Write this css
Live Demo
css
#wrapper{
position:fixed;
z-index:10000;
height: auto;
background-color: transparent;
margin: 0;
bottom:0;
left:0;
right:0;
}
#label {
position: relative;
bottom:0px;
left: 50%;
background-color: transparent;
height: 40px;
width: 200px;
border: 1px solid red;
margin-left:-100px;
}
Related
Here , in the example below ..the parent is FIXED ...the pseudo element lies on top of parent...
HTML
<div class="b"> </div>
CSS
.b
{
height: 100px;
width: 400px;
border: 1px solid #a7a7a7;
top: 100px;
left: 100px;
background: #fff;
position: fixed;
}
.b::after
{
content:'';
position: absolute;
top: -15px;
left: 20px;
height: 30px;
width: 30px;
border:1px solid #a7a7a7;
transform:rotate(45deg);
z-index:-1;
background: red;
}
http://codepen.io/annamalai-saro/pen/wBqzzX
I want it below the parent...??
use this css instead of top:
.b::before
{
content:'';
position: absolute;
bottom: -15px;
left: 20px;
height: 30px;
width: 30px;
border:1px solid #a7a7a7;
transform:rotate(45deg);
z-index:-1;
background: red;}
Not sure how to center this hexagon, setting margin: auto; doesn't effect the whole shape. Grateful if anyone could help, thanks in advance.
.hexagon {
position: absolute;
width: 300px;
height: 173.21px;
background-color: #fff;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
margin-left: auto;
margin-right: auto;
border-left: 150px solid transparent;
border-right: 150px solid transparent;
}
.hexagon:before {
bottom: 100%;
border-bottom: 86.60px solid #fff;
position: absolute;
margin-left: auto;
margin-right: auto;
}
.hexagon:after {
position: absolute;
top: 100%;
width: 0;
border-top: 86.60px solid #fff;
}
margin:auto won't work if you have absolutely positioned divs so to center the hexagon, you have to add top:50%, left:50% and margin: -86.6px 0 0 -150px. The -86.6px is half the height of your hexagon and -150px is the half of the width. Also you have to make its parent position relative with a height of 100%.
HTML
<div class="hexagon"></div>
CSS
html,body{
background-color:#333;
height: 100%;
width: 100%;
position:relative;
}
.hexagon {
top: 50%;
left: 50%;
margin: -86.6px 0 0 -150px ;
}
Fiddle
If you just mean centering horizontally, you could do this: http://codepen.io/pageaffairs/pen/fxoHp
.hexagon {left: 0; right: 0; margin: auto;}
You can put it into another div which has margin:auto. see code here http://jsfiddle.net/oswxj9c5/
html:
<div class="parent">
<article>
<div class="hexagon">
</div>
</article>
</div>
css:
.parent {
position:relative;
background:blue;
width:900px;
height:500px;
margin:auto;
}
article {
margin:auto;
width:300px;
height:300px;
background:transparent;
}
.hexagon {
position: absolute;
width: 300px;
height: 173.21px;
background-color: red;
top:150px;
margin:auto;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
margin-left: auto;
margin-right: auto;
border-left: 150px solid transparent;
border-right: 150px solid transparent;
}
.hexagon:before {
bottom: 100%;
border-bottom: 86.60px solid red;
position: absolute;
margin-left: auto;
margin-right: auto;
}
.hexagon:after {
position: absolute;
top: 100%;
width: 0;
border-top: 86.60px solid red;
}
.box{
opacity: 0.8;
position: absolute;
top: 28px;
left: 45px;
width: 280px;
background: green
}
.box:before{
content: '';
border: 5px solid pink;
margin: 10px;
width: 300px;
}
Tried to make the box with border in the blank gap between box and border. I tried both border in box or :before but the borders are not showing outside the box along with white space.
Appreciate help.
The cleanest way to do it is to use the following CSS:
#box{
position:relative;
z-index:10;
padding:0px;
background:#fff;
border:12px solid #390;
width: 100px;
height: 100px;
}
#box:before {
content:"";
display:block;
position:absolute;
z-index:-1; top:2px;
left:2px;
right:2px;
bottom:2px;
background-color: pink
}
See the DEMO here: http://jsfiddle.net/fvHJq/1/
Depending on your needs, a simple outline might help:
.box {
width: 300px;
height: 300px;
background: #1baaaa;
border: 10px solid #fff;
outline: 5px solid #ff7474;
}
Fiddle
I'm trying to hide the overflow of a circular div. Its child div is hidden from view when outside the container area (good), but remains visible when only outside the radius area (bad)
.outer{
position:relative;
border-radius: 50%;
width: 200px;
height: 200px;
background:#dedede;
overflow: hidden;
}
.inner{
position: absolute;
top:150px;
left:150px;
width: 50px;
height: 50px;
background-color: red;
background:#98de45;
}
Overall I'd like to achieve the effect at http://buildinternet.com/project/mosaic/1.0 but using circles - is there a way to do this?
Fiddle:
http://jsfiddle.net/a9Feu/
Edit: This works fine in Firefox and IE 10, but not Chrome or Safari
Like this?
.outer{
position:static;
border-radius: 50%;
width: 200px;
height: 200px;
background:#dedede;
overflow: hidden;
}
.inner{
position: static;
top:150px;
left:150px;
width: 50px;
height: 50px;
background-color: red;
background:#98de45;
}
I hope this should work
http://jsfiddle.net/a9Feu/35/
.inner{
position: absolute;
**border-bottom-right-radius: 100% 110%;**
top:150px;
left:150px;
width: 38px;
height: 35px;
background-color: red;
background:#98de45;
}
So i have a slideshow, here's the css to start with:
#slideshow {
position:relative;
height:300px;
width: 477px;
border: 1px solid #FFF;
float: left;
margin-bottom: 30px;
margin-left: 20px;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
}
#slideshow IMG.active {
z-index:10;
opacity:1.0;
}
#slideshow IMG.last-active {
z-index:9;
}
And then i have a box, that i want to be on top of the slideshow.. but right now its under the slideshow, even if its position absolute..
#regForm {
position: absolute;
top: 120px;
left: 500px;
background: #000;
color: #FFF;
width: 500px;
height: 240px;
border: 6px solid #18110c;
text-align: center;
margin: 40px;
padding: 1px;
opacity: 0.75;
-moz-opacity: 0.75; /* older Gecko-based browsers */
filter:alpha(opacity=75); /* For IE6&7 */
}
How should i positioning it right so the div box comes on top of the slideshow and not under?
Add z-index:11; to the #regForm style declaration.