I want to make a solar system and I've used two divs around my sun so far; a div to specify the orbit path, and earth, to follow that path. The problem is that I want to place the #earth div onto the #earth-orbit div which has a border-radius of 50%. I've wrapped #earth-orbit around #earth like this:
<div id='sun'>
</div>
<div id='earth-orbit'>
<div id='earth'>
</div>
</div>
Then, in my css I have this so far:
#sun
{
margin: auto;
height: 200px;
width: 200px;
background-color: orange;
position: absolute;
border-radius: 50%;
top: 0; left: 0; bottom: 0; right: 0;
}
#earth-orbit
{
margin: auto;
top: 0; left: 0; bottom: 0; right: 0;
position: absolute;
border-width: 2px;
border-style: dotted;
border-color: white;
border-radius: 50%;
height: 500px;
width: 500px;
}
#earth
{
height: 50px;
width: 50px;
background-color: white;
border-radius: 50%;
}
How do I place the #earth onto the curved border of the #earth-orbit?
Edit: It's easy to do it when you're not trying to simultaneously keep the whole system in the middle of the screen
<style>
#sun
{
margin: auto;
height: 200px;
width: 200px;
background-color: orange;
position: absolute;
border-radius: 50%;
top: 0; left: 0; bottom: 0; right: 0;
}
#earth-orbit
{
margin: auto;
top: 0; left: 0; bottom: 0; right: 0;
position: absolute;
border-width: 2px;
border-style: dotted;
border-color: blue;
border-radius: 50%;
height: 500px;
width: 500px;
}
#earth
{
position:absolute;
left:130px;
height: 50px;
width: 50px;
background-color: red;
border-radius: 50%;
}
</style>
<div id='sun'>
</div>
<div id='earth-orbit'>
<div id='earth'>
</div>
</div>
If you want just make static image, you can absolute position #earth:
#earth
{
position:absolute;
top: -25px;
height: 50px;
width: 50px;
background-color: white;
border-radius: 50%;
}
and do not forget about:
#earth-orbit
{
top: 25px; left: 25px; bottom: 25px; right: 25px;
position: absolute;
}
Related
I have been watching a tutorial on jQuery and he already had the css file made before but his output looks different than what I have when I downloaded the file
his:
The way it should be
Mine:
The code:
#navArrows {
position: relative;
width: 150px;
height: 150px;
margin: 100px auto 0;
background: #333;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
padding: 20px;
}
.navigationArrow {
width: 50px;
height: 50px;
line-height: 50px;
padding: 0;
margin: 0;
position: absolute;
top: 20px;
left: 20px;
background: white;
color: #222;
}
#up {
left: 50%;
margin-left: -25px;
}
#left, #right {
bottom: 50%;
margin-top: -25px;
}
#left, {
right: 20%;
left: inherit;
}
#right {
left: 20%;
right: inherit;
}
#down {
bottom: 20px;
top: inherit;
left: 50%;
margin-left: 5px;
}
.box {
height: 100px;
width: 100px;
background: #a7f;
color: white;
border: solid 4px #a1f;
line-height: 100px;
margin: 100px auto 0;
opacity: 0.5;
position: relative;
}
How do I fix this, please let me know.
ps: i added one part of the code that was missing from the original question, hope this helps.
It was better if you was add the markup as well. However see the following example and make correction according it. Hope it will work for you.
#navArrows {
position: relative;
width: 150px;
height: 150px;
margin: 100px auto 0;
background: #333;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 100px;
padding: 20px;
}
.navigationArrow {
width: 50px;
height: 50px;
line-height: 50px;
padding: 0;
margin: 0;
position: absolute;
top: 20px;
left: 20px;
background: white;
color: #222;
}
#up {
left: 50%;
margin-left: -25px;
}
#left, #right {
top: 50%; // One of the key line
margin-top: -25px;
}
#right {
left: auto;
right: 20px;
}
#down {
bottom: 20px;
top: auto;
left: 50%;
margin-left: -25px;
}
.box {
height: 100px;
width: 100px;
background: #a7f;
color: white;
border: solid 4px #a1f;
line-height: 100px;
margin: 100px auto 0;
opacity: 0.5;
position: relative;
}
<div id="navArrows">
<div class="navigationArrow" id="up"></div>
<div class="navigationArrow" id="right"></div>
<div class="navigationArrow" id="down"></div>
<div class="navigationArrow" id="left"></div>
</div>
It looks like you have a comma after the #left class try replacing it with:
#left {
right: 20%;
left: inherit;
}
Try this one
#left {
left: 0;
}
.line-8 {
width: 100px;
height: 1px;
background-color: orange;
position: relative;
left: 240px;
top: 15px;
margin-bottom: 35px;
}
How to make look like this
Try This:
.line-8 {
width: 100px;
height: 1px;
background-color: orange;
position:relative;
left: 240px;
top: 15px;
margin-bottom:35px;
}
.line-8:after {
position: absolute;
content: '';
width: 10px;
height: 10px;
border-radius: 100%;
background-color: orange;
right: 0;
top: 50%;
transform: translateY(-50%);
}
<div class="line-8"></div>
I have a modal, that is show/hide using JavaScript.
In the modal an image will be inserted using JavaScript. Also over the image a div element will exist that will simulate cropping (get the coordinates of the image).
I have a problem making the image to stay below the modal-crop.
modal-crop and the image need to be in the center of modal-area.
I can't use grid or flex because I need to support IE9.
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
display: none;
overflow: hidden;
outline: 0;
}
.modal-area {
position: absolute;
top: 50%;
left: 50%;
width: 50%;
height: 50%;
transform: translate(-50%, -50%);
margin: 0 auto;
padding: 30px;
background-color: blueviolet;
border-radius: 4px;
box-shadow: 0 0 50px black;
overflow: hidden;
}
.modal-area img {
margin-left: auto;
margin-right: auto;
}
.modal-crop {
position: relative;
background-color: aliceblue;
left: 0;
right: 0;
top: 0;
margin-left: auto;
margin-right: auto;
width: 200px;
height: 200px;
opacity: 0.2;
z-index: 2;
}
<div class="modal">
<div class="modal-area">
<div class="modal-crop"></div>
#img will be inserted here using Javascript#
</div>
</div>
Your image need to be positionned absolutely like this :
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
overflow: hidden;
outline: 0;
min-height: 300px;
}
.modal-area {
position: absolute;
top: 50%;
left: 50%;
width: 50%;
height: 50%;
transform: translate(-50%, -50%);
margin: 0 auto;
padding: 30px;
background-color: blueviolet;
border-radius: 4px;
box-shadow: 0 0 50px black;
overflow: hidden;
}
.modal-area img {
margin-left: auto;
margin-right: auto;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
.modal-crop {
position: relative;
background-color: aliceblue;
left: 0;
right: 0;
top: 0;
margin-left: auto;
margin-right: auto;
height: 100%;
opacity: 0.2;
z-index: 2;
}
<div class="modal">
<div class="modal-area">
<div class="modal-crop"></div>
<img src="https://lorempixel.com/500/500/">
</div>
</div>
I think I got an understanding of what you want to achieve. And I also know that it can be a pain to overlap elements with absolute positioning in multiple layers (even more so when it comes to different browsers).
I recommend you to use a grid layout, which is quite easy to set up:
HTML
<div class="modal">
<div class="modal-area">
<img src="http://via.placeholder.com/200x200">
<div class="modal-crop"></div>
</div>
</div>
CSS
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
display: block;
overflow: hidden;
outline: 0;
}
.modal-area {
display:grid;
grid-template-rows: auto;
grid-template-columns: auto;
justify-items:center;
position: absolute;
top: 50%;
left: 50%;
width: 50%;
height: 50%;
transform: translate(-50%, -50%);
margin: 0 auto;
padding: 30px;
background-color: blueviolet;
border-radius: 4px;
box-shadow: 0 0 50px black;
overflow: hidden;
}
.modal-area img {
grid-row: 1/span 1;
grid-column: 1/span 1;
z-index:1;
}
.modal-crop {
width: 200px;
height: 200px;
grid-row: 1/span 1;
grid-column: 1/span 1;
background-color: red;
opacity: 0.2;
z-index:2;
}
Be aware though, that in this solution the "modal crop" needs to be set to width and and height of the image. But I used similar solutions in other situations and will not be hard to adjust it so that it works for any image sizes.
Have a fiddle: https://jsfiddle.net/9odLnh7r/
The question is note very clear, but as far as I understand you need to add this css ruleset to your image:
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
/* display: none; */
overflow: hidden;
outline: 0;
}
.modal-area {
position: absolute;
top: 50%;
left: 50%;
width: 50%;
height: 50%;
transform: translate(-50%, -50%);
margin: 0 auto;
padding: 30px;
background-color: blueviolet;
border-radius: 4px;
box-shadow: 0 0 50px black;
overflow: hidden;
}
.modal-area img {
margin-left: auto;
margin-right: auto;
}
.modal-crop {
position: relative;
background-color: aliceblue;
left: 0;
right: 0;
top: 0;
margin-left: auto;
margin-right: auto;
width: 200px;
height: 200px;
opacity: 0.2;
z-index: 2;
}
.centerMe {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="modal">
<div class="modal-area">
<div class="modal-crop"></div>
<img class="centerMe" src="http://www.budgetstockphoto.com/bamers/stock_photo_spectrum.jpg">
</div>
</div>
I am trying to achieve below layout using bootstrap. I am able to do it otherwise but problem occurs on small screens where the middle most box(smallest one) will not appear where it should be, it goes up. so want to try using bootstrap.enter image description here
how about this solution. I have made few changes in your code.
please have look carefully
DEMO
* {
margin: 0;
padding: 0;
box-sizing: border-box;
border: 0.5px solid black;
}
.top-cover {
width: 100%;
height: 300px;
background-image: url('IMG_0044.JPG');
background-size: cover;
background-position: center;
}
.main-cover {
width: 90%;
position: relative;
height: 700px;
left: 5%;
top: -60px;
z-index: 1;
background-color: brown;
border: solid 5px green;
}
#dp {
width: 20%;
position: absolute;
left: 40%;
top: -10%;
z-index: 2;
display: none;
}
.dp-pic {
width: 20vw;
min-width: 75px;
max-width: 150px;
position: absolute;
left: 40%;
top: -8%;
}
<div class="top-cover">
</div>
<div class="main-cover">
<div id="dp"></div>
<img class="dp-pic" src="https://camo.githubusercontent.com/9e39276ad39fe3cda7ac61dd0f1560dc5ad1ab95/68747470733a2f2f646c2e64726f70626f7875736572636f6e74656e742e636f6d2f752f3737343835392f4769744875622d5265706f732f7465737464756d6d792f63726173687465737464756d6d792e6a7067">
</div>
Following should generate your desired layout. Add borders or other fancy styles as you want.
body {
margin: 0;
padding: 0;
}
.top-cover {
width: 100%;
height: 300px;
background: #eee;
}
.main-cover {
width: 90%;
height: 700px;
position: relative;
margin: -60px auto 0;
z-index: 1;
background-color: brown;
}
#dp {
width: 20%;
position: absolute;
left: 50%;
margin: -10% 0 0 -10%;
z-index: 2;
}
.dp-pic {
width: 100%;
}
<div class="top-cover">
</div>
<div class="main-cover">
<div id="dp">
<img class="dp-pic" src="https://camo.githubusercontent.com/9e39276ad39fe3cda7ac61dd0f1560dc5ad1ab95/68747470733a2f2f646c2e64726f70626f7875736572636f6e74656e742e636f6d2f752f3737343835392f4769744875622d5265706f732f7465737464756d6d792f63726173687465737464756d6d792e6a7067">
</div>
</div>
I drew a cloud via CSS3 using different div tags I am trying to add a border to the whole shape but I am having trouble since every shape get its own border how can I apply a border to the whole cloud?
HTML:
<div id="cloud">
<div id="bottom_c"></div>
<div id="right_c"></div>
<div id="left_c"></div>
</div>
CSS:
* {
margin: 0;
padding: 0;
border: 0;
}
body{
background-color: #4ca3ff;
}
#cloud {
position: absolute;
}
#bottom_c {
position: relative; top: 200px; left: 500px;
width: 350px;
height: 150px;
background-color: #fff;
border-radius: 100px;
border: solid 5px black;
z-index: 100;
}
#right_c{
position: absolute; top: 140px; left: 640px;
width: 150px;
height: 150px;
border-radius: 100%;
background-color: #fff;
border: solid 5px black;
}
#left_c{
position: absolute; top: 170px; left: 550px;
width: 100px;
height: 100px;
border-radius: 100%;
background-color: #fff;
border: solid 5px black;
}
Image:
You can do it without any additional elements. Just use the ::before and ::after pseudo-elements with the same size and round shape as the top cloud bubbles. z-index keeps everything in the right layer.
Demo:
Output:
CSS:
body{
background-color: #4ca3ff;
}
#cloud {
height: 230px;
margin: 40px;
position: relative;
width: 400px;
}
#cloud div {
border: solid 5px black;
}
#bottom_c {
background-color: #fff;
border-radius: 100px;
height: 150px;
position: absolute;
top: 100px;
width: 350px;
z-index: 0;
}
#right_c{
background-color: #fff;
border-radius: 100%;
height: 150px;
left: 140px;
position: absolute;
top: 40px;
width: 150px;
z-index: -1;
}
#left_c{
background-color: #fff;
border-radius: 100%;
height: 100px;
left: 50px;
position: absolute;
top: 70px;
width: 100px;
z-index: -1;
}
#cloud::before {
background-color: white;
border-radius: 50%;
content: '';
height: 100px;
left: 55px;
position: absolute;
top: 75px;
width: 100px;
z-index: 1;
}
#cloud::after {
position: absolute; top: 45px; left: 145px;
background-color: white;
border-radius: 50%;
content: '';
width: 150px;
height: 150px;
z-index: 1;
}
HTML:
<div id="cloud">
<div id="bottom_c"></div>
<div id="right_c"></div>
<div id="left_c"></div>
</div>
Thank you for the original solution! I needed to create multiple clouds and dynamically resize and recolor them, so I adapted to original solution as follows:
I made the clouds resizable by using percentages values for the height, width, top and left properties. The .cloud class uses padding-top to adjust the height of the cloud relative to the cloud's width.
I made the :before and :after pseudo-elements divs.
I changed the id selectors to class selectors
And I reorganized the properties so they're easier to read.
I hope this helps someone. Here's the code:
Output
I don't yet have the reputation to post images :/. So here's a link to the output: http://imgur.com/nN9dBiQ
CSS:
.cloud {
position: relative;
width: 100%;
padding-top: 57.5%;
box-sizing: border-box;
}
.cloud_bottom,
.cloud_left,
.cloud_right {
border: solid 5px black;
}
.cloud_bottom,
.cloud_left,
.cloud_right,
.cloud_leftCircle,
.cloud_rightCircle {
background-color: #fff;
}
.cloud_bottom {
position: absolute;
top: 43.48%;
height: 65.2%;
width: 87.5%;
border-radius: 100px;
z-index: 0;
}
.cloud_left {
position: absolute;
top: 30.43%;
left: 12.5%;
height: 43.48%;
width: 25%;
border-radius: 100%;
z-index: -1;
}
.cloud_right {
position: absolute;
top: 17.39%;
left: 35%;
height: 65.2%;
width: 37.5%;
border-radius: 100%;
z-index: -1;
}
.cloud_leftCircle {
position: absolute;
top: 32.61%;
left: 13%;
height: 43.48%;
width: 25%;
border-radius: 50%;
z-index: 1;
}
.cloud_rightCircle {
position: absolute;
top: 23.48%;
left: 35%;
height: 65.21%;
width: 37.5%;
border-radius: 50%;
z-index: 1;
}
HTML:
<div class="firstCloud cloud">
<div class="cloud_bottom"></div>
<div class="cloud_left"></div>
<div class="cloud_right"></div>
<div class="cloud_leftCircle"></div>
<div class="cloud_rightCircle"></div>
</div>
<div class="secondCloud cloud">
<div class="cloud_bottom"></div>
<div class="cloud_left"></div>
<div class="cloud_right"></div>
<div class="cloud_leftCircle"></div>
<div class="cloud_rightCircle"></div>
</div>
JavaScript:
function updateCloudColor(cloudElement, color) {
cloudElement.children().css("background-color", color);
}
$(window).load(function () {
updateCloudColor($(".firstCloud"), "red");
updateCloudColor($(".secondCloud"), "blue");
});