I need to know how to cut that gray part from the blue box.
The red arrows on the image bellow show which part I would like to cut from the blue box. This is the code I have:
.father {
height: 400px;
width: 400px;
margin: 150px auto;
position: relative;
}
.border {
position: relative;
bottom: 50px;
margin: auto;
border-radius: 50%;
width: 96%;
height: 30%;
background-color: #DDD;
}
<div class="father">
<div class="border"></div>
</div>
From what I understand you would like to cut off the grey part outside the blue area. If so, here's how you do it.
.father {
height: 400px;
width: 400px;
margin: 150px auto;
position: relative;
background: lightblue;
overflow: hidden;
}
.border {
position: relative;
bottom: 50px;
margin: auto;
border-radius: 50%;
width: 96%;
height: 30%;
background-color: #DDD;
z-index: 1;
}
<div class="father">
<div class="border"></div>
</div>
Can you see this approach:
border-top-left-radius: 8px;
border-top-right-radius: 8px;
.father {
height: 400px;
width: 400px;
margin: 150px auto;
position: relative;
background: lightblue;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.border {
position: relative;
bottom: 50px;
margin: auto;
border-radius: 50%;
width: 100%;
height: 30%;
background-color: #DDD;
}
<div class="father">
<div class="border"></div>
</div>
Are you looking for this?
.father {
height:400px;
width:400px;
margin:150px auto;
position:relative;
background:green;
}
.border {
position:relative;
bottom:50px;
margin:auto;
border-radius:50%;
width:96%;
height:30%;
background-color:#DDD;
z-index:-9;
}
<div class="father">
<div class="border"></div>
</div>
.father
{
height: 400px;
width: 400px;
margin: 150px auto;
position: relative;
background: #04aada;
border-radius: 50px 50px 0 0;
}
.border
{
position: relative;
bottom: 25px;
margin: auto;
border-radius: 50%;
width: 96%;
height: 30%;
background-color: #fff;
z-index: 1;
box-shadow: 0px -4px 0px #04aada;
}
<div class="father">
<div class="border"></div>
</div>
Related
I am using Angular5, and I have tried to set margin: 0 auto as well as setting left: 50% and top: 50% but the margin doesn't do anything and setting left to 50% only aligns the side of the div to the middle and doesn't move the div down at all.
How do I align the div #loading to the middle?
My code:
#loading, #outlet {
width: 100%;
height: 100%;
position: absolute;
}
#loading{
z-index: 10;
height: 100px;
width: 200px;
background-color: rgba(255,255,255,0.85);
padding: 40px;
border: 1px solid #d3d3d3;
border-radius: 5px;
margin: 0 auto;
margin-bottom:10px;
box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
}
#app{
position: relative;
}
<div id="app">
<div id="outlet">
<router-outlet></router-outlet>
</div>
<div id="loading" *ngIf="data.Loading">
<h2>Loading...</h2>
</div>
</div>
I am also overlaying the #loading div over #outlet.
The problem you are having is because of the position: absolute thing that you have assigned to both #loading and #outlet. You can solve the issue with this code. Try this.
<div id="app">
<div id="wrap">
<div id="outlet">
<router-outlet></router-outlet>
</div>
<div id="loading" *ngIf="data.Loading">
<h2>Loading...</h2>
</div>
</div>
</div>
#wrap {
margin: 0 auto;
width: 200px;
}
#loading, #outlet {
width: 100%;
height: 100%;
position: absolute;
}
#loading{
z-index: 10;
height: 100px;
width: 200px;
background-color: rgba(255,255,255,0.85);
padding: 40px;
border: 1px solid #d3d3d3;
border-radius: 5px;
margin: 0 auto;
margin-bottom:10px;
box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
}
#app{
position: relative;
width: 100%;
}
To align the text in the center, use text-align: center:
#loading, #outlet {
width: 100%;
height: 100%;
}
#loading{
z-index: 10;
height: 100px;
width: 200px;
background-color: rgba(255,255,255,0.85);
padding: 40px;
border: 1px solid #d3d3d3;
border-radius: 5px;
text-align: center;
margin-bottom:10px;
box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
}
#app{
position: relative;
}
<div id="app">
<div id="outlet">
<router-outlet></router-outlet>
</div>
<div id="loading" *ngIf="data.Loading">
<h2>Loading...</h2>
</div>
</div>
To align the box in the center, use margin: auto, but DO NOT use position: absolute:
#loading, #outlet {
width: 100%;
height: 100%;
}
#loading{
z-index: 10;
height: 100px;
width: 200px;
background-color: rgba(255,255,255,0.85);
padding: 40px;
border: 1px solid #d3d3d3;
border-radius: 5px;
margin: auto;
margin-bottom:10px;
box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
}
#app{
position: relative;
}
<div id="app">
<div id="outlet">
<router-outlet></router-outlet>
</div>
<div id="loading" *ngIf="data.Loading">
<h2>Loading...</h2>
</div>
</div>
Then if you put those two together, you get:
#loading, #outlet {
width: 100%;
height: 100%;
}
#loading{
z-index: 10;
height: 100px;
width: 200px;
background-color: rgba(255,255,255,0.85);
padding: 40px;
border: 1px solid #d3d3d3;
border-radius: 5px;
margin: auto;
text-align: center;
margin-bottom:10px;
box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
}
#app{
position: relative;
}
<div id="app">
<div id="outlet">
<router-outlet></router-outlet>
</div>
<div id="loading" *ngIf="data.Loading">
<h2>Loading...</h2>
</div>
</div>
We are trying to create Email application. We are facing issue in message body div which is over lapping with header div (contains To/CC/Subject). On page load everything looks good but when start adding email id's in To field then body section is getting overlapped with header.
.MainDiv{
position: fixed;
width: 65%;
max-width: 890px;
height: 80%;
max-height: 1100px;
z-index: 1000 !important;
padding: 0px 0px 0px;
top: 10%;
left: 23%;
right: auto;
bottom: auto;
}
.Header{
clear: both;
margin: 0 5px 25px;
min-height: 100px;
display: block;
position: absolute;
width: 99%;
border: solid 1px green;
padding: 10px 20px 0px;
overflow: initial !important;{
}
.Body{
position: absolute;
border: solid 1px red;
top: 175px;
bottom: 72px;
width: 100%;
overflow-y: auto;
}
ReplyMessage_Screenshot
remove position: absolute; it's causing problem
.MainDiv{
position: relative;
width: 65%;
max-width: 890px;
height: 100%;
max-height: 1100px;
z-index: 1000 !important;
padding: 0px 0px 0px;
top: 10%;
left: 23%;
right: auto;
bottom: auto;
border: solid 1px black;
overflow-y : auto;
}
.Header{
clear: both;
min-height: 100px;
display: block;
width: 100%;
border: solid 1px green;
overflow: initial !important;
}
.Body{
border: solid 1px red;
width: 100%;
overflow-y: auto;
}
h2{
background-color:yellow;
}
h3{
background-color:teal;
}
<div class = "MainDiv" >
<div class ="Header" contenteditable="true">
<h2>
Header ygygyggyggygyyygyggygyyg yyfyffyyffyfyfy yfyfyfyfy gygygygygyyg yggygygyyggy gygyygygyyggygygygygy yggyygygyggyy uhuuuguug guuggugu
</h2>
</div>
<div class= "Body" contenteditable="true">
<h3>
Message Body
</h3>
</div>
</div>
You seem to be overdoing it. Here is what you need perhaps.
.MainDiv{
}
.Header{
margin: 0 5px 10px;
min-height: 100px;
display: block;
border: solid 1px green;
padding: 10px 20px 0px;
}
.Body{
border: solid 1px red;
margin: 0 5px 0;
overflow-y: auto;
padding: 10px 20px 0px;
height:300px;
max-height:600px;
}
<div class="MainDiv">
<div class="Header">
</div>
<div class="Body">
</div>
</div>
I would like to center a circle on a line, like this:
I've got the following code:
.circle {
width: 75px;
height: 75px;
border-radius: 50%;
position: absolute;
left: 76%;
top: 41px;
background-color: #000;
}
.box {
width:500px;
height:150px;
position: relative;
border: 1px solid #eee;
.left {
width:200px;
height:100%;
position:relative;
}
<div class="Box">
<div class="Left">
<div class="circle">
</div>
</div>
<div class="Right"></div>
</div>
However, when i resize the windows, it ends up like this:
How can i make sure the circle stays in place, even when i resize my window?
You could take a different approach and use the border-right property on the .left div to represent the vertical line behind the .circle:
.circle {
width: 75px;
height: 75px;
border-radius: 50%;
position: absolute;
right: -37.5px; /* modified / - half of the circle's width */
top: 41px;
background-color: #000;
}
.box {
width: 500px;
max-width: 100%; /* added / responsive */
height: 150px;
position: relative;
border: 1px solid #eee;
}
.left {
width: 200px;
max-width: 100%; /* added / responsive */
height: 100%;
position: relative;
border-right: 1px solid #eee; /* added */
}
<div class="box">
<div class="left">
<div class="circle">
</div>
</div>
<div class="right"></div>
</div>
Another simply way to do this is using pseudo element like this :
.box {
margin: 10px auto;
max-width: 400px;
border: 1px solid #000;
text-align: center;
position: relative;
}
.box:before {
content: " ";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 1px;
margin-left: -0.5px;
background: #000;
}
.cirle {
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50%;
background: #000;
margin: 20px 0;
}
<div class="box">
<div class="cirle"></div>
</div>
this part of the code will make sure the line will stay at the center:
.box:before {
left: 50%;
margin-left: -0.5px;
}
Hi there, I want to crop the image within a div that is divided into two parts in a circle. One side is half cropped pic and the other side is just background color with the name on it. I am currently using following code :
width: 220px;
userdp {
height: 220px;
border: 4px solid red;
border-radius: 50%;
position: relative;
object-fit: none;
}
If your image is inside the div element that you're applying that styling to as below you should just need to add overflow: hidden to the CSS.
<div class="userdp">
<img src="..." />
</div>
And the styling.
.userdp {
height: 220px;
width: 220px;
border-radius: 50%;
overflow: hidden;
}
I've created an example here for you:
https://jsfiddle.net/20g4uL0j/1/
You can use the following,
**HTML**
<div class="circle">
<div class="image">
<img src="your-image.png" />
</div>
<div class="color">Text</div>
**CSS**
.circle{
width: 220px;
height:220px;
border-radius: 50%;
overflow:hidden;
}
.image, .color{
width:50%;
float:left;
height:100%;
}
.color{
background-color: #099;
}
You can do this as follow:
https://jsfiddle.net/ivan0013/f1a06cxe/
div {
background: #9e978e;
display: inline-block;
margin: 0 1em 1em 0;
}
.top,
.bottom {
height: 55px;
width: 110px;
}
.right,
.left {
height: 110px;
width: 55px;
}
.top {
border-top-left-radius: 110px;
border-top-right-radius: 110px;
}
.right {
border-bottom-right-radius: 110px;
border-top-right-radius: 110px;
}
.bottom {
border-bottom-left-radius: 110px;
border-bottom-right-radius: 110px;
}
.left {
border-bottom-left-radius: 110px;
border-top-left-radius: 110px;
}
<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="left"></div>
overflow: hidden and a little more play with the positioning, z-index, and object-fit may help you achieve that.
Here is an example for you (EDITED after re-reading your question):
.userdp {
height: 220px;
width: 220px;
border: 4px solid black;
border-radius: 50%;
position: relative;
overflow: hidden;
}
.userdp-img {
z-index: 1000;
width: 100%;
height: 100%;
object-fit: cover;
}
.userdp-info {
z-index: 2000;
width: 50%;
height: 100%;
color: #ddd;
background-color: red;
border-right: 3px solid black;
}
.userdp-info-inner {
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.userdp-img,
.userdp-info {
position: absolute;
top: 0;
left: 0;
}
<div class="userdp">
<div class="userdp-info">
<div class="userdp-info-inner">
John Doe
</div>
</div>
<img src="https://unsplash.it/300/300?image=1005" class="userdp-img">
</div>
Hope it helped.
so i am having trouble collapsing borders between two floating divs. I know how to do it with table cells but these are not cells and I'm not using tables. Here is a picture of what the picture looks like page image
Here is my html and css code as well.
body{
background-color: #C8C8C8;
}
h1{
text-shadow: 2px 3px gray;
margin-left: auto;
margin-right: auto;
width: 200px;
}
img.width{
width: 100%;
}
img.tLeft {
float: left;
z-index: -1;
padding-right: 3em;
}
img.tRight {
float: right;
z-index: -1;
}
.div1 {
width: 900px;
height: 700px;
margin-left: auto;
margin-right: auto;
border-radius: 20px;
box-shadow: 10px 10px 5px #A8A8A8;
background-color: #4dffa6;
overflow: hidden;
z-index: -1;
}
.div2 {
height: auto;
border: 1px solid red;
overflow: hidden;
border-top-left-radius: 20px;
top: 0;
left: 0;
float: left;
border-right: collapse;
}
.div3 {
height: auto;
border: 1px solid red;
overflow: hidden;
border-top-right-radius: 20px;
top: 0;
right: 0;
z-index: -1;
float: right;
}
.div4 {
height: auto;
border: 1px solid blue;
background-color: lightgray;
overflow: hidden;
left: 0;
display: block;
}
strong{
font-size: 70px;
color: red;
}
<div>
<img class="width" src="images/rancidbanner.png" alt="Rancid Tomatoes">
</div>
<h1>TMNT (2015)</h1>
<!---block one--->
<div class="div1">
<!---block two--->
<div class="div2">
<img class="tLeft" src="images/rottenlarge.png" alt="Rotten" /> <strong>33%</strong>
</div>
<!---block three--->
<div class="div3">
<img class="tRight" src="images/overview.png" alt="general overview" />
</div>
<!---box four
<div class="div4">
<p>HEllo relkgnaldfkgnadlgsknasdlkgnasldkgnaslkdgnasldkn aslkdgnslkdgn sjdnaslkdjfnaslkdjfn sdgnaslkjgnlaskjgdn
</p>
</div>
--->
</div>
Might be worth using a CSS reset so that the browser doesn't affect your CSS - http://meyerweb.com/eric/thoughts/2011/01/03/reset-revisited/