I have used bellow css for image.
.single_comitment img {
background: #eee none repeat scroll 0 0;
width: 200px;
height: 200px;
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
border-radius: 500px;
left: 5%;
padding: 10px;
position: relative;
top: 70px;
}
But image border radius perfectly not working in IE11.
Instead of using background-color and padding, why not use border:
.single_comitment img {
border: 10px solid #eee;
width: 200px;
height: 200px;
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
border-radius: 500px;
left: 5%;
position: relative;
top: 70px;
overflow:hidden
}
<div class="single_comitment">
<img src="http://lorempixel.com/800/800/city/1/">
</div>
Related
Say I have the following CSS circle but want to change the width & height to 320px each. How would I properly scale -moz-border-radius, -webkit-border-radius, border-radius ?
Seems like if I just make all the border-radii 320px the circle shape is maintained but not sure if this is the correct method.
#circle {
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
If you have a square of any width/height, simply set border-radius: 50%; This should then give a circle no matter how the element is scaled.
#circle1 {
border-radius: 50%;
width: 100px;
height: 100px;
background-color: #E74C3C;
}
#circle2 {
border-radius: 50%;
width: 200px;
height: 200px;
background-color: #F1C40F;
position: absolute;
left: 125px;
}
#circle3 {
border-radius: 50%;
width: 300px;
height: 300px;
background-color: #2ECC71;
position: absolute;
left: 225px;
}
<div id="circle1" />
<div id="circle2" />
<div id="circle3" />
I have 2 DIVs, that I want to center and overlap. The smaller one is to lay on top of the bigger one.
It works great at full-screen, but if I decrease the browser size, the top/smaller one moves to the left.
<div style="position: relative; top: 160px; border: thin solid gray; border-radius: 10px; width: 300px; height: 64px; margin-left: auto; margin-right: auto; z-index: 1; background: url(...); background-repeat:no-repeat; background-position:top; background-color: #4b2f84"> </div>
<div style="position: absolute; top: 200px; left: 15%; width: 70%; background: white; border: thin solid gray; border-radius: 10px; height: 500px; padding: 50px 30px; margin: auto">something
</div>
I like to use left: 50%; combined with transform: translateX(-50%); when trying to center and overlap content.
The content is offset 50% to the left, and then -50% of its width to the left.. or (this.left == parent.x + parent.width* 0.5 - this.width*0.5)
#div1 {
position: relative;
top: 160px;
border: thin solid gray;
border-radius: 10px;
width: 300px;
height: 64px;
margin-left: auto;
margin-right: auto;
z-index: 1;
background: url(...);
background-repeat: no-repeat;
background-position: top;
background-color: #4b2f84
}
#div2 {
position: absolute;
top: 200px;
left: 50%;
transform: translateX(-50%);
width: 70%;
background: white;
border: thin solid gray;
border-radius: 10px;
height: 500px;
padding: 50px 30px;
margin: auto
}
<div id="div1"> </div>
<div id="div2">something</div>
Alright so I am trying to a basic overlay over an image but it seems that I am doing something wrong, instead of being width and height 100% of the IMG, it is width and height 100% of the entire page
HTML
<div id="main_BodyNews">
<img src="img/main.png" alt="mainNews" />
<div class="overflow-box"></div>
</div>
And the CSS
#main_BodyNews {
width: 50%;
height: 300px;
background-color: #F2C68C;
margin-top: 50px;
margin-left: 20px;
float: left;
border-radius: 5px;
border: 1px solid #F2C68C;
}
#main_BodyNews img {
width: 100%;
height: 100%;
border-radius: 5px;
background-color: 1px solid #F2C68C;
position: relative;
}
.overflow-box {
position:absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
background-color:rgba(255,255,0,0.5);
width: 100%;
height: 100%;
}
JS fiddle: https://jsfiddle.net/0utbjwo0/
you should add position: relative; to your absolute parent div
#main_BodyNews{
position: relative;
}
#main_BodyNews {
width: 50%;
height: 300px;
background-color: #F2C68C;
margin-top: 50px;
margin-left: 20px;
float: left;
border-radius: 5px;
border: 1px solid #F2C68C;
position: relative;
}
#main_BodyNews img {
width: 100%;
height: 100%;
border-radius: 5px;
background-color: 1px solid #F2C68C;
position: relative;
}
.overflow-box {
position:absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
background-color:rgba(255,255,0,0.5);
}
<div id="main_BodyNews">
<img src="img/main.png" alt="mainNews" />
<div class="overflow-box"></div>
</div>
You can use absolute. It's just that you are setting
width: 100%;
height: 100%;
Remove that and set your margin-top and margin left. You can set your width and height for the actually dimensions of your image. If you do this, you wont have to exactly keep your overlay div within your image div.
Here is an example of one I have made for my site.
#overlay {
margin-top: 60px;
margin-left: 88px;
height: 30px;
width: 85px;
position: absolute;
}
You can temporarily set a background-color for it so that you can get a good idea of where it is placed on your page. Then adjust your margins accordingly.
It's because the position: absolute has top, right, bottom, left value of 0. You don't need to specify the height and width. To make it resize on it's parent size. You need position: relative on parent element.
#main_BodyNews {
width: 50%;
height: 300px;
background-color: #F2C68C;
margin-top: 50px;
margin-left: 20px;
float: left;
border-radius: 5px;
border: 1px solid #F2C68C;
position: relative;
}
#main_BodyNews img {
width: 100%;
height: 100%;
border-radius: 5px;
background-color: 1px solid #F2C68C;
position: relative;
}
.overflow-box {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
background-color: rgba(255, 255, 0, 0.5);
}
<div id="main_BodyNews">
<img src="img/main.png" alt="mainNews" />
<div class="overflow-box"></div>
</div>
for example i designed a div for border style and i designed another div to center of that , how can i set it to center of larger div?
.Profile_Photo_Border {
border: 3px solid #052d31;
height: 90px;
width: 90px;
border-radius: 3px;
}
.Profile_Photo {
background-color:#005e67;
height: 80px;
width: 80px;
border-radius: 3px;
alignment-adjust:middle;
text-align:center;
}
<div class="Profile_Photo_Border">
<div class="Profile_Photo"></div>
</div>
Add the following style display: flex; to the parent div and
margin: 0 auto;
align-self: center;
to the child div to align it center horizontally as well as vertically.
So the styles become:
.Profile_Photo_Border {
border: 3px solid #052d31;
height: 90px;
width: 90px;
border-radius: 3px;
display: flex;
}
.Profile_Photo {
background-color:#005e67;
height: 80px;
width: 80px;
border-radius: 3px;
alignment-adjust:middle;
text-align:center;
margin: 0 auto;
align-self: center;
}
See the fiddle: "https://jsfiddle.net/ukgnnp4k/"
See the screenshot:
Try changing your CSS to:
.Profile_Photo_Border {
border: 3px solid #052d31;
height: 90px;
width: 90px;
border-radius: 3px;
position: relative;
}
.Profile_Photo {
background-color: #005e67;
height: 80px;
width: 80px;
border-radius: 3px;
text-align:center;
position: absolute;
top: 50%;
left: 50%;
margin-left: -40px;
margin-top: -40px;
}
This link also might be helpful:
https://css-tricks.com/centering-css-complete-guide/
Your second div has 10px size lesser than the first one in height and width.
So to centralize the middle one add margin:5px;to the second div, Profile_Photo.
You can add this css.
.Profile_Photo_Border {
border: 3px solid #052d31;
height: 90px;
width: 90px;
border-radius: 3px;
}
.Profile_Photo {
background-color:#005e67;
height: 80%;
width: 80%;
border-radius: 3px;
text-align:center;
margin:10px auto;
}
Use this http://jsfiddle.net/18yao91v/244/
.Profile_Photo {
background-color:#005e67;
height: 80px;
width: 80px;
border-radius: 3px;
margin: 5px auto;
}
If the outer div and inner div has fixed width, then you can use css position to align inner element.
See below CSS.
.Profile_Photo_Border {
border: 3px solid #052d31;
height: 90px;
width: 90px;
border-radius: 3px;
position: relative;
}
.Profile_Photo {
background-color:#005e67;
height: 80px;
width: 80px;
border-radius: 3px;
/* alignment-adjust:middle; No need to use this. */
text-align:center;
position: absolute;
top: 5px;
left: 5px;
}
<div class="Profile_Photo_Border">
<div class="Profile_Photo"></div>
</div>
Here are my 2 cents, I used the display:table.cell css style:
.Profile_Photo_Border {
border: 3px solid #052d31;
height: 150px;
width: 150px;
border-radius: 3px;
display: table-cell; /*added*/
vertical-align: middle; /*added*/
}
.Profile_Photo {
background-color: #005e67;
height: 80px;
width: 80px;
border-radius: 3px;
text-align: center; /*added*/
margin: auto; /*added*/
}
Here's another way of centering the div inside a div irrespective of width and height - Codepen
.Profile_Photo_Border {
border: 3px solid #052d31;
height: 90px;
width: 90px;
border-radius: 3px;
position: relative;
}
.Profile_Photo {
background-color:#005e67;
height: 80px;
width: 80px;
border-radius: 3px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
And a guide from CSS Tricks for centering the div.
Another guide from CSS Tricks on Flexbox which is another better way.
Hope this might help you understand better.
I know how to use border-(bottom|top)-(left|right)-radius: XX;
is there any way to create a curve that changes direction halfway through?
What about overlaying one <div> on top of another like this:
<div class="outer">
<div class="inner-bottom"></div>
<div class="inner-top"></div>
</div>
CSS:
div.outer {
position: relative;
}
div.inner-top {
position: absolute;
width: 200px;
height: 100px;
background-color: #ABC;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}
div.inner-bottom {
position: absolute;
width: 200px;
height: 80px;
top: 10px;
background-color: #ABC;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
Fiddle