I make a rectangle and a circle in html and css. but i want to put them together. what can i do?
.rect-circ {
width: 30px;
height: auto;
margin-left: 100px;
}
.rectangle {
width: 20px;
height: 4px;
background: rgb(85, 80, 80);
border-radius: 30px;
margin-left: 5px;
}
.circle {
width: 5px;
height: 5px;
background: rgb(85, 80, 80);
border-radius: 50%;
}
<div class="rect-circ">
<div class="rectangle"> </div>
<div class="circle"> </div>
</div>
Not quite sure what you mean, but if you want a rectangle and circle in the same vertical alignment, here you go: https://codesandbox.io/s/stack-overflow-rectangle-circle-tem7x?file=/index.html
I'm going to assume you mean you want the elements on the same place overlapping eachother.
I've added position: relative; to the wrapper (.rect-circ) so I can position elements reletive to this wrapper.
I've added position: abosulute; left: 0; to both the circle and the rectangle to position them on the left side of the wrapper.
.rect-circ {
width: 600px;
height: auto;
margin-left: 100px;
position: relative;
}
.rectangle {
width: 400px;
height: 80px;
background: rgb(85, 80, 80);
border-radius: 30px;
margin-left: 5px;
position: absolute;
left: 0;
}
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
left: 0;
background: blue;
}
<div class="rect-circ">
<div class="rectangle"> </div>
<div class="circle"> </div>
</div>
Just use this css
.rect-circ{
width: 30px;
height: auto;
margin-left: 100px;
display:flex;
flex-direction: row;
}
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 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>
im new to css and html i wanna cr8 a product box value like this
http://i.imgur.com/kMogtMz.png
I tried with these but didn't get any result.
I want .fill class to be dynamically modifiable.
Anyone can help me ?
.box {
width: 250px;
height: 30px;
background: grey;
color: white
}
.box .fill {
float: left;
width: 78%;
background: orange;
height: 100%;
}
.box .empty {
position: absolute;
white-space: nowrap;
right: 10px
}
.box .fill-badge {
position: absolute;
padding-left: 10px;
line-height: 30px
}
.box .empty-badge {
padding-right: 10px;
line-height: 30px;
}
<div class="box">
<div class="fill"><div class="fill-badge">Radeon 7870</div></div>
<div class="empty"><div class="empty-badge">125.6 GB/S</div></div>
</div>
You just need to look at your absolute and relative positioning. Make sure that all elements that are absolutely positioned are inside an element with relative defined as a position. So in this case you just need to add position: relative; to the .box.
.box {
width: 250px;
height: 30px;
background: grey;
color: white;
position: relative;
}
.box .fill {
float: left;
background: orange;
height: 100%;
}
.box .empty {
float: right;
white-space: nowrap;
right: 10px
}
.box .fill-badge {
position: absolute;
left: 0;
padding-left: 10px;
line-height: 30px
}
.box .empty-badge {
position: absolute;
right: 0;
padding-right: 10px;
line-height: 30px;
}
<div class="box">
<div class="fill" style="width:60%;">
<div class="fill-badge">Radeon 7870</div>
</div>
<div class="empty">
<div class="empty-badge">125.6 GB/S</div>
</div>
</div>
Edited to show inline style.
You must set the .box position to relative. http://jsfiddle.net/Lzmop76a/
.box {
width: 250px;
height: 30px;
background: grey;
color: white
position: relative;
}
I would do it using a background color and a background image for the same element like:
.box {
width: 240px;
padding: 0 5px;
height: 30px;
line-height: 30px;
background: #fa0 url(http://placehold.it/250x300/aaa) 200px 0 no-repeat;
color: white;
}
.box span{
float:right;
}
<div class="box">
Radeon 7870 <span>125.6 GB/S</span>
</div>
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;