I'm quite new to web development and I would like to create this in CSS and HTML:
I am unsure how to do this as I am only 13 and still learning.
What I have tried but failed miserably with:
.grey{
height:300px;
width:700px;
background-color: #e5e5e5;
z-index: 0;
}
.pink{
height:150px;
width:100px;
background-color:#ff8a8a;
padding-top: 0px;
padding-right:0px;
z-index: 1;
}
<div class="grey">
<div class="pink"> </div>
</div>
Use CSS-grid which is built-in within CSS. See code snippet.
.wrapper {
display: grid;
grid-template-columns:
40%
1fr
1fr
;
grid-template-rows:
100px
100px
;
grid-template-areas:
"box-1 box-2 box-4"
"box-1 box-3 box-5"
;
}
.box-1 {
grid-area: box-1;
background-color: grey;
}
.box-2 {
grid-area: box-2;
background-color: orange;
}
.box-3 {
grid-area: box-3;
background-color: lightblue;
}
.box-4 {
grid-area: box-4;
background-color: red;
}
.box-5 {
grid-area: box-5;
background-color: lightgreen;
}
<div class="wrapper">
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
<div class="box-4"></div>
<div class="box-5"></div>
</div>
Using flex:
.container {
display: flex;
justify-content: flex-start;
background-color: #e5e5e5;
}
.box {
height:150px;
width: 50%;
display: flex;
flex-wrap: wrap;
}
.square {
height: 50%;
width: 50%;
}
.square--pink {
background-color: #fb7378;
}
.square--orange {
background-color: #fcbd8b;
}
.square--blue {
background-color: #8ce0fd;
}
.square--green {
background-color: #7cff83;
}
<div class="container">
<div class="box"></div>
<div class="box">
<div class='square square--pink'></div>
<div class='square square--orange'></div>
<div class='square square--blue'></div>
<div class='square square--green'></div>
</div>
</div>
You should look over the css box model btw, it would help you better understand how to structure your HTML for your css :).
.grey{
height:300px;
width:600px;
background-color: #e5e5e5;
z-index: 0;
}
.pink{
height:150px;
width:150px;
background-color:#ff8a8a;
padding-top: 0px;
padding-right:0px;
z-index: 1;
float:right;
}
.green{
height:150px;
width:150px;
background-color:green;
padding-top: 150px;
padding-right:0px;
z-index: 1;
float:right;
}
.skyblue{
height:150px;
width:150px;
background-color:skyblue;
padding-top: 0px;
padding-right:0px;
z-index: 1;
float:right;
}
.orange{
height:150px;
width:150px;
background-color:orange;
padding-top: 150px;
padding-right:0px;
z-index: 1;
float:right;
}
<div class="grey">
<div class="green">
<div class="pink">
</div>
</div>
<div class="orange">
<div class="skyblue">
</div>
</div>
</div>
Here's a quick example:
<div class="container">
<nav class="nav left">left</nav>
<nav class="nav right">right</nav>
<nav class="nav right1">right</nav>
</div>
CSS:
.container {
display: flex;
flex-flow: row;
min-height: 50vh;
}
.left {
flex: 5;
background-color: grey;
width: 70%;
}
.right {
flex:2;
background-color: green;
}
.right1 {
flex:2;
background-color: red;
}
here is your solution.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div { height: 102px; float:right; width: 150px;z-index: 2; }
.box{ width:600px;height:206px;background:grey;border:1px grey;z-index:0;float:left;}
.red { background: red; }
.green { background: green; }
.blue { background: blue; clear: right; }
.orange { background: orange; }
</style>
</head>
<body>
<div class="box">
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="orange"></div>
</div>
</body>
</html>
With Flexbox, you can do something like this:
.grey {
display: flex; /* displays flex-items (children) inline */
justify-content: flex-end; /* places the flex-item (.innerFlex) to the end of the horizontal line */
height: 300px;
width: 700px;
max-width: 100%;
background: #e5e5e5;
}
.innerFlex {
display: flex;
flex-wrap: wrap; /* enables wrapping */
flex-basis: 200px; /* initial width set to 200px since its flex-items are 100px wide and you want them to wrap */
}
.pink {
flex-basis: 100px; /* initial width set to 100px */
height: 150px;
background: orange;
padding-top: 0;
padding-right: 0;
}
.pink:nth-child(2) {background: red}
.pink:nth-child(3) {background: blue}
.pink:nth-child(4) {background: green}
<div class="grey">
<div class="innerFlex"> <!-- additional wrapper -->
<div class="pink"></div>
<div class="pink"></div>
<div class="pink"></div>
<div class="pink"></div>
</div>
</div>
With the Grid:
.grey {
display: grid;
grid-template: 150px 150px / auto 100px 100px;
width: 700px;
max-width: 100%;
background: #e5e5e5;
}
.pink:nth-child(1) {grid-column: 2; background: orange}
.pink:nth-child(2) {background: red}
.pink:nth-child(3) {grid-column: 2; background: blue}
.pink:nth-child(4) {background: green}
<div class="grey">
<div class="pink"></div>
<div class="pink"></div>
<div class="pink"></div>
<div class="pink"></div>
</div>
Related
I want divide my HTML Page into 4 different vertical sections .
I want each section to have a different background color, for that I used div but it each background color does not cover the sides of each section.
** My aspire end result:
I don't want to see the color red of the body background color in the html.
body {
background-color: red;
}
.intro {
background-color: #674AB3;
}
.edu {
background-color: #A348A6;
}
.Skills {
background-color: #9F63C4;
}
.end {
background-color: #9075D8;
}
<div class="intro">
<hr>
</div>
<div class="edu">
<hr>
</div>
<div class="Skills">
<hr>
</div>
<div class="end">
<hr>
</div>
.flex-container {
display: flex;
justify-content: center;
align-items: center;
}
.flex-container>div {
margin:30px;
}
.flex-container hr {
width: 100px;
height: 100px;
padding: 5px;
margin: 10px;
border-color: #FFF;
box-shadow: none;
border-width: 5px;
}
.intro {
background-color: #674AB3;
}
.edu {
background-color: #A348A6;
}
.Skills {
background-color: #9F63C4;
}
.end {
background-color: #9075D8;
}
<div class="flex-container">
<div class="intro"><hr></div>
<div class="edu"><hr></div>
<div class="Skills"><hr></div>
<div class="end"><hr></div>
</div>
Set margin: 0 for body, it has a defualt margin.
Set <hr>'s margin to 0.
Set height for each div to be 25vh (vertical height).
body {
background-color: red;
margin: 0;
}
.intro {
background-color: #674AB3;
height: 25vh;
}
.edu {
background-color: #A348A6;
height: 25vh;
}
.Skills {
background-color: #9F63C4;
height: 25vh;
}
.end {
background-color: #9075D8;
height: 25vh;
}
hr {
margin: 0;
}
<div class="intro">
<hr/>
</div>
<div class="edu">
<hr/>
</div>
<div class="Skills">
<hr/>
</div>
<div class="end">
<hr/>
</div>
You could try using grid! might as well make it responsive :D
This is to have 4 sections laying one next to another, to make them stack in the vertical direction, change:
grid-template-columns: repeat(4, 1fr);
to:
grid-template-rows: repeat(4, 1fr);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #00000000; /* transparent color */
display: grid;
grid-template-columns: repeat(4, 1fr); /* 4 vertical sections */
height: 100vh;
margin: auto;
}
.intro {
background-color: #674AB3;
}
.edu {
background-color: #A348A6;
}
.Skills {
background-color: #9F63C4;
}
.end {
background-color: #9075D8;
}
<div class="intro">
<p>intro</p>
</div>
<div class="edu">
<p>edu</p>
</div>
<div class="Skills">
<p>Skills</p>
</div>
<div class="end">
<p>end</p>
</div>
Something like this?
body {
background-color: red;
}
.intro {
height:200px;
background-color: #674AB3 !important;
}
.edu {
height:200px;
background-color: #A348A6 !important;;
}
.Skills {
height:200px;
background-color: #9F63C4 !important;;
}
.end {
height:200px;
background-color: #9075D8 !important;;
}
<div class="intro">
<hr>
</div>
<div class="edu">
<hr>
</div>
<div class="Skills">
<hr>
</div>
<div class="end">
<hr>
</div>
You can try this approach as well.
body {background-color:transparent;}
.intro {
background-color: #674AB3;
height:100vh;
width:100%;
}
.edu {
background-color: #A348A6;
height:100vh;
width:100%;
}
.Skills {
background-color: #9F63C4;
height:100vh;
width:100%;
}
.end {
background-color: #9075D8;
height:100vh;
width:100%;
}
.wrapper {
display:grid;
height:100vh;
width:100%;
}
<div class="wrapper">
<div class="intro">
Hello
</div>
<div class="edu">
Hello
</div>
<div class="Skills">
Hello
</div>
<div class="end">
Hello
</div>
</div>
You can simmply use display: flex to the parent container which is flex-container
like
<div style="display: flex;">
<div class="intro"><hr></div>
<div class="edu"><hr></div>
<div class="Skills"><hr></div>
<div class="end"><hr></div>
</div>
<div class="intro">
</div>
<div class="edu">
</div>
<div class="Skills">
</div>
<div class="end">
</div>
</div>
body {
background-color: red;
}
.main{
display: flex;
grid-template-columns: repeat(4,1fr);
width:100vw;
}
.intro {
background-color: #674AB3;
width: 25%;
height: 75vh;
}
.edu {
background-color: #A348A6;
width: 25%;
height: 75vh;
}
.Skills {
background-color: #9F63C4;
width: 25%;
height: 75vh;
}
.end {
background-color: #9075D8;
width: 25%;
height: vh;
}
grid
<div class="main">
<div class="intro">
</div>
<div class="edu">
</div>
<div class="Skills">
</div>
<div class="end">
</div>
.main{
display: flex;
grid-template-columns: repeat(4,1fr);
width:100vw;
}
.intro {
background-color: #674AB3;
width: 25%;
height: 75vh;
}
.edu {
background-color: #A348A6;
width: 25%;
height: 75vh;
}
.Skills {
background-color: #9F63C4;
width: 25%;
height: 75vh;
}
.end {
background-color: #9075D8;
width: 25%;
height:75vh;
}
I need to know how to build this layout with flex.
My vue component:
<template functional>
<div class="dashboard-wrapper">
<div id="your-parking">Parking</div>
<div id="options">
<div id="parking-menu">Options</div>
<div id="parking-contact"> Call to ...</div>
<div id="payment">Payment</div>
</div>
<div id="noticeboard">Noticeboard</div>
</div>
</template>
<style lang="scss" scoped>
.dashboard-wrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
min-height: 100%;
}
#your-parking{
background-color: cornflowerblue;
order: 1;
width:50%;
min-height: 50%;
}
#options {
order: 2;
min-width:50%;
}
#parking-menu{
max-height: 10vh;
}
#parking-contact{
min-width:50%;
}
#payment{
order: 4;
min-width:50%;
height: 60vh;
background-color: red;
}
#noticeboard{
order: 5;
width:50%;
background-color: goldenrod;
min-height: 50%;
}
</style>
My current result:
Colors and (min|max) height I added for test.
On the phone I want to have list with divs: parking, options, contact, payment, noticeboard.
You could change the structure of your html template and apply CSS like below:
.dashboard-container {
height: 15vh;
border-bottom: 1px solid gray;
}
.content-container {
display: flex;
height: 85vh;
box-sizing: border-box;
}
.left-content, .right-content {
width: 50%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.parking, .noticeboard {
box-sizing: border-box;
flex: 1;
width: 100%;
border: 1px solid black;
}
.options, .contact {
flex: 1;
border: 1px solid black;
}
.payment {
flex: 4;
width: 90%;
margin: auto;
border: 1px solid black;
}
.parking, .noticeboard, .options, .contact, .payment {
margin-bottom: 5vh;
}
<div class="container">
<div class="dashboard-container">
<p>
DASHBOARD
</p>
</div>
<div class="content-container">
<div class="left-content">
<div class="parking">
<p>
PARKING
</p>
</div>
<div class="noticeboard">
<p>
NOTICEBOARD
</p>
</div>
</div>
<div class="right-content">
<div class="options">
<p>
OPTIONS
</p>
</div>
<div class="contact">
<p>
CONTACT
</p>
</div>
<div class="payment">
<p>
PAYMENT
</p>
</div>
</div>
</div>
</div>
You can check the JSFiddle here.
#dashboard{
width:80%;
margin:0 auto;
border:solid 1px grey;
height:10vh;
}
#container{
display:flex;
width:80%;
height:90vh;
border:solid 1px grey;
margin:0 auto;
}
#left,#right{
display:flex;
width:50%;
height:90vh;
border:solid 1px red;
flex-direction:column;
justify-content:flex-start;
align-items:center;
}
#parking,#noteboard{
width:100%;
height:35vh;
border:solid 1px green;
margin-bottom:2vh;
}
#options,#contact{
width:100%;
height:10vh;
border:solid 1px blue;
margin-bottom:2vh;
}
#payment{
width:80%;
height:46vh;
border:solid 1px pink;
}
<div id='dashboard'>Dashboard</div>
<div id='container'>
<div id='left'>
<div id='parking'>parking
</div>
<div id='noteboard'>noteboard
</div>
</div>
<div id='right'>
<div id='options'>options
</div>
<div id='contact'>contact
</div>
<div id='payment'>payment
</div>
</div>
</div>
I'm stuck with wrong output.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.largebox { display: block; margin: 10px; border: 3px solid #73AD21; }
.box1 { display:inline-block; width:20%; height:200px; border:2px solid red; }
.box2 { display:inline-block; width:78%; height:100px; border:2px solid red; }
.col1 { display:inline-block; border:2px solid red; }
</style>
</head>
<body>
<div class="largebox"> <div class="box1">
<div class="leftbox"></div>
</div>
<div class="box2">
<div class="col1">float</div>
</div>
</body>
</html>
You can create this layout with Flexbox.
.largebox, .bottom, .box1 {
display: flex;
flex: 1;
}
.box2 {
flex: 3;
}
.box {
border: 1px solid black;
margin: 10px;
padding: 25px;
flex: 1;
}
<div class="largebox">
<div class="box1">
<div class="box">Div</div>
</div>
<div class="box2">
<div class="box">Div</div>
<div class="bottom">
<div class="box">Div</div>
<div class="box">Div</div>
<div class="box">Div</div>
</div>
</div>
</div>
This is how you can create same layout with inline-block, note that height on container is fixed.
* {
box-sizing: border-box;
}
.largebox {
height: 300px;
}
.bottom, .box1, .box2 {
display: inline-block;
vertical-align: top;
}
.box1 {
width: calc(30% - 10px);
height: 100%;
}
.box2 {
width: calc(70% - 10px);
height: 100%;
margin-left: 5px;
}
.box {
border: 1px solid black;
margin: 10px;
padding: 25px;
display: inline-block;
width: 100%;
height: 100%;
}
.box2 > .box {
height: 50%;
margin-bottom: 0;
width: calc(100% - 10px);
}
.bottom {
width: 100%;
height: 50%;
padding-bottom: 10px;
}
.bottom > .box {
width: calc(33.334% - 10px);
margin-right: 0;
}
<div class="largebox">
<div class="box1">
<div class="box">Div</div>
</div>
<div class="box2">
<div class="box">Div</div>
<div class="bottom">
<div class="box">Div</div><div class="box">Div</div><div class="box">Div</div>
</div>
</div>
</div>
I'd consider experiment with CSS property flex: https://developer.mozilla.org/en/docs/Web/CSS/flex
or use some grid templating system, e.g. Bootstrap https://getbootstrap.com/examples/grid/
need some help. How to fix bug with .half-img2{ margin-top: 10px; }
http://prntscr.com/94uqok
These 2 imgs height must be equal to main-img
http://plnkr.co/edit/Dvj5HfG6hJqvYPxr0ljJ?p=preview
Html:
<style type="text/css">
.test{
display: flex;
}
.test>div{
flex: 1;
}
.test .main-img{
flex-grow: 2;
}
img{
width: 100%;
}
.half-img{
margin-left: 10px;
}
.half-img2{
margin-top: 10px;
}
</style>
<div class="test">
<div class="main-img">
<img src="http://fakeimg.pl/350x200/00CED1/FFF/?text=img+placeholder">
</div>
<div class="half-img">
<div class="half-img1">
<img src="http://fakeimg.pl/350x200/00CED1/FFF/?text=img+placeholder">
</div>
<div class="half-img2">
<img src="http://fakeimg.pl/350x200/00CED1/FFF/?text=img+placeholder">
</div>
</div>
</div>
I'll ignore the images sizes as these are not really relevant to the div layout issue.
A judicious use of margins and flex-column div layout seems to be required.
Layout would be something like this.
* {
box-sizing: border-box;
}
.test {
display: flex;
width: 80%;
margin: 1em auto;
border:1px solid green;
}
img {
display: block;
}
.test div {
}
.main-img {
flex:2;
margin-right: 10px;
background: lightblue;
}
.half-img {
display: flex;
flex-direction: column;
height: 250px;
}
.half-img {
flex:1;
display: flex;
flex-direction: column;
}
.half-img div {
flex:1;
background: lightblue;
}
.half-img1 {
margin-bottom: 5px;
}
.half-img2 {
margin-top: 5px;
}
<div class="test">
<div class="main-img">
</div>
<div class="half-img">
<div class="half-img1">
</div>
<div class="half-img2">
</div>
</div>
</div>
I'm trying to put 3 divs(with different widths respectively : 10%,70% & 20%) in the same row but the middle one always go full width of the page.
Here is my code:
#left-bar {
width: 10%;
background-color: #FF0000;
}
#middle-bar {
width: 70%;
background-color: #6600FF;
}
#right-bar {
width: 20%;
background-color: #99FF99;
}
<div class="row">
<div id="left-bar"></div>
<div id="middle-bar"></div>
<div id="right-bar"></div>
</div>
By default div is a block level element that's why they aren't in the same row.
You have a few options to fix this:
option with CSS flexbox:
.row {
display: flex;
width: 100%
}
.row>div {
/*demo purposes */
height: 30px;
}
#left-bar {
flex: 0 10%;
background-color: #F00;
}
#middle-bar {
flex: 1;
background-color: #60F;
}
#right-bar {
flex: 0 20%;
background-color: #9F9;
}
<div class="row">
<div id="left-bar"></div>
<div id="middle-bar"></div>
<div id="right-bar"></div>
</div>
(old options)
option with display:inline-block
.row {
/*fix inline-block gap*/
font-size: 0;
}
.row>div {
display: inline-block;
/*demo purposes */
height: 30px;
}
#left-bar {
width: 10%;
background-color: #F00;
}
#middle-bar {
width: 70%;
background-color: #60F;
}
#right-bar {
width: 20%;
background-color: #9F9;
}
<div class="row">
<div id="left-bar"></div>
<div id="middle-bar"></div>
<div id="right-bar"></div>
</div>
option with display:table-[cell]
.row {
display: table;
width: 100%
}
.row>div {
display: table-cell;
/*demo purposes */
height: 30px;
}
#left-bar {
width: 10%;
background-color: #F00;
}
#middle-bar {
width: 70%;
background-color: #60F;
}
#right-bar {
width: 20%;
background-color: #9F9;
}
<div class="row">
<div id="left-bar"></div>
<div id="middle-bar"></div>
<div id="right-bar"></div>
</div>
The table-cell option actually doesn't work in some internet explorer versions. But the same result can be achieved with the property float:
#left-bar{
width:10%;
background-color: #FF0000;
}
#middle-bar{
width:70%;
background-color: #6600FF;
}
#right-bar{
width:20%;
background-color: #99FF99;
}
.row > div {float:left;}
<div class="row">
<div id="left-bar">a</div>
<div id="middle-bar">b</div>
<div id="right-bar">c</div>
</div>
#left-bar{
width:10%;
background-color: #FF0000;
float:left;
}
#middle-bar{
width:70%;
background-color: #6600FF;
float:left;
}
#right-bar{
width:20%;
background-color: #99FF99;
float:left;
}
If that doesn't work, please provide more html and css because the problem will be somewhere else. Also, verify that you have heights set for your divs.