I'm trying to replicate the
following mockup
just to practice to place a square inside the circle but this is as close as I can get,
I tried using JS but just get weird looking circles.
This is my code
Index.html
.action-selection {
display: flex;
justify-content: space-between;
}
.action {
height: auto;
flex: 0 1 30%;
border-radius: 100%;
border: 2px solid orange;
text-align:center;
}
.action img {
width: 30px;
}
.action div {
border: 2px dashed black;
height : auto;
}
<div class="action-selection">
<div class="action">
<div><img src="img/phone.png"><p>I'm already lincenced and I want to join BeUrban</p>
</div>
</div>
<div class="action">
<div>
<img src="img/phone.png"><p>I'm licensed but I'd like to know more about BeUrban</p>
</div>
</div>
<div class="action">
<div>
<img src="img/phone.png"><p>I'm ready to start my career with BeUrban</p>
</div>
</div>
</div>
There are a lot of little elements here. First of all, don't be afraid to use multiple wrapping divs when you have a lot of behaviors to handle rather than trying to put too many responsibilities on too few elements.
You already have the width set using flex-basis.
To make the circles have a fixed 1:1 width to height ratio you can use 50% border, height of 0, and padding-top 100%. That last bit is tricky but padding top or bottom with a percentage is a percentage of the width.
To center the squares, use another div with absolute position, top 50% and left 50% and then translate:transform( -50%, -50% ). The translate values are a percentage of the element itself and the top and left positioning percentages are percentages of the parent.
To add padding to the square without affecting it's size, use box-sizing: border-box
Finally, I used width and height of 72% to get the squares to contact the circles. That's pretty close to the ( square root of 2 ) / 2 * 100% which is 70.7% but it worked for me with your border thicknesses.
.action-selection {
display: flex;
justify-content: space-between;
}
.action {
flex: 0 1 30%;
text-align: center;
}
.action img {
width: 30px;
}
.action__container-circle {
border-radius: 50%;
border: 2px solid orange;
height: 0;
padding-top: 100%;
position: relative;
}
.action__content-square {
border: 2px dashed black;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate( -50%, -50%);
width: 72%;
height: 72%;
box-sizing: border-box;
padding: 5px;
overflow: hidden;
}
<div class="action-selection">
<div class="action">
<div class="action__container-circle">
<div class="action__content-square">
<img src="img/phone.png">
<p>I'm already lincenced and I want to join BeUrban</p>
</div>
</div>
</div>
<div class="action">
<div class="action__container-circle">
<div class="action__content-square">
<img src="img/phone.png">
<p>I'm licensed but I'd like to know more about BeUrban</p>
</div>
</div>
</div>
<div class="action">
<div class="action__container-circle">
<div class="action__content-square">
<img src="img/phone.png">
<p>I'm ready to start my career with BeUrban</p>
</div>
</div>
</div>
</div>
The trick with creating perfect circles that are dependent on the viewport width is to use width and the same value for padding-top. Padding percentage, is based on width, whereas if you used a height percentage, that would be based on the height of the parent.
In this case, if you're basically using width: 30% then you'd use padding-top: 30%, and then set the content to position: absolute and then just center it inside the relatively positioned circle. You'll likely have to fiddle around with the exact width/height combo that you want, but this'll get you the perfect circle you're looking for.
Note there's no way though CSS only to calculate the exact points where the internal square/rectangle should meet the external circle. That would require more complex math than what CSS calc can do, because you'd have to determine that based on the height of the content inside the rectangle and adjust your width from there.
.action-selection {
display: flex;
justify-content: space-between;
}
.action {
height: auto;
flex: 0 1 30%;
position: relative;
padding-top: 30%;
border-radius: 100%;
border: 2px solid orange;
text-align:center;
display: flex;
}
.action img {
width: 30px;
}
.action div {
border: 2px dashed black;
position: absolute;
top: 50%;
left: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transform: translate(-50%, -50%);
}
<div class="action-selection">
<div class="action">
<div><img src="img/phone.png"><p>I'm already lincenced and I want to join BeUrban</p>
</div>
</div>
<div class="action">
<div>
<img src="img/phone.png"><p>I'm licensed but I'd like to know more about BeUrban</p>
</div>
</div>
<div class="action">
<div>
<img src="img/phone.png"><p>I'm ready to start my career with BeUrban</p>
</div>
</div>
</div>
.action-selection {
display: flex;
justify-content: space-between;
}
.action {
border-radius: 50%;
border: 2px solid orange;
text-align: center;
height: 200px;
width: 200px;
}
.action img {
width: 30px;
}
.action div {
border: 2px dashed black;
/* height: auto; */
width: 75%;
margin-left: 50%;
margin-top: 50%;
transform: translate(-50%, -50%);
height: 65%;
}
}
<div class="action-selection">
<div class="action">
<div><img src="img/phone.png">
<p>I'm already lincenced and I want to join BeUrban</p>
</div>
</div>
<div class="action">
<div>
<img src="img/phone.png">
<p>I'm licensed but I'd like to know more about BeUrban</p>
</div>
</div>
<div class="action">
<div>
<img src="img/phone.png">
<p>I'm ready to start my career with BeUrban</p>
</div>
</div>
</div>
hey check this please add the code in your page then it will look as per your requirement.
.action-selection {
display: flex;
justify-content: space-between;
}
.action {
border: 2px solid orange;
text-align: center;
width: 250px;
height: 250px;
position: relative;
border-radius:100%;
}
.action div {
border: 2px dashed black;
height: 125px;
position: absolute;
left: 0;
top: 52px;
padding-top: 15px;
width: 200px;
right: 0;
margin: auto;
}
.action img {
width: 30px;
}
<div class="action-selection">
<div class="action">
<div><img src="img/phone.png"><p>I'm already lincenced and I want to join BeUrban</p>
</div>
</div>
<div class="action">
<div>
<img src="img/phone.png"><p>I'm licensed but I'd like to know more about BeUrban</p>
</div>
</div>
<div class="action">
<div>
<img src="img/phone.png"><p>I'm ready to start my career with BeUrban</p>
</div>
</div>
</div>
Related
I'm trying to achieve the following:
I was able to replicate the image but only if my div is not floating in the page (without the margin applied and without the position: absolute), otherwise I can't see the green rectangle.
My HTML structure is the following:
<div class="app">
<div class="interface">
<div class="view">
<div class="body">
<div class="top">
Top content
</div>
<div class="middle">
Middle content
</div>
<div class="bottom">
Bottom content
</div>
</div>
</div>
</div>
</div>
In the .interface CSS I have the following:
.interface
{
position: absolute;
top: 15%;
}
With this CSS I'm unable to see the green rectangle. If I remove the position: absolute (and therefore the top: 15% stops applying) I'm able to see the green rectangle.
You can see the issue in this JSFiddle: https://jsfiddle.net/v9euwdz3/
So, how do I manage to have the DIV showing at a certain level (margin from top) and without compromise my HTML structure?
Here is what you're trying to achieve using flex:
.body {
display: flex;
flex-direction: column;
background-color: blue;
justify-content: space-between;
height: 100vh;
}
.navetc {
background-color: white;
height: 15vh;
}
.top {
background-color: green;
height: 60px;
}
.middle {
background-color: yellow;
flex-grow: 1;
}
.bottom {
background-color: red;
height: 50px;
}
<div class="app">
<div class="interface">
<div class="view">
<div class="body">
<div class="navetc">
SPACE
</div>
<div class="top">
Top content
</div>
<div class="middle">
Middle content
</div>
<div class="bottom">
Bottom content
</div>
</div>
</div>
</div>
</div>
You could also use margin-top: 15%; instead of a placeholder div
.body {
display: flex;
flex-direction: column;
background-color: blue;
justify-content: space-between;
height: 100vh;
}
.top {
margin-top: 15vh;
background-color: green;
height: 60px;
}
.middle {
background-color: yellow;
flex-grow: 1;
}
.bottom {
background-color: red;
height: 50px;
}
<div class="app">
<div class="interface">
<div class="view">
<div class="body">
<div class="top">
Top content
</div>
<div class="middle">
Middle content
</div>
<div class="bottom">
Bottom content
</div>
</div>
</div>
</div>
</div>
(I used vh instead of % to get it to show up correctly in this code snippet)
as we know the content that have height which is 100% means is 100% of its parent and while the height of the parent is not defined will cause an error that's what you was stuck with you set the with of body to 100% but was not right you would set it to 100vh to fit the screen if you are on computer and the other mistakes that I found was in your calculation where you used to subtract the measurement which is in parcentages from the one in pixels height: calc(100% - 150px); and the others where simple mistakes
html,
body {
height: 100vh;
}
.app {
position: relative;
height: 100%;
display: flex;
}
.interface {
position: absolute;
height: 100%;
top: 15%;
}
.view {
position: fixed;
height: 100%;
background-color: #ccc;
width: 350px;
}
.body {
position: relative;
height: 100%;
}
.body .top {
height: 15%;
border: 1px solid #000;
}
.body .middle {
height: 60%;
border: 1px solid red;
}
.body .bottom {
height: 20%;
border: 1px solid green;
}
<div class="app">
<div class="interface">
<div class="view">
<div class="body">
<div class="top">
Top content
</div>
<div class="middle">
Middle content
</div>
<div class="bottom">
Bottom content
</div>
</div>
</div>
</div>
</div>
to see the result in the snippet you should observe it in full page and also when you see the result through jsfiddle there at the result section there is bar downward which hide some part of footer
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 5 years ago.
I want to make my div2 to centre align and div3 to be at right.
I tried doing that with text align: center for main div and making float right to div3 but it is making it center align by considering main div's remaining part. I have given display: inline-flex to main div
<div style="height: 40px;width:120px;background-color: yellow;align-items: center;">
<div style="height: 20px;width:20px;background-color: red;">
Hello
</div>
<div style="height: 20px;float: right;width:20px;background-color: red;">
</div>
</div>
Please try with this code:
<div style="height: 40px;width:120px;background-color: yellow;align-items: center; position:relative;">
<div style="height: 20px;width:40px;background-color: red; overflow:auto; margin:0 auto">
Hello
</div>
<div style="height: 20px;position:absolute; right:0px; top:0px; width:20px;background-color: red;">
</div>
</div>
.main {
display: block;
position: relative;
width:100%;
text-align: center;
border: 1px solid red;
}
.main .div1 {
display: inline-block;
border: 1px solid;
}
.main .div2 {
float: right;
border: 1px solid;
display: inline-block;
}
<div class="main">
<div class="div1">
div1
</div>
<div class="div2">
div2
</div>
</div>
Divs are block level elements, so you can use a margin of auto on the left and right to place it in the middle.
.center {
margin: 0 auto;
}
.right {
float: right;
}
In the HTML you will need to adjust the ordering of the divs. Put div 3 before div 2 so that when you float it, they appear on the same line:
<div class="outer">
<div class="right"></div>
<div class="center"></div>
</div>
https://jsfiddle.net/dcqpw12u/1/
You can use position:relative for the main, and position:absolute to the other div, and it also centers it vertically
.main {
text-align: center;
background-color: red;
height: 50px;
position: relative;
}
.div2 {
background-color: blue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.div3 {
background-color: green;
position: absolute;
right: 0;
top: 50%;
transform: translate(0, -50%);
}
<div class="main">
<div class="div2">SOME DIV 2</div>
<div class="div3">SOME DIV 3</div>
</div>
Add style="margin: auto;" to your div2 element. And
style="margin-left: auto;" to your div3 element.
<div style="height: 40px;width:120px;background-color: yellow;align-items: center;">
<div style="margin:auto; height: 20px;width:20px;background-color: red;">
Hello
</div>
<div style="margin-left:auto; height: 20px;float: right;width:20px;background-color: red;">
</div>
</div>
.contentmain{
background: white none repeat scroll 0 0;
color: black;
height: auto;
width: 35%;
float: left;
background:red;
}
.contentCenter{
background: white none repeat scroll 0 0;
color: black;
height: auto;
width: 30%;
float: left;
background:yellow;
}
.contentRight{
background: white none repeat scroll 0 0;
color: black;
height: auto;
width: 35%;
float: right;
background:red;
}
<div class="contentmain">
Main<br/>
Content<br/>
</div>
<div class="contentCenter">
Center<br/>
Content<br/>
</div>
<div class="contentRight">
Right<br/>
Content<br/>
</div>
This might be fulfill your requirement.
<!DOCTYPE html>
<head>
<style>
.div0 {
text-align: center;
border-style: solid;
border-width: 5px;
height: 50px;
border-color: red;
position: relative ;
}
.div1 {
border-style: solid;
border-width: 4px;
right: 0%;
height: 40px;
width:40px;
border-color: green;
position: absolute;
}
.div2 {
left: 50%;
right:50%;
width:40px;
position: absolute;
border-style: solid;
height: 40px;
border-width: 4px;
border-color: green;
}
</style>
</head>
<body>
<div class="div0">
<div class="div1"><p>div1</p></div>
<div class="div2"><p>div2</p></div>
</div>
</body>
</html>
basically you can achieve this by using the position property and the right and left properties of CSS which you can refer to more on
Position and right property left property could be found on the site.
what i've done in my answer is set the main div as position relative and the other sub divs(div2 and div3) as absoulute
To get one div to the right most corner you set the right property to 0%
and to center a div i used 50% on both right and left properties.
I'm desperately trying to format two images side by side using CSS.
I want the first one to be fixed-size and the second one to take up the remaining width (but it should stop growing when it has the same height as the first one). This is my code:
<span style="height:80px; width:100%">
<img src="images/navicon.png" style="width:60px; height:60px; padding:10px 10px 10px 10px; "/>
<img src="images/logo.png" style="max-height:60px; padding: 10px 10px 10px 10px;" />
</span>
But instead of the second image shrinking (maintaining aspect-ratio) when there is not enough space, the line breaks.
Thanks for any help!
This possible solution requires CSS calc(), see the demo follows.
div {
height: 100px;
overflow: hidden;
font-size: 0;
}
span {
display: inline-block;
vertical-align: top;
}
span:nth-child(2) {
width: calc(100% - 100px);
}
span:nth-child(2) img {
width: 100%;
height: auto;
}
<div>
<span><img src="http://lorempixel.com/100/100" /></span>
<span><img src="http://lorempixel.com/100/100" /></span>
</div>
JSFiddle: http://jsfiddle.net/Low7k16d/
HTML:
<div class="image-container">
<div class="image"><img src="http://lorempixel.com/160/60/abstract/1"></div>
<div class="image image-auto"><img src="http://lorempixel.com/100/60/abstract/1"></div>
</div>
<div class="image-container">
<div class="image"><img src="http://lorempixel.com/60/60/abstract/1"></div>
<div class="image image-auto"><img src="http://lorempixel.com/1000/60/abstract/1"></div>
</div>
<div class="image-container">
<div class="image"><img src="http://lorempixel.com/1000/60/abstract/1"></div>
<div class="image image-auto"><img src="http://lorempixel.com/1500/600/abstract/1"></div>
</div>
CSS:
.image-container {
width: 100%;
display: flex;
align-items: flex-start;
}
.image {
margin: 10px;
padding: 0;
flex-shrink: 0;
}
.image img {
width: 100%;
margin: 0;
padding: 0;
max-height: 80px; /*Line added to limit height*/
}
.image-auto {
flex-shrink: 1;
height: auto;
}
And I updated the Pen: http://codepen.io/czoka/pen/XbJXVO
I don't completely understand your question but this is what I thought you mean.
NOTE: this is my updated version of sdcr's answer.
CSS:
div {
height: 80px;
font-size: 0;
}
span {
display: inline-block;
vertical-align: top;
padding:10px;
}
span:nth-child(1) img {
max-height: 60px;
}
span:nth-child(2) img {
width: 100%;
HTML
<div>
<span><img src="http://lorempixel.com/100/100" /></span>
<span><img src="http://lorempixel.com/output/people-q-c-924-67-9.jpg" /></span>
</div>
See jsfiddle:
http://jsfiddle.net/Low7k16d/4/
My page is divided in rows with limited width. (<div class='row'>)
I would like to apply a background (color) to each row, but I would like the back ground not to take into consideration the width limit of the div, is there a way to achieve this ?
Thanks!
Were you going for something like this? It'd be easier to answer your question if you provided a fiddle or atleast some code so we can help you with your problem.
I came to this solution:
<div class="row1">
...
</div>
<div class="row2">
...
</div>
.row1 {
background-color: red;
width: 100%;
height: 50%;
}
.row2 {
background-color: pink;
width: 100%;
height: 50%;
}
You can run it here: JSFiddle
This is possible with a pseudo-element, no need for additional HTML.
.wrapper {
width: 50%;
margin: auto;
}
[class^=row] {
height: 50px;
position: relative;
margin-bottom: 10px;
}
[class^=row]:before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
height: 100%;
width: 100vw;
background: purple;
z-index: -1;
}
.row1 {
background-color: red;
}
.row2 {
background-color: pink;
}
<div class="wrapper">
<div class="row1">...</div>
<div class="row2">...</div>
</div>
You may be better to place each row inside a .container-fluid div with a {min-width: 100%} and a custom class for the colour you need
.container-fluid {
min-width: 100%
}
.row {
max-width: 300px;
margin: 0 auto;
padding: 10px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
<div class="container-fluid red">
<div class="row">
<p>Row Content 1</p>
</div>
</div>
<div class="container-fluid green">
<div class="row">
<p>Row Content 2</p>
</div>
</div>
<div class="container-fluid blue">
<div class="row">
<p>Row Content 3</p>
</div>
</div>
I am using a table and table cell in my website. The left most column needs to start from the top. Instead it goes to the bottom. Below is a link to that issue where the grey div starts from the very bottom.
http://jsfiddle.net/HtAJw/9/
It's not clear what end result you're looking to achieve. However, by adding a pixel width to every element, where it adds up to something less than or equal to the container width, will prevent the wrapping you see.
http://jsfiddle.net/HtAJw/10/
HTML:
<div class="parent">
<div class="child">
<fieldset>
a
</fieldset>
</div>
<div class="child" >
<div class= "newChildLeft">
a <br/> b<br/> b<br/> b<br/>
</div>
<div class= "newChildRight">
b<br/> b<br/> b
</div>
</div>
</div>
CSS:
.parent {
width: 100px;
display: table;
border: 1px solid green;
height: 100%
}
.child {
background: blue;
display: table-cell;
height: inherit;
width: 50px;
}
.newChildLeft {
float: left;
width: 25px;
}
.newChildRight {
float: right
width: 25px;
}
.child + .child {
background: red;
width: 50px;
}
fieldset {
height: 100%;
background-color: #666;
width: 50px;
}