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
Related
In my navigation bar there is a logo which should be centered, and a menu button image (3 lines) which should be floated left. I've gotten the menu button to float left but just cannot seem to get the logo to be in the exact center of navbar, it's always a bit to the right.
I've tried puttin them both in divs and setting div width to 50%, then float the image left so it makes it centered but no luck.
HTML:
<div id="resp-navbar">
<div id="resp-nav-contents">
<img id="exp-menu-img" src="3lines.png">
<img id="resp-logo" src="MSLOGO.jpg">
</div>
</div>
CSS:
#resp-navbar{
height: 15%;
text-align: center;
width: 100%;
display: inline-block;
position: fixed;
z-index:51;
background-color: white;
border-bottom: solid;
border-width: 1px;
border-color: #afafaf;
}
#resp-nav-contents{
min-width: 300px;
}
#exp-menu-img{
height: 30%;
position: absolute;
left: 2%;
top: 50%;
transform: translateY(-50%);
opacity: 0.4;
cursor: pointer;
}
#resp-logo{
height: 50%;
position: absolute;
top: 50%;
transform: translateY(-50%);
display: inline;
}
Added: left: 0; right: 0; margin: auto; to #resp-logo
#resp-navbar{
height: 15%;
text-align: center;
width: 100%;
display: inline-block;
position: fixed;
z-index:51;
background-color: white;
border-bottom: solid;
border-width: 1px;
border-color: #afafaf;
}
#resp-nav-contents{
min-width: 300px;
}
#exp-menu-img{
height: 30%;
position: absolute;
left: 2%;
top: 50%;
transform: translateY(-50%);
opacity: 0.4;
cursor: pointer;
}
#resp-logo {
height: 50%;
position: absolute;
top: 50%;
transform: translateY(-50%);
display: inline;
left: 0;
right: 0;
margin: auto;
}
<div id="resp-navbar">
<div id="resp-nav-contents">
<img id="exp-menu-img" src="https://placehold.it/20x20">
<img id="resp-logo" src="https://placehold.it/500x100">
</div>
</div>
Try setting the menu icon as position: absolute; and normalize the rest
Use the following which may help
<div id="resp-navvar>
<img id="exp-menu-img" src="3lines.png">
<img id="resp-logo" src="MSLOGO.jpg">
#resp-logo {
positions:absolute;
left:50%;
Transform:translate(-50%);
Width- custom, height- custom
}
Don’t forget to put the root div position to relative if things don’t work
Remove these from #resp-logo
position: absolute; display: inline;
Or You can force it to center using margins.
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
I'm trying to get better at JS and CSS, so I'm making a fake iPhone and am trying the simulate the look of when a text bubble pops on and off screen.
This is what it looks like so far, and this is the HTML for the phone itself:
<div id="iPhone">
<div id="screen"></div>
<div id="me" class="bubble"></div>
<div id="homeButton" class="circle"></div>
</div>
As well as the style sheet:
#iPhone {
position: fixed;
width: 250px;
height: 500px;
background-color: black;
border-radius: 25px;
top: 50%;
right: 30%;
transform: translate(-50%, -50%);
-webkit-filter: blur(3px);
box-shadow: 0 0 40px 20px white;
border: solid 2px white;
}
#me {
background-color: #1D62F0;
margin-top: 130%;
margin-left: 25%;
}
#me::after{
content: "";
position: absolute;
right: 0em;
bottom: 0;
width: 0.5em;
height: 1em;
border-left: 0.5em solid #1D62F0;
border-bottom-left-radius: 1em 0.5em;
}
#screen {
position: fixed;
width: 241px;
height: 370px;
background-color: white;
border-radius: 0px;
top: 8%;
left: 1%;
-webkit-filter: blur(3px);
border: solid 2px black;
}
Right now, there's no JS governing it. How do I make it naturally slide onto the "screen" div and then disappear off the top, just like a real text message?
Thanks!
You need to put the overflow: hidden property on the message container div, then simply push new message boxes beneath the already existing ones, so they disappear eventually.
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.
I have a problem with centering div in HTML (vertical & horizontal). My code looks something like this:
<div id="container">SOME HTML</div>
#container{
width: 366px;
height: 274px;
margin: 50%;
top: -137px;
left: -188px;
position:absolute;
}
Only chrome center this div in to the middle of the screen.
This will center the <div> horizontally:
#container{
width: 366px;
height: 274px;
margin: 0 auto;
}
Centering vertically is not quite simple, you maybe have to use javascript for that, or you try this css solution.
#container{
width: 366px;
height: 274px;
top: 50%;
left: 50%;
margin: -137px 0 0 -188px;
position:absolute;
}
This does the trick (vertical & horizontal):
#container{
position: absolute;
width: 366px;
height: 274px;
left: 50%;
top: 50%;
margin-left: -183px; /* half width */
margin-top: -137px; /* half height */
}
You could use:
#container {
// Your other values, but remove position: absolute;
margin: 0 auto;
}
Alternatively, you can do:
#wrapper, #container {
border: 1px solid red;
height: 500px;
width: 600px;
}
#wrapper {
bottom: 50%;
right: 50%;
position: absolute;
}
#container {
background: yellow;
left: 50%;
padding: 10px;
position: relative;
top: 50%;
}
And you're HTML code:
<div id="wrapper">
<div id="container">
<h1>Centered Div</h1>
<p>
This div has been centered within your browser window.</p>
</div>
</div>
That will center the <div> in the middle of the browser window.
Try this one:
<div class="cont">
<div class="box"></div>
</div>
Css:
.cont{
background-color: tomato;
width: 600px;
height: 400px;
position: relative;
}
.box {
width:100px;
height:100px;
background-color: teal;
color:#fff;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)
}
Should be fine to use just CSS:
here is the demo
#container{
width: 366px;
height: 274px;
margin: 50%;
top: 50%;
left: 50%;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}