I want to create a line with tick marks and a ball (like a scale).
However the tutorials for this suggest using absolute positioning, or float. That works partially, but when I change the screen size, the divs shift out of place.
.line {
width: 100%;
min-height: 5px;
background-color: black;
padding: 20px;
margin-top: 20%;
}
.point {
-moz-border-radius: 50px/50px;
-webkit-border-radius: 50px 50px;
border-radius: 50px/50px;
border: solid 21px #f00;
width: 50px;
height: 50px;
background-color: red;
float: right;
overflow: visible;
position: relative;
z-index: 1000;
padding: 20px;
margin-top: -15%;
}
<div class="line"></div>
<div class="point"></div>
Wrap it in a div and do use absolute positioning for the inner divs, also, don't use margin-top percentages (https://jsfiddle.net/xv259d4p/1/):
.line {
width:100%;
min-height:5px;
background-color:black;
padding:20px;
margin-top:60px;
position: absolute;
}
.point {
-moz-border-radius: 50px/50px;
-webkit-border-radius: 50px 50px;
border-radius: 50px/50px;
border:solid 21px #f00;
width:50px;
height:50px;
background-color:red;
float: right;
overflow: visible;
position: absolute;
z-index: 1000;
padding:20px;
right: 0;
margin-top: 20px;
}
.outer {
display: block;
width: 100%;
top: 0px;
left: 0px;
position: relative;
}
<div class="outer">
<div class="line"> </div>
<div class="point"></div>
</div>
Related
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.
Below is the image I am trying for; I managed to get a rectangle using CSS, but I am trying for a rectangle above another one .
#dragtarget2 {
float: left;
clear: left;
width: 176px;
height: 76px;
background: #968282;
border-radius: 13px;
}
<div ondragstart="dragStart(event)" draggable="true" id="dragtarget2">
<p>meter</p>
</div>
Make your rectangles position: absolute and the container as position: relative.
This is the code you're looking for.
.container{
position: relative;
}
.first , .second, .third {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 40px;
background-color: gray;
border-radius: 4px;
border: 2px solid red;
}
.second{
top: 4px;
left: 4px;
}
.third{
top: 8px;
left: 8px;
}
<div class="container">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
Use position: absolute/position: relative to move element from it's origin position. Use z-index to move element above/below other elements (higher z-index - higher element is positioned).
.border {
border: 2px solid red;
background-color: #aaa;
width: 200px;
height: 50px;
line-height: 50px;
position: absolute;
left: 0;
top: 0;
z-index: 5;
}
.border:nth-child(2) {
left: 5px;
top: 5px;
z-index: 6;
}
.border:nth-child(3) {
left: 10px;
top: 10px;
z-index: 7;
}
.wrapper {
margin: 10px;
/* NOTE: this does not effect absolute elements */
padding: 10px;
/* NOTE: this will be origin of absolute elements coordinates */
position: relative;
}
<div class="wrapper">
<div class="border">1</div>
<div class="border">2</div>
<div class="border origin">SmartMeter</div>
</div>
With less HTML:
.wrapper {
position: relative;
margin: 10px;
}
.border {
position: relative;
}
.border span,
.border:before,
.border:after {
content: '';
position: absolute;
left: 0;
top: 0;
border: 2px solid red;
background: #aaa;
display: inline-block;
width: 200px;
height: 50px;
line-height: 50px;
}
.border:after {
left: 5px;
top: 5px;
z-index: 6;
}
.border span {
left: 10px;
top: 10px;
z-index: 7;
}
<div class="wrapper">
<div class="border"><span>SmartMeter</span>
</div>
</div>
I have added two outer divs so that the code is as follows.
#dragtarget2 {
float: left;
clear: left;
width: 176px;
height: 76px;
background: #968282;
border-radius: 13px;
border: 2px solid;
padding: 2px;
}
.dragtarget0 {
float: left;
clear: left;
width: 176px;
height: 76px;
border: 2px solid;
border-radius: 13px;
padding: 2px;
margin: 2px;
}
.dragtarget1 {
float: left;
clear: left;
width: 176px;
height: 76px;
border: 2px solid;
border-radius: 13px;
padding: 3px;
}
<div class="dragtarget0">
<div class="dragtarget1">
<div id="dragtarget2">
<p>meter</p>
</div>
</div>
</div>
Please see the code in jsbin
Screenshot:
All I need is just to have blue on top, then white, then greens. So ideally:
I tried z-index, create stacking context... nothing worked.
It might have something to do with negative margin in CSS
I'm happy to change the HTML code or change the current CSS, as long as I can get the desired effect.
.left,
.right {
width: 200px;
height: 60px;
background-color: green;
display: inline-block;
}
.bar {
width: 20px;
height: 60px;
background-color: blue;
display: inline-block;
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 50%;
margin-left: -10px;
margin-top: 10px;
}
<div class="out">
<div class="left"></div>
<div class="bar">
<div class="circle"></div>
</div>
<div class="right"></div>
</div>
Edit
I should have mentioned that my difficulty was mostly achieving the effect while keeping the current HTML setup (i.e. circle in bar). Turns out it doesn't seem possible, because
If no zindex on bar, can't make sure it's on top of circle
If set zindex on bar, then it creates new stacking context, then circle can't be on top of 2 greens. Because greens are on different stacking context
you can simplify this using just the div out with position + z-index
.out {
position: relative;
width: 400px;
height: 60px;
background-color: green;
}
.bar {
width: 20px;
height: 60px;
background-color: blue;
display: inline-block;
position: absolute;
top: 0;
left: 50%;
z-index: 10
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 50%;
margin-left: -10px;
margin-top: 10px;
position: absolute;
top: 0;
left: 50%;
z-index: 1
}
<div class="out">
<div class="circle"></div>
<div class="bar"></div>
</div>
EDITED : edited my answer after reading more carefully :) sorry about that
see here > jsFiddle
or snippet below :
.left, .right {
width: 200px;
height: 60px;
background-color: green;
display: inline-block;
position:relative;
z-index:1;
}
.bar {
width: 20px;
height: 60px;
background-color: blue;
display: inline-block;
z-index:6;
position:relative;
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 50%;
top: 10px;
position:absolute;
left:0;
right:0;
margin:0 auto;
z-index:5;
}
.out {width:420px;position:relative;}
<div class="out">
<div class="left"></div><div class="bar"></div><div class="circle"></div><div class="right"></div>
</div>
OR if you don't want different bg color for .left and .right just use one big div .out and position the bar and circle on top of it :
.out {
position: relative;
width: 420px;
height: 60px;
background-color: green;
}
.bar {
width: 20px;
height: 100%;
background-color: blue;
position: absolute;
left: 0;
right:0;
margin:0 auto;
z-index: 2
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 50%;
position: absolute;
top: 10px;
left: 0;
right:0;
margin:0 auto;
z-index: 1
}
<div class="out">
<div class="bar"></div>
<div class="circle"></div>
</div>
What if we just interchange .bar as child element of .circle. And try as below,
.left, .right {
width: 200px;
height: 60px;
background-color: green;
display: inline-block;
}
.bar {
width: 20px;
height: 60px;
background-color: blue;
margin:-10px 10px;
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 50%;
display:inline-block;
position:absolute;
margin:10px -20px;
}
<div class="out">
<div class="left"></div>
<div class="circle"><div class="bar"></div></div>
<div class="right"></div>
</div>
You could even further simplify your markup and utilize a pseudo selector instead of wrestling with stacking order, and order elements naturally.
.out {
width: 400px;
padding: 10px 0;
background: green;
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 100%;
display: block;
margin: 0 auto;
position: relative;
}
.circle:after {
content: '';
width: 20px;
height: 60px;
background-color: blue;
display: block;
margin: 0 auto;
position: absolute;
top: -10px;
left: 10px;
}
<div class="out">
<div class="left"></div>
<div class="circle"></div>
<div class="right"></div>
</div>
Use transform.
https://jsbin.com/geconefine/1/edit?html,css,output
.out{
position: relative;
z-index: 0;
}
.left, .right {
width: 200px;
height: 60px;
background-color: green;
display: inline-block;
position: relative;
z-index: -2;
}
.bar {
width: 20px;
height: 60px;
background-color: blue;
display: inline-block;
position: relative;
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 50%;
transform: translateX(-10px);
margin-top: 10px;
position: relative;
z-index: -1;
}
You need a position before z-index will do anything. Since I don't see any applied in your current css that might be your issue.
.left, .right{
position: relative;
z-index: 1;
}
.circle{
position: relative;
z-index: 4;
}
.bar{
position: relative;
z-index: 5;
}
So, I'm trying to achieve this result:
This is what I got when I tried: https://jsfiddle.net/wvdkmjge/
.container {
width: 100px;
height: 1px;
background-color: black;
}
.circle {
display: inline-block;
vertical-align: middle;
width: 10px;
height: 10px;
background-color: transparent;
border: solid 1px black;
border-radius: 50%;
}
<div class="container">
<div class="circle">
</div>
</div>
Moreover, I want that I'll not see the border line on the circle. Any suggestions?
A small amendment to your code to position the elements and you get the effect you want to achieve.
.container {
width: 100px;
height: 1px;
background-color: black;
position: relative;
}
.circle {
display: inline-block;
vertical-align: middle;
width: 10px;
height: 10px;
background-color: white;
border: solid 1px black;
border-radius: 50%;
position: absolute;
top: -6px;
left: calc(50% - 5px);
}
.blue {
margin-top: 20px;
background: #3EB2EF;
}
.blue .circle {
background: #3EB2EF;
border-color: #3EB2EF;
}
<div class="container">
<div class="circle">
</div>
</div>
<div class="container blue">
<div class="circle">
</div>
</div>
If you want to position an element depending on its parent, use position:relative for the parent and then add position relative or absolute to the child. to center something in the middle, use margin:0 auto and if it has absolute positioning also add left:0; right:0;
https://jsfiddle.net/azizn/e4ev3awj/1/
.container {
width: 100px;
height: 1px;
background-color: blue;
position:relative;
}
.circle {
display:inline-block;
width: 10px;
height: 10px;
position: absolute;
background:blue;
left:0;
right:0;
margin:0 auto;
border-radius: 100%;
top:-4px;
}
<div class="container">
<div class="circle">
</div>
</div>
a bit late to answer, but this looks like a typical <hr/> that needs some makup.
/* restyle however your needs are hr and its pseudo elements , here only one is used */
hr {
color: turquoise;
border-width: 3px;
margin: 1em;
box-shadow: 0 0 5px gray;
}
hr:before {
content: '';
border-radius: 100%;
position: absolute;
height: 20px;
width: 20px;
background: turquoise;
left: 50%;
margin: -10px;
box-shadow: inherit
}
<hr/>
Try this:
.container {
width: 100px;
height: 1px;
background-color: black;
position: relative;
}
.circle {
position: absolute;
top: -5px;
left: 50%;
margin-left: -5px;
display: inline-block;
vertical-align: middle;
width: 10px;
height: 10px;
background-color: transparent;
border: solid 1px black;
border-radius: 50%;
}
<div class="container">
<div class="circle">
</div>
</div>
Fiddle
This uses a lot of different codes then above.
class:before and class:after
Hope this helps you!
I want the border div to be "hidden" behind the circle and not cross through it. I thought z-index was the way to do things like this.
Any ideas?
JSFIDDLE: http://jsfiddle.net/qs5xmege/1/
CSS and HTML
.container {
width: 15%;
height: 100px;
float: left;
position: relative;
}
.circle {
width:22px;
height:22px;
border-radius:11px;
border: 3px solid red;
background-color: #FFF;
margin: 30px auto 0 auto;
z-index: 100;
}
.border {
width: 50%;
height: 100px;
position: absolute;
border-right: thin solid black;
top: 0;
left: 0;
z-index: 1;
}
<div class="container">
<div class="border"></div>
<div class="circle"></div>
</div>
Give .circle a position:relative, z-index works only with position:relative, position:absolute or position: fixed
.container {
width: 15%;
height: 100px;
float: left;
position: relative;
}
.circle {
width:22px;
height:22px;
border-radius:11px;
border: 3px solid red;
background-color: #FFF;
margin: 30px auto 0 auto;
position: relative;
z-index: 100;
}
.border {
width: 50%;
height: 100px;
position: absolute;
border-right: thin solid black;
top: 0;
left: 0;
z-index: 1;
}
<div class="container">
<div class="border"></div>
<div class="circle"></div>
</div>
Add position:relative; to .circle.
z-index need relative, absolute or fixed vaue for position.
Set position:relative of div circle and z-index:2 ie. 1 more than border is enough
.circle {
background-color: #FFFFFF;
border: 3px solid #FF0000;
border-radius: 11px;
height: 22px;
margin: 30px auto 0;
position: relative;
width: 22px;
z-index: 2;
}
Snippet
.container {
width: 15%;
height: 100px;
float: left;
position: relative;
}
.circle {
background-color: #FFFFFF;
border: 3px solid #FF0000;
border-radius: 11px;
height: 22px;
margin: 30px auto 0;
position: relative;
width: 22px;
z-index: 2;
}
.border {
width: 50%;
height: 100px;
position: absolute;
border-right: thin solid black;
top: 0;
left: 0;
z-index: 1;
}
<div class="container">
<div class="border"></div>
<div class="circle"></div>
</div>
Try like this:
.circle {
background-color: #fff;
border: 3px solid red;
border-radius: 11px;
display: block;
height: 22px;
margin: 0 auto;
position: relative;
top: -68px;
width: 22px;
}
.border {
border-right: thin solid black;
height: 100px;
width: 50%;
}