I have .
when I resize my window then it looks like
It is not responsive.
.discussion_round_div {
width: 70px;
height: 70px;
border-radius: 100px;
border: thin #edf1f2 solid;
position: absolute;
background: #FFFFFF;
left: 36%;
top: 20px;
}
.discussion_round_div_icon{
position: relative;
top: 18%;
font-size: 20px;
height: 25px;
color:#adadad;
}
.discussion_icon_text{
text-align: center;
font-size: 10px;
color: #3d4354;
}
.padding_30{
padding:30px !important;
}
.bg-dark{
background:#000;
}
.discussion_small_round_div {
width: 25px;
height: 25px;
border-radius: 50%;
position: relative;
background: #2d3446;
bottom: 9px;
left: 15px;
float:right;
}
.discussion_small_round_div:after {
content: '\2807';
font-size: 1.5em;
color:white;
position: absolute;
left: 9px;
top: 1px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="panel discussion_panel_div no_background no_box_shadow" style="position: relative;">
<div class="panel-heading padding_30 no_border_radius bg-dark set_padding_0">
<div class="discussion_small_round_div pull-right cursor_pointer" id="pending"></div>
</div>
<div class="discussion_round_div">
<div class="text-center discussion_round_div_icon">
<span class="glyphicon glyphicon-check "></span>
<p class="discussion_icon_text">Approved</p>
</div>
</div>
</div>
PS: The round div should be in the center of panel div as per the image
Can I do it without using media query?
Any help would be great.
Thank You.
As long as you have width defined it is fairly easy:
.discussion_round_div {
width: 70px;
height: 70px;
border-radius: 100px;
border: thin #edf1f2 solid;
position: absolute;
background: #FFFFFF;
left: 50%; /*changed*/
top: 20px;
margin-left: -35px; /* added */
}
could you try to put :
.discussion_round_div {
width: 70px;
height: 70px;
border-radius: 100px;
border: thin #edf1f2 solid;
position: absolute;
background: #FFFFFF;
left: 50%;
margin-left: -35px;
top: 20px;
}
and tell us.
PD: this revision of cs is not tested
Change your css to this.
.discussion_round_div {
width: 70px;
height: 70px;
border-radius: 100px;
border: thin #edf1f2 solid;
position: absolute;
background: #FFFFFF;
left: 0;
top: 20px;
right: 0;
margin: auto;
}
This will keep round div always center. Hope this helps you.
.discussion_round_div {
width: 70px;
height: 70px;
border-radius: 100px;
border: thin #edf1f2 solid;
/*position: absolute;*/
position:relative;
margin:auto ;
margin-top:-62px;
background: #FFFFFF;
/*left: 36%;*/
top: 20px;
}
.discussion_round_div_icon{
position: relative;
top: 18%;
font-size: 20px;
height: 25px;
color:#adadad;
}
.discussion_icon_text{
text-align: center;
font-size: 10px;
color: #3d4354;
}
.padding_30{
padding:30px !important;
}
.bg-dark{
background:#000;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="panel discussion_panel_div no_background no_box_shadow" style="position: relative;">
<div class="panel-heading padding_30 no_border_radius bg-dark set_padding_0">
</div>
<div class="discussion_round_div">
<div class="text-center discussion_round_div_icon">
<span class="glyphicon glyphicon-check "></span>
<p class="discussion_icon_text">Approved</p>
</div>
</div>
</div>
A good way to center an absolute positioned element is by using:
left: 50%;
transform: translateX(-50%);
This is a better version of the classic trick that uses a negative margin since you don't need to know the width of your centered element for this solution to work.
So, just add:
.discussion_round_div {
width: 70px;
height: 70px;
border-radius: 100px;
border: thin #edf1f2 solid;
position: absolute;
background: #FFFFFF;
left: 50%;
top: 20px;
transform: translateX(-50%);
}
This is a JSFiddle. I think is perfectly centered...
If you want the white approved element to be in the center even if you resize the browser then you can use something like:
.class{
position:absolute;
left:50%;
margin-left: -100px; // if your white approved element width is 200px then set margin to -100
}
Good luck
Related
I am still in the process of learning HTML/CSS/Js and was following this tutorial on youtube.
https://www.youtube.com/watch?v=7MDJtw3ZF-4&t=893s
My issue is at around 20:15 time stamp, my eyes.png do not appear. I find this odd because my face.png shows up perfectly fine, which is in the same folder.
<p class="location"></p>
<div class="container">
<div class="face_body">
<div class="face">
<div class="eye_pan">
<div class="pan_area">
<div class="eye eye_l">
<div class="eye eye_r">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
and my css
html,body, .container{
height: 100%;
width: 100%;
outline: 0px;
margin: 0px;
padding: 0px;
border: 0px;
}
.location{
position: fixed;
top: 0px;
right: 0px;
margin: 0px;
background: rgba(255,255,255,0.4);
padding: 10px;
}
.container{
display: table;
background: rgb(251,220,0);
background: -webkit-linear-gradient(rgb(251,220,0), rgb(255,197,17));
background: -o-linear-gradient(rgb(251,220,0), rgb(255,197,17));
background: -moz-linear-gradient(rgb(251,220,0), rgb(255,197,17));;
background: linear-gradient(rgb(251,220,0), rgb(255,197,17));
}
.face_body{
display: table-cell;
vertical-align: middle;
text-align: center;
width: 100%;
}
.face{
height: 200px;
width: 200px;
margin: auto;
background: url(images/face1.1.png);
background-size: 173px 200px;
background-repeat: no-repeat;
}
.eye_pan{
display: table;
padding: 30px 50px;
}
.pan_area{
width: 70px;
height: 55px;
position: relative;
}
.eye{
height: 20px;
width: 20px;
border-radius: 5px;
position: absolute;
margin-left: 5px;
transition: .5s height ease-in-out;
border: 1px solid red;
background: url(images/eyes.png);
}
.eye_r{
top: 0px;
left: 20px;
}
.eye_l{
top: 50px;
left: 25px;
}
any reasons on why my eyes.png are not showing would be great. Thanks.
Your .eye url background is probably linking to a wrong URL file or it is simply out of the view.
Try inserting background-size: cover; or set it a background-size if the images is loding fine.
html,body, .container{
height: 100%;
width: 100%;
outline: 0px;
margin: 0px;
padding: 0px;
border: 0px;
}
.location{
position: fixed;
top: 0px;
right: 0px;
margin: 0px;
background: rgba(255,255,255,0.4);
padding: 10px;
}
.container{
display: table;
background: rgb(251,220,0);
background: -webkit-linear-gradient(rgb(251,220,0), rgb(255,197,17));
background: -o-linear-gradient(rgb(251,220,0), rgb(255,197,17));
background: -moz-linear-gradient(rgb(251,220,0), rgb(255,197,17));;
background: linear-gradient(rgb(251,220,0), rgb(255,197,17));
}
.face_body{
display: table-cell;
vertical-align: middle;
text-align: center;
width: 100%;
}
.face{
height: 200px;
width: 200px;
margin: auto;
background: url(https://images.vexels.com/media/users/3/134743/isolated/preview/97ae591756f3dc69db88c09fd097319a-sad-face-emoji-emoticon-by-vexels.png);
background-size: 173px 200px;
background-repeat: no-repeat;
}
.eye_pan{
display: table;
padding: 30px 50px;
}
.pan_area{
width: 70px;
height: 55px;
position: relative;
}
.eye{
height: 20px;
width: 20px;
border-radius: 5px;
position: absolute;
margin-left: 5px;
transition: .5s height ease-in-out;
border: 1px solid red;
background: url(//cdn.playbuzz.com/cdn/e732686f-35b2-4be6-a5fa-52f388bb0d0d/3637262a-2c14-43b0-9be2-b2174055f790_560_420.jpg);
background-size:cover;
}
.eye_r{
top: 0px;
left: 20px;
}
.eye_l{
top: 50px;
left: 25px;
}
<p class="location"></p>
<div class="container">
<div class="face_body">
<div class="face">
<div class="eye_pan">
<div class="pan_area">
<div class="eye eye_l">
<div class="eye eye_r">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Check if your spellings are correct like 'eye' instead of 'eyes' also check the file format if its say 'jpg' and not 'png'.
Try clearing your browser cache just incase your browser did not load new files
Apply correct CSS syntax for background property and check whether your image path is correct or not.
background: url('images/eyes.png');
Try this and let me know if problem is still raised.
Have a nice day, Cheers !!!
I am trying to make this above layout. But unfortunately, I am not being able to put it as the above layout.
I am getting the 2nd image as my result.
Codes:
.text_box_holder{
position: relative;
}
.text_box_holder h1{
text-align: right;
padding-right: 50%;
color: #fff;
background: inherit;
-webkit-background-clip: text;
}
.learn_more_in_box{
color: #fde428;
text-align: right;
padding-left: 31% !important;
-webkit-background-clip: text;
}
.yellow_box{
position: absolute;
border: 7px solid #fde428;
width: 40%;
height: 300px;
}
<div class="text_box_holder">
<div class="yellow_box"></div>
<h1>Consumer<br>Products<br>Consulting</h1>
LEARN MORE
</div>
Please try following code . I didn't add any back ground images . I have tried only to add 2 text with the box .
HTML
<div class="text_box_holder">
<div class="yellow_box"> </div>
<div class="text1">
<h1>Consumer<br>Products<br>Consulting</h1>
<div class="text2">LEARN MORE</div>
</div>
</div>
CSS
.text1 {
margin-top: 30px;
position:absolute;
text-align: left;
color: #bc7e09;
}
.yellow_box{
margin-left: 60px;
position: absolute;
border: 5px solid #fde428;
width: 40%;
height: 300px;
}
If you want add back ground image for whole space , you can integrate with HTML .I hope it will help you .
Demo : https://jsfiddle.net/Ltxktaad/21/
You need to provide additional wrapper divs around the the text which needs to be absolutely positioned. Here is the working example.
<div class="text_box_holder">
<div class="yellow_box"></div>
<div class="main-text-wrapper">
<h1>Consumer<br>Products<br>Consulting</h1></div><div class="link-text-wrapper">
LEARN MORE </div>
</div>
.text_box_holder{
position: relative;
}
.text_box_holder h1{
text-align: right;
padding-right: 50%;
color: green;
background: inherit;
-webkit-background-clip: text;
text-align: left;
position: absolute;
top: -22px;
margin-top: 18px;
margin-bottom: 18px;
}
.learn_more_in_box{
color: #fde428;
text-align: right;
-webkit-background-clip: text;
text-align: left;
position: absolute;
top: 4px;
}
.yellow_box{
position: absolute;
border: 7px solid #fde428;
width: 40%;
height: 300px;
margin-left: 45px;
z-index:2;
}
.main-text-wrapper {
background-color: white;
width: 40%;
height: 110px;
position:absolute;
top: 65px;
z-index: 9999;
}
.link-text-wrapper {
position:absolute;
background-color: #fff;
top: 195px;
width:40%;
height: 30px;
z-index: 9999;
}
I have text in the following div but I cannot seem to get it to align center:
<div class="banner_tron">
<div class="bg-box-100-grey">
<span class="SansFontBold ex-lrg-60 center color-white">Hello World</span>
<div class="div-wrapper">
<p class="SansFontBold ex-lrg-20 center color-white">Have a Wonderful Day</p>
</div>
</div>
</div>
The CSS for this code is as follows:
.banner_tron{
bottom: 0;
height: 150px;
left: 0;
margin: auto;
position: absolute;
top: 0;
width: 300px;
white-space: nowrap;
}
.center {
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom:auto;
}
/* background-boxing */
.bg-box-100-grey{
position: fixed;
left: 0;
right:0;
width: 100%;
background-color: rgba(108,108,108, .7);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: none;
}
.ex-lrg-60 {
font-size: 60px;
font-weight: bold;
}
I have tried several different suggestions for the .center class but nothing seems to work (javascript positioning, align items, and webkit transformations). Any suggestions on why this isn't working and what I can do to fix it?
Add text-align:center to your .banner_tron
.banner_tron{
bottom: 0;
height: 150px;
left: 0;
margin: auto;
position: absolute;
top: 0;
width: 300px;
white-space: nowrap;
text-align:center;
}
.center {
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom:auto;
}
/* background-boxing */
.bg-box-100-grey{
position: fixed;
left: 0;
right:0;
width: 100%;
background-color: rgba(108,108,108, .7);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: none;
}
.ex-lrg-60 {
font-size: 60px;
font-weight: bold;
}
<div class="banner_tron">
<div class="bg-box-100-grey">
<span class="SansFontBold ex-lrg-60 color-white">Hello World</span>
<div class="div-wrapper">
<p class="SansFontBold ex-lrg-20 center color-white">Have a Wonderful Day</p>
</div>
</div>
</div>
Hope it helps :)
Skip center and add text-align: center to the bg-box-100-grey rule
.banner_tron{
bottom: 0;
height: 150px;
left: 0;
margin: auto;
position: absolute;
top: 0;
width: 300px;
white-space: nowrap;
}
/* background-boxing */
.bg-box-100-grey{
position: fixed;
left: 0;
right:0;
width: 100%;
background-color: rgba(108,108,108, .7);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: none;
text-align: center
}
.ex-lrg-60 {
font-size: 60px;
font-weight: bold;
}
<div class="banner_tron">
<div class="bg-box-100-grey">
<span class="SansFontBold ex-lrg-60 color-white">Hello World</span>
<div class="div-wrapper">
<p class="SansFontBold ex-lrg-20 center color-white">Have a Wonderful Day</p>
</div>
</div>
</div>
Or change the center class like below and add it to the bg-box-100-grey element's class
.banner_tron{
bottom: 0;
height: 150px;
left: 0;
margin: auto;
position: absolute;
top: 0;
width: 300px;
white-space: nowrap;
}
.center {
text-align: center;
}
/* background-boxing */
.bg-box-100-grey{
position: fixed;
left: 0;
right:0;
width: 100%;
background-color: rgba(108,108,108, .7);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: none;
}
.ex-lrg-60 {
font-size: 60px;
font-weight: bold;
}
<div class="banner_tron">
<div class="bg-box-100-grey center">
<span class="SansFontBold ex-lrg-60 color-white">Hello World</span>
<div class="div-wrapper">
<p class="SansFontBold ex-lrg-20 center color-white">Have a Wonderful Day</p>
</div>
</div>
</div>
I've been trying to draw a line down the middle of a series of circles however if I set a line (.Line1) to fit between the first and last element then it's drawn from the top left of the first element and not centralised. If i set a line (.Line2) to fit in the middle by changing the percentages it will look fine at 100% zoom however if you zoom in or out of the screen it moves around.
I know it is possible to do using pure javascript however I cannot figure out how to do it with css created elements.
<style>
.A,.B,.C,.D, .E {
position: absolute;
width: 45px;
height: 45px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 2px solid black;
background: lightblue;
}
.A {
top: 10%;
left: 50%;
}
.B {
top: 25%;
left: 50%;
}
.C {
top: 40%;
left: 50%;
}
.D {
top: 55%;
left: 50%;
}
.E {
top: 70%;
left: 50%;
}
.Line1{
position: absolute;
left: 50%;
top: 10%;
height: 60%;
width: 4px;
background: black;
}
.Line2{
position: absolute;
left: 51.3%;
top: 15%;
height: 60%;
width: 4px;
background: black;
}
</style>
<body>
<div class = "A"></div>
<div class = "B"></div>
<div class = "C"></div>
<div class = "D"></div>
<div class = "E"></div>
<div class = "Line1"></div>
<div class = "Line2"></div>
</body>
http://codepen.io/anon/pen/ZWMbNe
You need to take border, width and height into account. you cannot draw half a pixel. For example this is a center line:
.A,.B,.C,.D, .E {
position: absolute;
width: 46px;
height: 46px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 2px solid black;
background: lightblue;
}
.Line1{
position: absolute;
left: 50%;
top: 10%;
height: 60%;
width: 2px;
background: black;
transform: translate(24px,23px);
}
give one of the lines a margin-left that will be equal to half of the circle's width.
that way the line will always stay in the middle no matter if you zoom in or out.
.Line1{
position: absolute;
left: 50%;
top: 15%;
height: 60%;
width: 4px;
margin-left:23px;
margin-top:0px;
background: black;
}
You need to wrap your circles into a parent Element. So that you can align the Black line according to the parent Div and not the window size.
Moreover you can use the pseudo selector :before or :after for the line.
HTML
<div class="cirCont">
<div class="A"></div>
<div class="B"></div>
<div class="C"></div>
<div class="D"></div>
<div class="E"></div>
</div>
CSS
.A,.B,.C,.D, .E {
width: 45px;
height: 45px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 2px solid black;
background: lightblue;
}
.cirCont{
float:left;
position:relative;
top: 100px;
left: 50%;
}
.cirCont:after{
content:"";
position: absolute;
left: calc(50% - 2px);
top: 10%;
height: 80%;
width: 4px;
background: black;
z-index:10;
}
Checkout this pen
I am looking to draw a horse-shoe like gauge using CSS like the following picture below:
The way I've tried is doing something like creating a circle and cutting off the bottom like this fiddle: http://jsfiddle.net/Fz3Ln/12/
markup:
<div class="container">
<div class="horse-shoe-gauge"></div>
</div>
css:
.container {
width: 200px;
height: 180px;
overflow: hidden;
}
.horse-shoe-gauge {
width: 200px;
height: 200px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 10px solid black;
box-sizing: border-box;
}
But I'm not able to get the circular rounded bottom.
Any advice would be appreciated. Thanks.
I added an outer container and then absolutely position a couple extra pieces to get the rounded bottoms you were looking for.
HTML
<div class="outerContainer">
<div class="container">
<div class="horse-shoe-gauge"></div>
</div>
<div class="bottom left"></div>
<div class="bottom right"></div>
</div>
CSS
.outerContainer {
position: relative;
}
.container {
width: 200px;
height: 180px;
overflow: hidden;
}
.horse-shoe-gauge {
width: 200px;
height: 200px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 10px solid black;
box-sizing: border-box;
}
.bottom {
position: absolute;
width: 25px;
height: 10px;
border-radius: 8px;
background: #000;
}
.left {
bottom: -6px;
left: 38px;
-webkit-transform: rotate(32deg);
}
.right {
bottom: -6px;
left: 137px;
-webkit-transform: rotate(-32deg);
}
Here's a jsFiddle
Something a bit different with :before and :after so that the html doesn't need to be modified.
I would however probably consider using canvas instead as it will give more control.
http://jsfiddle.net/Fz3Ln/16/
.horse-shoe-gauge:before {
content: "";
display: block;
position: absolute;
bottom: -5px;
left: 12px;
height: 10px;
width: 10px;
border: 15px solid white;
border-top-color: transparent;
border-left-color: transparent;
background-color: black;
background-clip: padding-box;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.horse-shoe-gauge:after {
content: "";
display: block;
position: absolute;
bottom: -5px;
right: 12px;
height: 10px;
width: 10px;
border: 15px solid white;
border-top-color: transparent;
border-right-color: transparent;
background-color: black;
background-clip: padding-box;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
To see how it's working, see this fiddle.
Try this on for size:
http://codepen.io/robcampo/pen/YXpWLP
Should work from IE10+. It essentially rotates two divs beside each other and uses markers to round out the edges:
<div class="radial-wrapper">
<div class="radial-section radial-right-section">
<div class="wedge"></div>
</div>
<div class="radial-section radial-left-section">
<div class="wedge"></div>
</div>
<div class="marker start"></div>
<div class="marker end"></div>
</div>
It may be somewhat hard to read but it originates from this tutorial:
https://cssanimation.rocks/watch/
which goes through each step.