I want to create a background of color #F74422 in the top right corner of the html page.
You can try the following code. This will hide the rest of the circle by giving minus values to the circle top and right and with the rem values, margins will be responsive
.circle {
width: 150px;
height: 150px;
float: right;
margin-top: -5rem;
margin-right: -5rem;
background-color: #F74422;
border-radius: 75px;
}
<div class="circle"></div>
<h1>Hello World</h1>
Try this
.content {
width: 300px;
height: 300px;
background-color:#000;
position: relative;
}
.content:before {
content: '';
width: 30px;
height: 30px;
position: absolute;
right: 0;
top: 0;
background: #F74422 ;
border-bottom-left-radius: 30px;
}
<div class="content">
</div>
Related
I want to make vertical line in DIV.
then I want to layer img on vertical line.
(the pic shows the result I want)
For my source code is like this .
<div style="background-color:gray;width:1px;height:100%;"></div>
<img src="circle.png">
<img src="triangle.png">
How can I layer these elements???
You will need to do some math to adjust it in the center.
.outer-flex {
display: flex;
width: 40px;
align-items: center;
position: absolute;
}
.line {
background-color: gray;
width: 1px;
height: 100vh;
margin-left: auto;
margin-right: auto;
}
.circle {
position: absolute;
left: calc(50% - 15px);
top: 20px;
border: 5px solid white;
border-radius: 20px;
}
.arrow {
position: absolute;
top: 70vh;
left: calc(50% - 15px)
}
<div class="outer-flex">
<div class="line"></div>
<img src="https://www.marylandeyeassociates.com/wp-content/uploads/2015/03/red-dot-hi.png" width="21px" class="circle">
<img src="https://image.flaticon.com/icons/png/512/60/60995.png" width="31px" class="arrow">
</div>
The images are inside the div this way:
div {
background-color: gray;
width: 1px;
height: 200px;
}
img:first-of-type {
margin-left: -10px;
top: 30px;
position: relative;
}
img:last-of-type {
margin-left: -10px;
top: 85px;
position: relative;
}
<div>
<img src="https://picsum.photos/20/20" />
<img src="https://picsum.photos/20/20" />
</div>
If you know the width of the images, move them to the left with a negative margin of half their width.
I am trying to add an element on all the 4 sides of the div.
I don't want to use box-sizing as I have to apply event listeners on the elements that I would place on all the 4 sides.
I am able to add it to the left and right but how can I add it on all the 4 sides? And this also is not an elegant way.
.box {
width: 100px;
height: 100px;
background: yellow;
text-align: center;
font-size: 0.8rem;
position: relative;
}
#sideEl {
background-color: red;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 4px;
height: 100%;
cursor: w-resize;
}
#sideEl2 {
background-color: red;
position: absolute;
right: 0;
bottom: 0;
width: 4px;
height: 100%;
cursor: w-resize;
}
<div class="box">
<div id="sideEl">
<div id="sideEl2">
</div>
I had referred Placing 4 html elements in every corner of a div . But not able to get an idea how to place them along side borders
I swapped the height and width parameters for horizontally aligned elements so they are showed as intended. Also you should only be using one of those option ( top right bottom left ) to align element to one of four sides. Here's the code:
.box {
width: 100px;
height: 100px;
background: yellow;
text-align: center;
font-size: 0.8rem;
position: relative;
}
#sideEl {
background-color: red;
position: absolute;
top: 0;
height: 4px;
width: 100%;
cursor: w-resize;
}
#sideE2 {
background-color: brown;
position: absolute;
left: 0;
width: 4px;
height: 100%;
cursor: w-resize;
}
#sideE3 {
background-color: blue;
position: absolute;
right: 0;
width: 4px;
height: 100%;
cursor: w-resize;
}
#sideE4 {
background-color: green;
position: absolute;
bottom: 0;
height: 4px;
width: 100%;
cursor: w-resize;
}
<div class="box">
<div id="sideEl"></div>
<div id="sideE2"></div>
<div id="sideE3"></div>
<div id="sideE4"></div>
</div>
Add the two other divs and use :
a class to identify (style in other words) a side, let's call it side, that'll be used by the divs that act as sides. This class holds mutual styles for the sides like the background-color and the position.
two additional classes :
side-h which is used by the sides that are horizontal (top and bottom sides). It holds the width and height for these specific sides as they do share the same values. Also, these sides have cursor: n-resize rule for a vertical cursor.
side-v which is used by the sides that are vertical (right and left sides). It holds the width and height for these specific sides as they do share the same values. Also, these sides have cursor: w-resize rule for an horizontal cursor.
the #side-top and #side-left hold the same values for top and left rules.
the #side-bottom and #side-right hold the same values for bottom and left rules.
.box {
width: 100px;
height: 100px;
background: yellow;
text-align: center;
font-size: 0.8rem;
position: relative;
}
.box .side {
position: absolute;
background-color: red;
}
.box .side.side-h {
width: 100%;
height: 4px;
cursor: n-resize;
}
.box .side.side-v {
width: 4px;
height: 100%;
cursor: w-resize;
}
#side-top, #side-left {
top: 0;
left: 0;
}
#side-right, #side-bottom {
bottom: 0;
right: 0;
}
<div class="box">
<div class="side side-h" id="side-top"></div>
<div class="side side-v" id="side-right"></div>
<div class="side side-h" id="side-bottom"></div>
<div class="side side-v" id="side-left"></div>
</div>
the ordering of the elements inside .box can be changed without affecting the final result.
.box {
width: 100px;
height: 100px;
background: yellow;
text-align: center;
font-size: 0.8rem;
position: relative;
}
#sideTop {
background-color: red;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
cursor: w-resize;
}
#sideRight {
background-color: red;
position: absolute;
top: 0;
right: 0;
width: 4px;
height: 100%;
cursor: w-resize;
}
#sideBottom {
background-color: red;
position: absolute;
right: 0;
bottom: 0;
width: 100%;
height: 4px;
cursor: w-resize;
}
#sideLeft {
background-color: red;
position: absolute;
left: 0;
top: 0;
width: 4px;
height: 100%;
cursor: w-resize;
}
<div class="box">
<div id="sideTop"></div>
<div id="sideBottom"></div>
<div id="sideRight"></div>
<div id="sideLeft"></div>
</div>
I hope you may get the idea...
.main-container {
width: 400px;
height: 400px;
background-color: #ccc;
}
.child {
float: left;
}
.child:nth-child(odd) {
height: calc(100% - 50px);
width: 50px;
background-color: blue;
}
.child:nth-child(even) {
height: 50px;
width: calc(100% - 100px);
background-color: red;
}
.child:nth-child(4) {
width: 100%;
}
<div class="main-container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
I want to make two divs overlap each other using css. I used the following code but when some text or content is added to the blue box it overflows the gray box while I want to keep it inside the the gray box and stretch it as the inner content is stretched.
.gray {
position: relative;
background-color: #818181;
}
.white {
background-color: #fff;
}
.blue {
position: absolute;
background-color: #0090ff;
top: 0;
right: 10px;
left: 100px;
}
<div class="gray">
<div class="white">
left text
</div>
<div class="blue">
<p>some text goes here</p>
<p>some text goes here</p>
<p>some text goes here</p>
</div>
</div>
here is my satisfactory result:
How can I correct the css to get the above result?
Change your CSS to this.
The gray will autosize in height when you add more content to the blue div.You may need to change some with and margin values to get the layout you want, but the mechanism is there.
.gray {
background-color: #818181;
z-index: -1;
height: auto;
width: 300px;
position: absolute;
overflow: hidden;
}
.white {
background-color: #fff;
z-index: 0;
height: 150px;
width: 280px;
position: absolute;
margin-left: 10px;
margin-top: 10px;
}
.blue {
background-color: #0090ff;
top: 0;
height: auto;
width: 180px;
z-index: 1;
position: relative;
float:left;
margin-left: 60px;
margin-top: 10px;
}
See it work: http://jsfiddle.net/djwave28/dj9wo8ak/4/
So you need to define blue box as position relative the overflow will be stopped and and when you add some content to blue div it will not overflow.
If you want to get white div under a blue div you need to set it to position:absolute and set it z-indx lesser than blue div has
try this
.gray {
position: relative;
background-color: #818181;
height: 200px;
width: 100%;
}
.white {
background-color: #fff;
float: left;
width: 97%;
position: relative;
z-index: 2;
height: 50%;
left: 1%
}
.blue {
position: relative;
background-color: #0090ff;
z-index:3;
width:40%;
height:100%;
top: -9%;
left: 8%;
}
Play with the height and width sizes to reach your desired dimensions.
Do the same with the position values to place the divs the way you want
see this fiddle http://jsfiddle.net/u50jj2e1/1/
.gray {
background-color: #818181;
z-index: -1;
height: 300px;
width: 300px;
position: absolute;
overflow: hidden;
/* Instead of hidden it could be "overflow: auto;"*/
}
.white {
background-color: #fff;
z-index: 0;
height: 150px;
width: 280px;
position: absolute;
margin-left: 10px;
margin-top: 10px;
}
.blue {
background-color: #0090ff;
top: 0;
height: 290px;
width: 180px;
z-index: 1;
position: absolute;
margin-left: 20px;
margin-top: 10px;
}
<div class="gray">
<div class="white">
</div>
<div class="blue">
</div>
</div>
I create exact shape for you: http://jsfiddle.net/dj9wo8ak/1/
i'm trying to recreate this image in pure html and css, or add a little javascript if nessascary:
and here's what i have so far:
i'm trying to move that small orange box near the center up to match the blue line, but she won't budge
.middletop {
position: absolute;
background-color: #fe9800;
width: 26px;
height: 16px;
left: 471px;
}
and here's the entire code:
layout.html
<html>
<head>
<title>LCARS</title>
<link rel="stylesheet" href="static/style.css"/>
</head>
<body>
<div class="topleft">
</div>
<div class="topleft2">
</div>
<div class="middletop">
</div>
<div class="bottomleft">
</div>
<div class="bottomleft2">
</div>
<div class="bottomleft3">
</div>
<div class="bottomleft4">
</div>
<div class="content">
</div>
<div class="content2">
</div>
</body>
<footer>
</footer>
</html>
style.css
body {
background-color: black;
}
.topleft {
background-color: #c498c4;
width: 126px;
height: 90px;
}
.topleft2 {
margin-top: 5px;
background-color: #9b98fe;
width: 463px;
height: 112px;
border-radius: 0 0 0 70px;
}
.bottomleft {
margin-top: 7px;
background-color: #cc6061;
width: 463px;
height: 91px;
border-radius: 70px 0 0 0;
}
.bottomleft2 {
margin-top: 5px;
background-color: #cc6061;
width: 126px;
height: 137px;
}
.bottomleft3 {
margin-top: 5px;
background-color: #fe9800;
width: 126px;
height: 38px;
}
.bottomleft4 {
margin-top: 5px;
background-color: #ffa873;
width: 126px;
height: 180px;
}
.middletop {
position: absolute;
background-color: #fe9800;
width: 26px;
height: 16px;
left: 471px;
}
.content {
background-color: /*#6D6A6A*/black;
position: absolute;
left: 127px;
top: 239px;
border-radius: 35px;
width: 900px;
height: 700px;
}
.content2 {
background-color: black;
position: absolute;
left: 127px;
top: -2;
border-radius: 0 0 0 35px;
width: 900px;
height: 200px;
}
While I advise having a look into using absolute positioning extensively, if you're already doing it and you're happy with it, you just have to set top and you should be good to go:
.middletop {
position: absolute;
background-color: #fe9800;
width: 26px;
height: 16px;
left: 476px;
top:199px /* <-- this is what I added */
}
Here is a demo.
Try using
position: absolute;
top: /*the amount of px from the top to your wanted location*/;
left: /*the amount of px from the left to your wanted location*/;
z-index:1000; /*<= this is to be above all other elements*/
Use the css top:100px;. And to see it use: z-index:100;
i have div area which is devided in to 4 equal parts, like the one atached.
now i need another div to be placed at the bottom area as an overlay to the above div. Imagine it like a text scroll area on the bottom side of the TV and the TV screen is constructed by 4 divs.
I am able to create the 5 divs. now the issue is that the 5th div(scroll area) is not going above the bottom edge of the 2 lower divs (3 and 4). I also had put z-index also but failed
can anybody share a sample for styling this.
You can solve it this way:
HTML:
<div class="area"></div>
<div class="area"></div>
<div class="area"></div>
<div class="area"></div>
<div class="overlay"></div>
CSS:
.area{
float: left;
width: 49%;
height: 300px;
border: 1px solid black;
}
.overlay{
width: 200px;
height: 100px;
background-color: blue;
clear: both;
position: absolute;
bottom: 30px;
margin: -100px;
left: 50%;
}
Please note that I have used hard coded example values. The actual values depends on which context the markup is in.
Without your code it's hard to figure what's not working.
If I understand what you want this is what I would have done:
<div class="container">
<div class="block1"></div>
<div class="block2"></div>
<div class="block3"></div>
<div class="block4"></div>
<div class="overlay"></div>
</div>
css:
.container {
position: relative;
width: 600px; /* use the size you want */
height: 400px;
}
.container div {
position: absolute;
width: 50%;
height: 50%;
}
.container .block1 { top: 0; left: 0; background: pink; }
.container .block2 { top: 50%; left: 0; background: red; }
.container .block3 { top: 0; left: 50%; background: green; }
.container .block4 { top: 50%; left: 50%; background: blue; }
.container .overlay {
position: absolute;
width: 80%;
height: 100px;
left: 10%;
bottom: 30px; /* distance from the bottom */
z-index: 1;
background: yellow;
}