I want help on how can i create vertical border like in in sample image.
Try to use CSS Grid
https://css-tricks.com/snippets/css/complete-guide-grid/
I wrote this code to show you how would be look grid on your template website
.item1 { grid-area: header; }
.item2 { grid-area: left; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
display: grid;
grid-template-areas:
'left header header header header right'
'left main main main main right'
'left footer footer footer footer right';
grid-gap: 10px;
background-color: #2196F3;
padding: 7px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 40px 0;
font-size: 30px;
}
<!DOCTYPE html>
<html>
<body>
<div class="grid-container">
<div class="item1">Header</div>
<div class="item2">Left</div>
<div class="item3">Main</div>
<div class="item4">Right</div>
<div class="item5">Footer</div>
</div>
</body>
</html>
Related
I essentially have a table that displays data from a database. I am using bootstrap to assist the design of the website. Here is a screenshot that shows the issue: https://imgur.com/a/FV7UFhn
Here is the HTML:
http://pastie.org/p/2mPG3zE7b6AdHOuoJrMDZV
Here is the relevant CSS:
http://pastie.org/p/14nCCfRGIA4WrFLXrFqNWe
I sent them using pastie.org as they are probably too big to paste into stackoverflow
I recommend you use css flex for the base template of your site if it's a one dimensional array layout (e.g single colimn head, body, foot).
html,
body {
min-height: 100%;
}
.container {
height: 100vh;
display: flex;
flex-direction: column;
}
header {
background: #eee;
flex: 0 0 50px;
}
main {
background: #aaa;
flex: 1;
}
footer {
background: #888;
flex: 0 0 100px;
}
<div class="container">
<header>
HEAD
</header>
<main>
BODY
</main>
<footer>
FOOT
</footer>
</div>
If it is a two dimensional array (e.g contains sidebars) then I recommend using css grid for the base template.
HOLY GRAIL EXAMPLE
.container {
display: grid;
grid-template-areas: "header header header" "nav content side" "footer footer footer";
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
height: 100vh;
}
header {
background: #eee;
grid-area: header;
}
nav {
background: #888;
grid-area: nav;
}
main {
background: #aaa;
grid-area: content;
}
aside {
background: #888;
grid-area: side;
}
footer {
background: #bbb;
grid-area: footer;
}
<div class="container">
<header>
HEAD
</header>
<nav>
NAV
</nav>
<main>
BODY
</main>
<aside>
SIDE
</aside>
<footer>
FOOT
</footer>
</div>
How can I make a div that overrides all the template areas and goes to the front, so that the item6 will be displaying in front of all the other items.
I tried to with grid-row-start and grid-row-end but it doesn't seem to work
<!DOCTYPE html>
<html>
<head>
<style>
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.item6 { grid-row-start: 0;
grid-row-end: 6}
.grid-container {
display: grid;
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="item1">Header</div>
<div class="item2">Menu</div>
<div class="item3">Main</div>
<div class="item4">Right</div>
<div class="item5">Footer</div>
<div class="item6">Override everything</div>
</div>
</body>
</html>
There is no grid-column-start: 0 they all start with 1.
Also you have to specify the grid-columns to be covered.
<!DOCTYPE html>
<html>
<head>
<style>
.item1 {
grid-area: header;
}
.item2 {
grid-area: menu;
}
.item3 {
grid-area: main;
}
.item4 {
grid-area: right;
}
.item5 {
grid-area: footer;
}
.item6 {
grid-row-start: 1;
grid-row-end: 6;
grid-column-start: 1;
grid-column-end: -1
}
.grid-container {
display: grid;
grid-template-areas: 'header header header header header header' 'menu main main main right right' 'menu footer footer footer footer footer';
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container>div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="item1">Header</div>
<div class="item2">Menu</div>
<div class="item3">Main</div>
<div class="item4">Right</div>
<div class="item5">Footer</div>
<div class="item6">Override everything</div>
</div>
</body>
</html>
I'm trying to modify grid I using grid from https://www.w3schools.com/ but I tried but it was not working help me to create grid.
i need this grid in below code
this code I copied from w3schools link https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_layout_named
code
<!DOCTYPE html>
<html>
<head>
<style>
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
display: grid;
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Grid Layout</h1>
<p>This grid layout contains six columns and three rows:</p>
<div class="grid-container">
<div class="item1">Header</div>
<div class="item2">Menu</div>
<div class="item3">Main</div>
<div class="item4">Right</div>
<div class="item5">Footer</div>
</div>
</body>
</html>
How would my code look for the following layout? How do I create multiple nav and headers in HTML?
Simply use grid-template-areas to set your layout:
body {
display: grid;
grid-template-areas:
"headerA headerB headerB headerB headerB"
"headerA navB navB navB navB"
"navA article article article aside"
"footer footer footer footer footer";
}
.header-1 {
grid-area: headerA;
}
.header-2 {
grid-area: headerB;
}
.nav-1 {
grid-area: navA;
}
.nav-2 {
grid-area: navB;
}
.article {
grid-area: article;
}
.aside {
grid-area: aside;
}
.footer {
grid-area: footer;
}
/* for styling puropse only */
body {
grid-gap: 2px;
}
body > div {
display: flex;
justify-content: center;
align-items: center;
min-height: 50px;
box-shadow: 0 0 0 2px lightgrey;
}
.article {
min-height: 102px;
}
<div class="header-1">Header 1</div>
<div class="header-2">Header 2</div>
<div class="nav-1">Navigation Bar 1</div>
<div class="nav-2">Navigation Bar 1</div>
<div class="article">Article</div>
<div class="aside">Aside</div>
<div class="footer">Footer</div>
I have next grid:
.item1 { grid-area: left; }
.item2 { grid-area: left2; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.grid-container {
display: grid;
grid-template-areas:
'left left main main main right'
'left2 left2 main main main right';
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
grid-template-columns: repeat(auto-fill);
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
<div class="grid-container">
<div class="item1">left1</div>
<div class="item2">left2</div>
<div class="item3">Main</div>
<div class="item4">Right</div>
</div>
How to apply for this grid a wrap functionality when the screen becomes small?
EX: when i will resize the screen the blocks should be aligned in a column (one above one).
.item1 { grid-area: left; }
.item2 { grid-area: left2; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.grid-container {
display: grid;
grid-template-areas:
'left left main main main right'
'left2 left2 main main main right';
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
grid-template-columns: repeat(auto-fill);
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
#media only screen and (max-width: 600px) {
.grid-container {
display:flex;
flex-direction:column;
}
}
<div class="grid-container">
<div class="item1">left1</div>
<div class="item2">left2</div>
<div class="item3">Main</div>
<div class="item4">Right</div>
</div>
Try to add this part in your code.
#media only screen and (max-width: 600px) {
.grid-container {
display:flex;
flex-direction:column;
}
}