I'm triying to position a point inside a circle to practice CSS position, so I declared .circle with position: relative and inside the point with position: absolute. But I get the point positionated in relation to the body.
.circle {
width: 600px;
height: 600px;
border-radius: 50%;
background-color: grey;
position: relative;
}
.point {
position: absolute;
top: 0px;
left: 100px;
background-color: black;
width: 12px;
height: 12px;
border-radius: 50%;
}
<div class="circle">
<div class="point"></div>
</div>
.point IS relative to the .circle and not body
My suspicion is that you think that .circle for browser is circle too but in fact it is rectangle and only presented to you as circle because of border-radius property. It can be seen when you insect this element.
Blue rectangle is your .circle element and .point is positioned relative to it just like you told it to.
Its working right. If you put position: relative in .circle the position, of point will be relative to circle container.
See Modified Example of your code below. I have set point's position (left and top) to 100%, and removed border-radius. See the point is positioned at bottom right corner of square.
<style>
.circle{
width: 600px;
height: 600px;
background-color: grey;
position: relative;
}
.point{
position: absolute;
top:100%;
left:100%;
background-color: black;
width: 12px;
height: 12px;
border-radius:50%;
}
</style>
<div class="circle">
<div class="point"></div>
</div>
Now, see the position of point, when you remove position: relative from .circle
<style>
.circle{
width: 600px;
height: 600px;
background-color: grey;
}
.point{
position: absolute;
top:100%;
left:100%;
background-color: black;
width: 12px;
height: 12px;
border-radius:50%;
}
</style>
<div class="circle">
<div class="point"></div>
</div>
Related
I am trying to make basic CSS challenges. In this case I have an image that I have given a circle, but I do not know what to do so that it retains its aspect ratio, does not fully cover the entire circle and is centered. This is the code I have. I want to learn a way to achieve this effect with any image of any resolution.
Desired effect:
img{
border-radius:50%;
width:300px;
height:300px;
border: solid 1px black;
}
.image_container{
display:flex;
justify-content:center;
align-items:center;
}
<div class="image_container">
<img src="https://danikalaw.com/wp-content/uploads/2017/08/r.png">
</div>
Set the sizing condition on the container rather than the image.
img{
width: 100%;
height: auto;
}
.image_container{
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 300px;
border: 1px solid black;
border-radius: 50%;
overflow: hidden;
padding: 30px;
}
<div class="image_container">
<img src="https://danikalaw.com/wp-content/uploads/2017/08/r.png">
</div>
You are using CSS on img that should be on .image-container. Then, you can set width for image enough to be centered and not override the circle, like this:
.image_container {
width:300px;
height:300px;
border-radius:50%;
border: solid 1px black;
display:flex;
justify-content:center;
align-items:center;
}
img {
width: 70%;
}
Maybe something like that?
* {
box-sizing: border-box;
}
img {
padding: 30px;
position: absolute; top: 50%; left: 0;
transform: translateY(-50%);
width: 100%;
}
.image_container {
border-radius: 50%;
border: solid 1px black;
overflow: hidden;
position: relative;
width: 300px; height: 300px;
}
<div class="image_container">
<img src="https://danikalaw.com/wp-content/uploads/2017/08/r.png">
</div>
Outline
Wrap <img> tag in a block level tag and then wrap that tag with another block level tag:
<section class="frame">
<figure class="logo">
<img class="image">
...
Assign the top ancestor tag (demo. section.frame)
position: relative;
width: 50vw;
height: 50vw;
Basic CSS positioning -- parent is relative -- child is absolute -- child references its relative parent's area for X, Y position. The value: 50vw is equivalent to 50% of viewport width. This makes the tag responsive and it will dynamically change it's dimensions and maintain aspect ratio whenever the viewport width changes.
Assign the parent tag of <img> tag (demo. figure.logo)
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
This positions it to the edges of section.frame.
Assign the <img> the following:
display: block;
width: 100%;
height: 100%;
object-fit: contain;
This will position img.image to the edges of figure.logo
Added a :hover effect to show how the img tag fits within the figure and section tags. Each tag is assigned border-radius: 50% so that there are no square corners overlapping the visible border on section.frame.
.frame {
position: relative;
width: 50vw;
height: 50vw;
border: 3px solid #B9BBC0;
border-radius: 50%;
}
.logo {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 50%;
}
.image {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 50%;
}
.frame:hover {
background-color: #000;
}
<section class='frame'>
<figure class='logo'>
<img class='image' src='https://danikalaw.com/wp-content/uploads/2017/08/r.png'>
</figure>
</section>
References
Viewport CCS Concepts
object-fit: contain property
position property
I want to make a div something like the below image in my website in css. I tried to round bottom borders with border-bottom-right-radius: 50%;, but it curves too much.
please help me to make it.
You can try stacking divs, set a container with overflow: hidden and then position 2 divs that are much bigger and have rounded border.
.container{
width: 100%;
height: 300px;
overflow: hidden;
position: relative;
}
.inner, .outer{
position: absolute;
width: 200%;
height: 1000px;
border-radius: 100%;
border: 4px solid black;
left: -50%;
/* only for the inner - will be overwritten in the next section*/
top: -900px;
background-color: white;
z-index: 3;
}
.outer{
top: -750px;
background-color: #3E9AD2;;
z-index: 2;
}
<div class="container">
<div class="inner"></div>
<div class="outer"></div>
</div>
i try to make that in css
http://prntscr.com/l19jl9
but i only sucsses to
http://prntscr.com/l19juk
https://prnt.sc/l19itx
this my code:
.halfCircleLeft{
height:90px;
width:45px;
border-radius: 90px 0 0 90px;
background:green;
}
how i can do that?
You can set overflow: hidden to the container and make the inner div a big circle, it will give you the effect you want.
.cont{
position: relative;
overflow: hidden;
width: 200px;
height: 100px;
background-color: #e5e5e5;
}
.round-back{
top: -100px;
left: 50px;
position: absolute;
border-radius: 50%;
width: 300px;
height: 300px;
background-color: red;
}
<div class="cont">
<div class="round-back"></div>
</div>
This isn't exactly the shape that you have in your image, but it's simple and it's likely close enough:
#box {
border:1px solid #000;
border-radius: 10px 0px 0px 10px / 50% 0% 0% 50%;
width: 200px;
height: 100px;
background-color: #ccc;
}
<div id="box"></div>
The above solution uses elliptical border-radius, which is specified using a slash (/).
Another approach here is much closer to your original image, but it takes significantly more code to implement, and it's quite a bit more brittle too to customise:
#wrapper {
overflow: hidden;
width: 200px;
}
#box::before {
position: relative;
display: block;
content: "";
margin-left: -20px;
background: #ccc;
height: 400px;
width: 400px;
margin-top: -75%;
border-radius: 50%;
z-index: -10;
}
#box {
float: left;
position: relative;
margin-left: 20px;
width: 200px;
height: 100px;
background-color: #ccc;
}
#content {
position: absolute;
height: 100%;
width: 100%;
top: 0px;
}
<div id="wrapper">
<div id="box">
<div id="content">
</div>
</div>
</div>
This approach uses an oversized circle, which is then clipped by a #wrapper div using overflow: hidden;. The #content div isn't strictly necessary for the shape, but it may make it easier to position something inside the box.
I'm trying to create a wrapper with in it 4 divs next to each other (two next to each other and below them the remaining two). However the problem is, is that only the fourth one is showing itself. I've tried setting the overflow: hidden, toy with the display property and also tried to use float:left and float:right. Yet so far no luck.
This is the css I'm using:
html, body{
width: 100%;
height: 100%;
}
#wrapper{
width: 60%;
height: 60%;
top: 20%;
left: 20%;
position: relative;
overflow: hidden;
border: 1px solid #000;
}
#one{
background-color: red;
width: 50%;
position: absolute;
height: 50%;
}
#two{
background-color: green;
width: 50%;
position: absolute;
height: 50%;
}
#three{
background-color:blue;
width: 50%;
position: absolute;
height: 50%;
}
#four{
background-color: yellow;
width: 50%;
position: absolute;
height: 50%;
}
and this is the html code that goes with it:
<html><head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head><body>
<div id="wrapper">
<div id="one">a</div>
<div id="two">b</div>
<div id="three">c</div>
<div id="four">d</div>
</div>
</body></html>
Can anyone figure out why the yellow (four) div is the only one showing itself, even if I let it float right and others left? (Besides I'm also wondering why there are scrollbars appearing because of the width: 100% and height: 100% in the html,body part.)
Float your inner elements. See here:
http://jsfiddle.net/dkGBA/1/
Main changes:
.child
{
width: 50%;
height: 50%;
float: left;
}
<div id="one" class="child">a</div>
<div id="two" class="child">b</div>
<div id="three" class="child">c</div>
<div id="four" class="child">d</div>
That's because you set the position to absolute on all four of your divs. You then have to position them using top, bottom, right, or left. When you position an element absolutely, it gets taken out of the flow of the document.
jsFiddle example
CSS
#one{
background-color: red;
width: 50%;
position: absolute;
height: 50%;
}
#two{
background-color: green;
width: 50%;
position: absolute;
height: 50%;
right:0;
top:0;
}
#three{
background-color:blue;
width: 50%;
position: absolute;
height: 50%;
left:0;
bottom:0;
}
#four{
background-color: yellow;
width: 50%;
bottom:0;
right:0%;
position: absolute;
height: 50%;
}
A second option is to remove the absolute positioning, and float them all left.
jsFiddle example
CSS:
#one,#two,#three,#four {
float:left;
}
Don't use position for this, but instead use floats.
Example:
http://jsbin.com/ucofed/edit
How do I position an element absolutely from the top, but relatively from the sides.
I.e., the object needs to be Xpx. from the top (absolute) and stay centered from the sides.
I tried the following CSS, but it was not working.
position: absolute; top: 105px;
margin: 0 auto;
Thank you.
I would place it inside a container that had absolute positioning, and then make it's postition relative to that.
#container { position: absolute; top: 105px; }
#box { position: relative; margin: auto; }
Then just:
<div id="container">
<div id="box">
</div>
</div>
This is just off the top of my head.
Live Demo
<style type="text/css">
div { padding: 5px; }
#outer {
border: 1px dotted #F00;
position: absolute;
top: 105px;
right: 0px;
left: 0px;
}
#inner {
border: 1px dotted #0F0;
margin: 0 auto;
text-align: center;
width: 200px;
}
</style>
<div id="outer">
<div id="inner">Banner</div>
</div>
If it has a known, fixed width, set the margin-left to negative half the overall width:
#banner { position:absolute; width:400px; left:50%; margin-left:-200px }