I want the white circle above the inner circle. I can't see why the z-index doesn't work when the wrapper has a position relative and no z-index. I did something similar in a previous challenge on site css battle and it worked.
<div class="wrapper">
</div>
<style>
body{
display:grid;
place-content:center;
background-color:#191919;
}
.wrapper {
position:relative;
width: 100px;
height: 100px;
border-radius:50%;
background: #E08027;
overflow:hidden;
box-shadow: 0 0 0 30px #824B20;
}
.wrapper::before {
content:'';
width: 100px;
height: 50px;
position:absolute;
top:20;
left:-20px;
border-bottom-left-radius: 110px;
border-bottom-right-radius: 110px;
border: 20px solid #FFF58F;
border-top:0px;
z-index:5;
}
</style>
<div class="wrapper">
</div>
<style>
body{
display:grid;
place-content:center;
background-color:#191919;
}
.wrapper {
position:relative;
width: 100px;
height: 100px;
border-radius:50%;
background: #E08027;
box-shadow: 0 0 0 30px #824B20;
}
.wrapper::before {
content:'';
width: 100px;
height: 50px;
position:absolute;
top:20;
left:-20px;
border-bottom-left-radius: 110px;
border-bottom-right-radius: 110px;
border: 20px solid #FFF58F;
border-top:0px;
z-index:5;
}
</style>
I'm not sure if I understood your request but tell me if that helps when you remove the overflow: hidden; (try running the snippet above)
Related
I am having trouble centering the arrow inside the red circle.
How can I center one fixed element inside another fixed element?
JsFiddle: https://jsfiddle.net/sebastian3495/xtj9cga2/4/
Code
html, body {
height: 1000px;
width: 100%;
}
#a {
width: 100%;
height: 100%;
border: 1px solid black;
position:relative;
}
#wrapper {
position: absolute;
top: 50vh;
}
#b {
width: 100px;
height: 100px;
border-radius: 50%;
background: red;
position: fixed;
}
#c {
border: solid black;
border-width: 0 3px 3px 0;
position: fixed;
width: 50px;
height: 50px;
transform: rotate(-45deg);
}
<div id="a">
<div id="wrapper">
<i id="b"></i>
<i id="c"></i>
</div>
</div>
You can simply your code like below then you can easily center your arrow and also adjust the dimension:
.arrow {
background:red;
width:100px;
height:100px;
border-radius:50%;
position:fixed;
top:100px;
left:50px;
}
.arrow::before {
content:"";
position:absolute;
top:50%;
left:50%;
width:50%;
height:50%;
border-top:3px solid;
border-right:3px solid;
/*75% instead of 50% since we need to center half the shape so 50% then 25%*/
transform:translate(-75%,-50%) rotate(45deg);
}
<div class="arrow"></div>
You can still simplify more without pseudo element:
.arrow {
width:100px;
height:100px;
padding:35px 35px 0 0;
border-radius:50%;
position:fixed;
top:100px;
left:50px;
background:
linear-gradient(#000,#000) top right/77% 3px,
linear-gradient(#000,#000) top right/3px 77%,
red;
background-repeat:no-repeat;
background-origin:content-box;
transform:rotate(45deg);
box-sizing:border-box;
}
<div class="arrow"></div>
adjust top and left position for i tag with id="c"
#c {
border: solid black;
border-width: 0 3px 3px 0;
position: fixed;
width: 50px;
height: 50px;
left:3%;
top:60vh;
transform: rotate(-45deg);
}
need help creating the shapes above with the curved rectangular angles...to insert images inside i can do that ...can someone help me out ...please...
I have tried using border-radius to selectively chose the edge i want rectangular
.curv {
width: 800px;
margin: 0 auto;
position: relative;
padding-top: 100px;
overflow: hidden;
}
.curv:before {
background: #333;
height: 200px;
left: -20px;
right: 0px;
top: 0px;
content: '';
position: absolute;
border-radius: 0% 0 0 0;
clip-path: polygon(53% 0, 100% 49%, 57% 100%, 0% 100%, 0 47%, 0% 0%);
}
.holder {
height: 200px;
background: #333;
position: relative;
z-index: 9999;
}
<div class="curv">
<div class="holder"></div>
</div>
I would use some pseudo element and the same background-image twice.
Here is an example (missing only one curve):
body {
background:pink;
}
.box {
margin:100px;
width:200px;
height:100px;
border-right:3px solid green;
border-bottom:3px solid green;
border-radius:0 0 10px 10px;
background:
url(https://lorempixel.com/200/150/) bottom;
position:relative;
}
.box:before {
content:attr(data-text);
color:#000;
font-weight:bold;
text-shadow:0px 0px 5px #fff;
text-align:center;
position:absolute;
height:50px;
top:-53px;
right:-3px;
width:50%;
background:
url(https://lorempixel.com/200/150/) top right;
border:3px solid green;
border-bottom:none;
border-radius:10px 10px 0 0;
}
.box:after {
content:"";
position:absolute;
left:-3px;
width:50%;
bottom:-3px;
height:100px;
border:3px solid green;
border-right:none;
border-radius:10px 0 0 10px;
}
<div class="box" data-text="SOME TEXT">
</div>
Hi I am trying to position 4 blocks two on top and two at the bottom using the relative positioning and div blocks. However, the second block for some reasons are not showing. Need HELP!~
<!DOCTYPE html>
<html>
<head>
<style>
div{text-align:center;}
span{display:block}
#block1{
width: 300px;
height: 200px;
margin: 0px;
padding:0px;
position: relative;
left:0; top:0;
border: 1px solid black;
#block2{
width: 300px;
height: 200px;
margin: 0px;
padding: 0px;
position: relative;
right:0; top:0;
border: 1px solid black;
</style>
</head>
<body>
<div id="block1"> <span> left:0;top:0; </span></div>
<div id="block2"><span> right:0;top:0;</span></div>
</body>
</html>
There was a typo check the answer
css
div{text-align:center;}
span{display:block}
#block1{
width: 300px;
height: 200px;
margin: 0px;
padding:0px;
position: relative;
left:0; top:0;
border: 1px solid black;
}
#block2{
width: 300px;
height: 200px;
margin: 0px;
padding: 0px;
position: relative;
right:0; top:0;
border: 1px solid black;
}
#block3{
width: 300px;
height: 200px;
margin: 0px;
padding:0px;
position: relative;
left:0; top:0;
border: 1px solid black;
float:left;
}
#block4{
width: 300px;
height: 200px;
margin: 0px;
padding: 0px;
position: relative;
right:0; top:0;
border: 1px solid black;
float:left;
}
HTML
<div id="block1"> <span> left:0;top:0; </span></div>
<div id="block2"><span> right:0;top:0;</span></div>
<div id="block3"> <span> left:0;top:0; </span></div>
<div id="block4"><span> right:0;top:0;</span></div>
o/p
here is my how i want the website design to be :
so i am in the initial step, my query is how do i place the slider div upon the header div and i want it to be in the centre. my code what i have used is :
<div id="header">
<div class="slider">
</div>
</div>
<div class="content">
</div>
<div class="footer">
</div>
body {
margin:0px;
padding:0px;
background:#fff;
}
#header
{
background:#859685;
height:300px;
}
.slider
{
margin-left:auto;
margin-right:auto;
margin-top:50px;
position:absolute;
z-index:1;
width:980px;
height:200px;
border: 4px #666 solid;
}
.content
{
margin-left: auto;
margin-right: auto;
margin-bottom:10px;
margin-top:10px;
width:980px;
height:400px;
background:#fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.footer
{
margin-top:10px;
margin-bottom:10px;
padding: 0;
height:300px;
background:#98AFC7;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background:#111312;
}
here is my fiddle jsfiddle.net/hdmep/
Thanx in advance!
Change your slider class to something like this:
.slider
{
margin-left:auto;
margin-right:auto;
left:0;
right:0;
margin-top:250px;
position:absolute;
width:980px;
height:200px;
border: 4px #666 solid;
}
Check out this Working Fiddle
I changed the sizes a little bit (so it'll look nice in the Fiddle)
this is all about absolute positioning.
also if you're just going to use background for color, use background-color instead of background
and, notice the short way of using margin for all sides at once.
CSS:
#header
{
background-color: #859685;
height: 100px;
position: relative; /*the slider is now relative to the header*/
}
.slider
{
position:absolute;
width: 80%; /*80% of header*/
height: 50%; /* 50% of header*/
border: 4px #666 solid;
top: 70%;
left: 10%;
}
.content
{
margin: 10px auto;
height: 100px;
background-color: azure;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.footer
{
margin: 10px 0;
height: 100px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background-color: #111312;
}
try this:
DEMO
update slider class:
.slider {
margin-left: auto;
margin-right: auto;
bottom: -150px;
position: relative;
z-index: 1;
width: 980px;
height: 200px;
border: 4px #666 solid;
}
Demo jsFiddle
I have div color azure I want to fill the width area in the middle column no meter what size will be.
is there any solution with css3/css no jQuery ?
i need it like this picture:
the ststus current like this:
many Thx.
Demo jsFiddle
the code html:
<div id="frame">
<div id="inside_window">
<div id="Yellow"></div>
<div id="Green"></div>
<div id="Blue"></div>
<div id="Red"></div>
<div id="ver"></div>
<div id="hor"></div>
<div id="ver2"></div>
</div>
</div>
the code css:
html, body{
height:100%;
background-color: azure;
}
#frame
{
position: relative;
background-color: black;
height: 100%;
width: 100%;
margin: auto;
padding:0;
border: 1px solid black;
}
#Yellow
{
position: absolute;
height: 100%;
width: 150px;
-webkit-border-radius: 0px;
margin: 0 ;
background-color: Yellow;
z-index:10;
display:table;
left:0px;
top:0;
}
#Green
{
position: absolute;
height: 100%;
width: 150px;
-webkit-border-radius: 0px;
margin: 0 ;
background-color: green;
z-index:10;
right:0px;
top:0;
}
#Blue
{
position: relative;
height:100%;
min-width:65.8%;
-webkit-border-radius: 0px;
margin: 0 auto;
background-color: #62A9FF;
z-index:10;
display:table;
font-size:220%;
left:0px;
top:0px;
}
#Red
{
position: absolute;
height: 150px;
width: 100%;
-webkit-border-radius: 0px;
margin: 0 ;
background-color: red;
z-index:10;
border: 1px solid black;
left:0px;
bottom:0px;
}
#inside_window
{
width:100%;
height:100%;
margin:0 auto;
position: relative;
border: 1px solid black;
background-color: brown;
-webkit-transform: rotate(0deg);
-webkit-transform-origin:50% 50%;
}
#ver
{
position: absolute;
height: 100%;
width: 5px;
margin: 0;
background-color: white;
left:150px;
top:0px;
z-index:1;
}
#hor
{
position: absolute;
height: 5px;
width: 100%;
margin: 0;
background-color: white;
left:0px;
bottom:150px;
z-index:20;
}
#ver2
{
position: absolute;
height: 100%;
width: 5px;
margin: 0;
background-color: white;
right:150px;
top:0px;
z-index:1;
}
Try removing the following CSS from your blue code:
position: relative;
display:table;
There are many ways to acheive a layout like this. Supposing that you could alter the order of your content, you could always try the "Holy Grail" layout method.