I'm working through the cssbattle.dev challenges to improve with CSS, and I'm stuck really close to the result on the 9 one. Can someone help me out?
The Target
My Code:
body {
background:#222730;
margin:0px;
width: 400px;
height: 300px;
}
.banner{
background: #4CAAB3;
width: 100%;
height: 150px;
margin-top: 75px;
}
.center-box{
position:relative;
top: -50px;
margin-left: 75px;
width: 150px;
height: 150px;
border: solid 50px #222730;
transform: rotate(45deg);
}
.dot{
position: absolute;
background: #393E46;
width: 50px;
height: 50px;
border-radius: 100%;
top: 125px;
left: 175px;
}
<body>
<div class="banner">
<div class="center-box"></div>
</div>
<div class="dot"></div>
</body>
try
.center-box{
position:relative;
top: -50px;
margin-left: 75px;
width: 150px;
height: 150px;
border: solid 50px #222730;
transform: rotate(45deg);
background: inherit ;
}
Related
I am trying to create a sort of circle and trying to embed a inner circle but the inner circle is not positioning as required in the image.
.outer-circle {
width: 200px;
height: 200px;
background-color: coral;
border-radius: 50% 50% 0 0;
transform: rotate(90deg);
}
.inner-circle {
width: 100px;
height: 100px;
margin-left: 10px;
margin-top: 10px;
background-color: blue;
border-radius: 50%;
}
<div class="outer-circle">
<div class="inner-circle"></div>
</div>
How can I position my inner circle as required without writing any Javascript.
Following works:
.outer-circle {
width: 200px;
height: 200px;
background-color: coral;
border-radius: 50% 50% 0 0;
transform: rotate(90deg);
padding-top: 15px;
}
.inner-circle {
width: 160px;
height: 160px;
margin-left: 20px;
margin-top: 10px;
background-color: blue;
border-radius: 50%;
}
<div class="outer-circle">
<div class="inner-circle"></div>
</div>
One of the solutions would be to use absolute positioning:
.outer-circle {
width: 200px;
height: 200px;
background-color: coral;
border-radius: 50% 50% 0 0;
transform: rotate(90deg);
position: relative;
}
.inner-circle {
width: 100px;
height: 100px;
background-color: blue;
border-radius: 50%;
position: absolute;
top: 50%;
right: 50%;
transform: translate(50%, -50%);
}
<div class="outer-circle">
<div class="inner-circle"></div>
</div>
.outer-circle {
width: 100px;
height: 100px;
background-color: coral;
border-radius: 50% 50% 0 0;
transform: rotate(90deg);
padding: 10px;
}
.inner-circle {
width: 100px;
height: 100px;
background-color: blue;
border-radius: 50%;
}
<div class="outer-circle">
<div class="inner-circle"></div>
</div>
I've removed the margin and added a padding to the .outer-circle. That's gotta be the easiest way for now. Basically you make height the same on both circles, adding the padding to the outer-circle creates the gap between the two, the bigger the larger it will get.
Additional info:
margin(https://developer.mozilla.org/en-US/docs/Web/CSS/margin)
position(https://developer.mozilla.org/en-US/docs/Web/CSS/position)
.outer-circle {
width: 200px;
height: 200px;
background-color: coral;
border-radius: 50% 50% 0 0;
transform: rotate(90deg);
}
.inner-circle {
position:absolute;
width: 100px;
height: 100px;
margin: 50px;
background-color: blue;
border-radius: 50%;
}
<div class="outer-circle">
<div class="inner-circle"></div>
</div>
Use transform:translate
.outer-circle {
width: 200px;
height: 200px;
background-color: coral;
border-radius: 50% 50% 0 0;
transform: rotate(90deg);
}
.inner-circle {
width: 100px;
height: 100px;
margin-left: 50px;
margin-top: 50px;
background-color: blue;
border-radius: 50%;
transform: translate(0px,50px);
}
<div class="outer-circle">
<div class="inner-circle"></div>
</div>
Hi there, I want to crop the image within a div that is divided into two parts in a circle. One side is half cropped pic and the other side is just background color with the name on it. I am currently using following code :
width: 220px;
userdp {
height: 220px;
border: 4px solid red;
border-radius: 50%;
position: relative;
object-fit: none;
}
If your image is inside the div element that you're applying that styling to as below you should just need to add overflow: hidden to the CSS.
<div class="userdp">
<img src="..." />
</div>
And the styling.
.userdp {
height: 220px;
width: 220px;
border-radius: 50%;
overflow: hidden;
}
I've created an example here for you:
https://jsfiddle.net/20g4uL0j/1/
You can use the following,
**HTML**
<div class="circle">
<div class="image">
<img src="your-image.png" />
</div>
<div class="color">Text</div>
**CSS**
.circle{
width: 220px;
height:220px;
border-radius: 50%;
overflow:hidden;
}
.image, .color{
width:50%;
float:left;
height:100%;
}
.color{
background-color: #099;
}
You can do this as follow:
https://jsfiddle.net/ivan0013/f1a06cxe/
div {
background: #9e978e;
display: inline-block;
margin: 0 1em 1em 0;
}
.top,
.bottom {
height: 55px;
width: 110px;
}
.right,
.left {
height: 110px;
width: 55px;
}
.top {
border-top-left-radius: 110px;
border-top-right-radius: 110px;
}
.right {
border-bottom-right-radius: 110px;
border-top-right-radius: 110px;
}
.bottom {
border-bottom-left-radius: 110px;
border-bottom-right-radius: 110px;
}
.left {
border-bottom-left-radius: 110px;
border-top-left-radius: 110px;
}
<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="left"></div>
overflow: hidden and a little more play with the positioning, z-index, and object-fit may help you achieve that.
Here is an example for you (EDITED after re-reading your question):
.userdp {
height: 220px;
width: 220px;
border: 4px solid black;
border-radius: 50%;
position: relative;
overflow: hidden;
}
.userdp-img {
z-index: 1000;
width: 100%;
height: 100%;
object-fit: cover;
}
.userdp-info {
z-index: 2000;
width: 50%;
height: 100%;
color: #ddd;
background-color: red;
border-right: 3px solid black;
}
.userdp-info-inner {
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.userdp-img,
.userdp-info {
position: absolute;
top: 0;
left: 0;
}
<div class="userdp">
<div class="userdp-info">
<div class="userdp-info-inner">
John Doe
</div>
</div>
<img src="https://unsplash.it/300/300?image=1005" class="userdp-img">
</div>
Hope it helped.
I have 2 DIVs, that I want to center and overlap. The smaller one is to lay on top of the bigger one.
It works great at full-screen, but if I decrease the browser size, the top/smaller one moves to the left.
<div style="position: relative; top: 160px; border: thin solid gray; border-radius: 10px; width: 300px; height: 64px; margin-left: auto; margin-right: auto; z-index: 1; background: url(...); background-repeat:no-repeat; background-position:top; background-color: #4b2f84"> </div>
<div style="position: absolute; top: 200px; left: 15%; width: 70%; background: white; border: thin solid gray; border-radius: 10px; height: 500px; padding: 50px 30px; margin: auto">something
</div>
I like to use left: 50%; combined with transform: translateX(-50%); when trying to center and overlap content.
The content is offset 50% to the left, and then -50% of its width to the left.. or (this.left == parent.x + parent.width* 0.5 - this.width*0.5)
#div1 {
position: relative;
top: 160px;
border: thin solid gray;
border-radius: 10px;
width: 300px;
height: 64px;
margin-left: auto;
margin-right: auto;
z-index: 1;
background: url(...);
background-repeat: no-repeat;
background-position: top;
background-color: #4b2f84
}
#div2 {
position: absolute;
top: 200px;
left: 50%;
transform: translateX(-50%);
width: 70%;
background: white;
border: thin solid gray;
border-radius: 10px;
height: 500px;
padding: 50px 30px;
margin: auto
}
<div id="div1"> </div>
<div id="div2">something</div>
I want to make this exapmle in css3 and html5 in div.
thanx for all!
Actually I should not be answering this. SO is for helping you when you are stuck with your code, not for having others write the code for you. But hey, it is Easter, and since it is so easy...
div {
background: black;
width: 250px;
height: 250px;
border-radius: 50%;
margin-left: 150px;
position: relative;
}
div:before {
content: '';
position: absolute;
left: -150px;
top: 50px;
bottom: 50px;
right: -75px;
background: red;
border-top-left-radius: 40px 75px;
border-bottom-left-radius: 40px 75px;
z-index: -1;
}
and a demo: http://jsfiddle.net/o004hrqz/
Let me know if you want me to explain anything.
<html>
<head>
<style type="text/css">
.div1 {
width: 250px;
height: 60px;
margin-top: 50px;
background-color: #F00;
position: relative;
border-top-left-radius: 40px 75px;
border-bottom-left-radius: 40px 75px;
}
.div2 {
width: 100px;
height: 100px;
background-color: #000;
border-radius: 50%;
position: absolute;
left: 40px;
top: -20px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
</div>
</div>
</body>
</html>
div #introbox is not centering. I have used container as relative and introbox as absolute. I have set top,bottom,left and right as 0. Still box is not centring. I want to centre the introbox in the intropic.
html,body{
padding: 0;
margin:0;
}
.container{
width: 960px;
margin:0 auto;
position: relative;
}
#header{
width: 100%;
height: 120px;
border-bottom: 1px solid black;
}
#nav{
height: 55px;
border-bottom: 4px solid lightblue ;
}
#intro-pic{
height: calc(100vh - 181px);
width: 100%;
background: url("img/introbg.jpg") center fixed;
}
#intro-box{
height: 55vh;
width: 800px;
background: rgba(0,0,0,0.74);
border-radius: 15px;
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
left:0px;
}
<div id="header">
<div class="container">
Header
</div>
</div>
<div id="nav">
<div class="container">
Nav
</div>
</div>
<div id="intro-pic">
<div class="container">
<div id="intro-box">
sdfdsfds
</div>
</div>
</div>
Using transform:translate will work for any size div.
html,
body {
padding: 0;
margin: 0;
height:100%;
}
.container {
width: 960px;
margin: 0 auto;
position: relative;
height:100vh;
}
#intro-box {
height: 55vh;
width: 800px;
background: rgba(0, 0, 0, 0.74);
border-radius: 15px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
/* vertical centering */
}
<div id="intro-pic">
<div class="container">
<div id="intro-box">
sdfdsfds
</div>
</div>
</div>
Find the below code.
Make left position 50% and give margin-left half of the wrapper width value.
#intro-box{
height: 55vh;
width: 800px;
background: rgba(0,0,0,0.74);
border-radius: 15px;
position: absolute;
top: 0px;
bottom: 0px;
left:50%;
margin-left: -400px; /* Half of the wrapper width */
}
Try below example if you are trying exact center (from top & left)
#intro-box{
height: 55vh;
width: 800px;
background: rgba(0,0,0,0.74);
border-radius: 15px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -400px; /* Half of the wrapper width */
margin-top: -27.5vh; /* Half of the wrapper height*/
}
JSFIDDLE DEMO
#intro-box {
height: 55vh;
width: 800px;
background: rgba(0,0,0,0.74);
border-radius: 15px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -400px;
margin-top: -27.5vh;
}
But again, .container should have height over or equal to #intro-box
There are many ways to center Elements:
using line-height:
you want to center text and you know the size of the box:
.box { background: red; height: 200px; }
.box span { display:block; text-align: center; line-height: 200px; }
<div class="box">
<span>Text</span>
</div>
using transform:
you want to center anything but dont know the size of your box:
.box, .box2 { background: red; height: 200px; }
.box span { top: 50%; text-align: center; position: relative; display: block; transform: translateY(-50%) }
.box2 span { top: 50%; left: 50%; position: relative; display: inline-block; transform: translate(-50%, -50%) }
<div class="box">
<span>Text</span>
</div>
OR WITHOUT TEXT-ALIGN:
<div class="box2">
<span>Text</span>
</div>
using absolute position:
you know the height of the element you want to center
.box, .box2 { background: red; height: 200px; position: relative; width: 100%; }
.box span { position: absolute; background: green; height: 50px; width: 50px; top: 50%; left: 50%; margin: -25px 0 0 -25px; }
<div class="box">
<span></span>
</div>
There are even more ways to manage this.