I can't make one circle center inside another.
I can't understand whats wrong.
I have also tried doing it with a square, and that wont work too.
Heres my jsfiddle.
.circle {
width: 170px;
height: 170px;
border-radius: 85px 85px 85px 85px;
background: lime;
}
.circle-inner {
width: 150px;
height: 150px;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
border-radius: 75px 75px 75px 75px;
background: red;
You could give same size to both containers and add a padding to the wrapper like padding:10px;. DEMO. It is the most simple way i think of.
.circle {
width: 150px;
height: 150px;
padding:10px;
border-radius: 85px 85px 85px 85px;
background: lime;
}
Change your CSS to this:
Make your circles same size and add padding to containing circle
/*My css*/
.circle {
width: 150px;
height: 150px;
border-radius: 50%;
background: lime;
padding:20px;
}
Add this to your code for your inner circle:
position:relative;
top:10px;
Note that you can also make your code a lot cleaner by using shorthand:
Change border-radius: 75px 75px 75px 75px; into border-radius: 75px;
The same goes for .circle
Here's another option using:
.circle-inner {
margin: auto;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
http://jsfiddle.net/John_C/x683mtbh/
Related
I am finding it hard to fit an image inside a Div that contain a text. Everytime I try to get it to fit inside the boundaries of the super div, it simply goes out of bounds regardless of what I use from the css side. can anyone tell me what I am doing wrong?
.justRight {
float: right;
max-height: 100%;
max-width: 100%;
margin-bottom: 40px;
margin-right: 50px;
background-image: url(https://internal.bs.fb.ac.uk/modules/2017-
18/bsl/css/sign_language.png);
background-size: cover;
background-repeat: no-repeat;
}
.jas {
background-color: white;
border: 1px outset blue;
position: absolute;
margin-left: 20px;
border-top: 40px solid blue;
border-right: 2px outset blue;
margin-top: 10px;
margin-right: 20px;
height: 80px;
padding-left: 10px;
width: 96.3%;
}
<div class="jas">
<h1>Sign Language</h1>
<div class="justRight">
</div>
</div>
By saying height: 80px to parent (.jas), you are restricting the parent div's height to 80px. So it wont go beyond. So remove height of parent(.jas). Set a height to the child instead(.justRight).
Not sure why you used float: right value to the child(.justRight). Please remove if it is unnecessary.
Codepen: https://codepen.io/johnsackson/pen/KRdvMQ
* {
box-sizing: border-box;
}
.justRight {
height: 100px;
max-width: 100%;
margin-bottom: 10px;
background: url(https://placehold.it/1920x200) 0 0 no-repeat;
background-size: cover;
}
.jas {
background-color: white;
border: 1px outset blue;
/* position: absolute; */ /* use if only needed */
margin: 10px 0;
border-top: 40px solid blue;
border-right: 2px outset blue;
padding: 0 10px;
width: 100%;
}
Hope this helps.
Your problem is that the h1 tag is on position: relative. Changing it would solve your issues.
h1 {position: absolute}
.box{
opacity: 0.8;
position: absolute;
top: 28px;
left: 45px;
width: 280px;
background: green
}
.box:before{
content: '';
border: 5px solid pink;
margin: 10px;
width: 300px;
}
Tried to make the box with border in the blank gap between box and border. I tried both border in box or :before but the borders are not showing outside the box along with white space.
Appreciate help.
The cleanest way to do it is to use the following CSS:
#box{
position:relative;
z-index:10;
padding:0px;
background:#fff;
border:12px solid #390;
width: 100px;
height: 100px;
}
#box:before {
content:"";
display:block;
position:absolute;
z-index:-1; top:2px;
left:2px;
right:2px;
bottom:2px;
background-color: pink
}
See the DEMO here: http://jsfiddle.net/fvHJq/1/
Depending on your needs, a simple outline might help:
.box {
width: 300px;
height: 300px;
background: #1baaaa;
border: 10px solid #fff;
outline: 5px solid #ff7474;
}
Fiddle
#container {
width: 1000px;
margin: 0 auto;
background-color: #000000;
}
#header {
width: 884px;
height: 113px;
position: relative;
margin: auto;
background-image: url(mybanner.png);
background-repeat: no-repeat;
border-bottom: 5px solid #333;
}
#leftnav{
float: left;
width: 140px;
height: 800px;
background-color: #F8AA3C;
border-right: 1px dashed #694717;
}
#body{
width: 550px;
height: 800px;
background-color: #333;
margin: auto;
padding: 10px 0px 0px 10px;
}
Missing information such as what is your DOM structure and what the element that trying to put left to some container, I saw you used float:left style so my guess it is some block element, in that case I can only suggest adding position: relative style to your leftnav element.
I wanna place a profile picture that has a width of 200px and an unknown height, inside a div container. The div is 150px x 150px. The img should be centered horizontal with the bleed hidden on each side. I cannot get this to work, the unknown height is messing it up, since the way the img width will appear is depending on the height. - A landscape img will get a higher width to fill out the height difference and keep the img in proportion. If it's a portrait image, the width should be 150px as the div...
Watch image: http://s18.postimage.org/52hfcc5h3/Sk_rmavbild_2012_06_26_kl_19_12_49.png
#profilePicture {
display: block;
float: left;
width: 150px;
height: 150px;
overflow: hidden;
position: relative;
margin: 0 auto;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#profilePicture img {
min-width: 150px;
min-height: 150px;
left: 50%;
margin-left: -100px;
top: 50%;
margin-top: -100px;
position:absolute;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Have you considered using background-images? It would make it much easier.
.img {
overflow: hidden;
background-image: url('/xyz.jpg');
background-size: cover;
background-position: center;
}
Here's The fiddle -> http://jsfiddle.net/haNj3/1/
I think what you want to do is this.
.main{
width:150px;
margin: 0 auto;
overflow:visible;
position: relative;
height: 200px;
outline: 1px solid blue;
}
img.absolute{
width: 200px;
left: 50%;
margin-left: -100px;
margin-top: 0;
position:relative;
outline: 1px solid red;
}
I think there is no need to use absolute positioning in this case.
Is there any variant to draw a circular segment using just CSS/CSS3?
I need that green part of circle.
I was trying this:
div {
width: 86px;
height: 22px;
background-color: green;
border-bottom-right-radius: 42px;
border-bottom-left-radius: 42px;
}
<div></div>
But it doesn't look like a circular segment.
The width and height of the div should be same to produce a circle.
eg: http://jsfiddle.net/wGzMd/
Here is the css:
div{
position: absolute;
top: 50px;
left: 50px;
width:100px;
height:100px;
border: 1px solid green;
background: green;
border-radius: 360px;
}
EDIT (for segment):
http://jsfiddle.net/wGzMd/3/
CSS:
div.outerClass{
position: absolute;
left: 50px;
top: 50px;
height: 25px;
overflow: hidden;
}
div.innerClass{
width:100px;
height:100px;
border: 1px solid green;
border-radius: 360px;
}
HTML:
<div class="outerClass"><div class="innerClass"></div></div>
Hey check to this site http://css-tricks.com/examples/ShapesOfCSS/
and this http://www.russellheimlich.com/blog/pure-css-shapes-triangles-delicious-logo-and-hearts/
and this
http://www.css3shapes.com/
Css
#oval {
width: 86px;
height: 22px;
background: green;
-moz-border-radius: 50px / 25px;
border-radius: 100px 100px 0 0 / 47px;
-webkit-border-radius: 100px 100px 0 0 / 47px;
}
HTML
<div id="oval"></div>
Live demo http://jsfiddle.net/carTT/
and create any shape in pure css as like you .................
Half circle:
http://www.paulund.co.uk/how-to-create-different-shapes-in-css
div {
height:45px;
width:90px;
border-radius: 0 0 90px 90px;
-moz-border-radius: 0 0 90px 90px;
-webkit-border-radius: 0 0 90px 90px;
background:green;}