Position left sidebar with CSS - html

I am trying to design a layout with a left sidebar and a centered header. I have the header and sidebar in a wrapper div so that they can be centered on the page, but I want the sidebar to be a little left of the header like in this screenshot
How can I achieve this? Right now, when I re-size the window, the sidebar won't follow the header. Any help would be appreciated, I am still learning CSS. Thanks.
Here is my HTML and CSS (note: I had a margin: 0 auto 0 15px for the nav but took it out):
<body>
<div id="wrapper">
<header>
</header>
<nav>
<ul>
</ul>
</nav>
</div>
body {
margin:0;
padding: 5px;
background-color: #121212;
}
#wrapper {
margin:0 auto 0 auto;
width:1024;
}
header {
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #0C0DA6 0%, #0E0B58 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #0C0DA6 0%, #0E0B58 100%);
/* Opera */
background-image: -o-linear-gradient(top, #0C0DA6 0%, #0E0B58 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0C0DA6), color-stop(1, #0E0B58));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #0C0DA6 0%, #0E0B58 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #0C0DA6 0%, #0E0B58 100%);
width: 768px;
height:100px;
border-radius: 4px;
border: 2px solid #adadad;
margin:0 auto 0 auto;
}
nav {
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #0C0DA6 0%, #0E0B58 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #0C0DA6 0%, #0E0B58 100%);
/* Opera */
background-image: -o-linear-gradient(top, #0C0DA6 0%, #0E0B58 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0C0DA6), color-stop(1, #0E0B58));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #0C0DA6 0%, #0E0B58 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #0C0DA6 0%, #0E0B58 100%);
width:230px;
height:235px;
border-radius: 4px;
border: 2px solid #adadad;
}


Here you go: http://jsfiddle.net/WMYmV/1/
Changed style:
header {
width: 538px; //(768px - width of sidebar)
margin: 0 auto 0 230px;
}

Related

How to make images responsive using CSSGrid

Im trying to insert 8 images into a 2x4 CSSGrid. I have width set to 100% but when I set height to 100% the bottom row of images end up below the footer instead of below the first row of images. Setting the height using px works, but its not responsive at all compared to using %. Any ideas? Ive been told using flexbox would be better but I want to just strictly use CSSGrid for this problem.
<!DOCTYPE html>
<html>
<head>
<title>Layout Master</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="zone green">
<span>About</span>
<span>Products</span>
<span>Our Team</span>
<span id="Contact">Contact</span>
</div>
<div class="zone red">Cover</div>
<div class="zone blue">
<img src="data_storage_2_2.png" alt="data storage">
<img src="desktop_analytics_2.png" alt="desktop analytics">
<img src="files_2.png" alt="files">
<img src="monitor_coding_2.png" alt="monitor coding">
<img src="monitor_settings_2.png" alt="monitor settings">
<img src= "server_2_2.png" alt="server">
<img src="server_3.png" alt="server">
<img src="server_safe_2.png" alt=server safe>
</div>
<div class="zone yellow">Made By Cristobal Manrique</div>
</div>
</body>
</html>
.container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 4fr 8fr 1fr;
}
.green {
display: flex;
align-self: center;
}
.green span{
margin-left: 20px;
}
#Contact {
margin-left: auto;
}
.zone.blue{
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(4, minmax(200px, 1fr));
grid-template-rows: repeat(2, minmax(200px, 1fr));
}
.zone {
padding:30px 50px;
cursor:pointer;
color:#FFF;
font-size:2em;
border-radius:4px;
border:1px solid #bbb;
transition: all 0.3s linear;
}
.zone:hover {
-webkit-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
-moz-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
-o-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
}
/*https://paulund.co.uk/how-to-create-shiny-css-buttons*/
/***********************************************************************
* Green Background
**********************************************************************/
.green{
background: #56B870; /* Old browsers */
background: -moz-linear-gradient(top, #56B870 0%, #a5c956 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#56B870), color-stop(100%,#a5c956)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #56B870 0%,#a5c956 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #56B870 0%,#a5c956 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #56B870 0%,#a5c956 100%); /* IE10+ */
background: linear-gradient(top, #56B870 0%,#a5c956 100%); /* W3C */
}
/***********************************************************************
* Red Background
**********************************************************************/
.red{
background: #C655BE; /* Old browsers */
background: -moz-linear-gradient(top, #C655BE 0%, #cf0404 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C655BE), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* IE10+ */
background: linear-gradient(top, #C655BE 0%,#cf0404 100%); /* W3C */
}
/***********************************************************************
* Yellow Background
**********************************************************************/
.yellow{
display: flex;
justify-content: center;
background: #F3AAAA; /* Old browsers */
background: -moz-linear-gradient(top, #F3AAAA 0%, #febf04 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F3AAAA), color-stop(100%,#febf04)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* IE10+ */
background: linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* W3C */
}
/***********************************************************************
* Blue Background
**********************************************************************/
.blue{
background: #7abcff; /* Old browsers */
background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* IE10+ */
background: linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C */
}
img{
background-color: black;
width: 100%;
height: 100%;
}

Have you tried using 100vh instead of 100%

#msmoore's anser can be used, but that then restricts your height.
Instead I've provided a jsFiddle of your example with some sample images from imgur check it out here.
The real change was adding object-fit: cover; to your img css like this.
img {
object-fit: cover; /* ensures the image tries to cover all the space given to it */
background-color: black;
width: 100%;
}
Still this is not ideal code when dealing with images/galleries - try to use bootstrap or some similar library that offers more responsive grid solutions.

A quick solution is to wrap your images with a container:
<div class="image-container">
<img src="data_storage_2_2.png" alt="data storage">
</div>
Example: https://jsbin.com/qeqajozoge/edit?html,css,output
height: 100% only works when the ancestor element also has a defined height. If the parent's height is not defined, the browser will look at the parent's parent height until it finds a defined height (and so on) to resolve it. You do not want the parent's height, but the height of the grid row and the result is unexpected. A workaround is to add a container div which adjusts itself to the grid, and you can set your image's height to 100%.
Note that setting the images' heights will distort them, it is better if you can keep their aspect ratio. In such case you can consider other solutions like #Danail Gabenski's answer. The vh solution however will not give you the result you want in this case.

White space at the bottom of a web page on low browser resolutions (CSS-Grid layout)

I've been trying to make a simple site layout using CSS-Grid.
Everything is working just fine and is responsive, but when I minimize my browser to really small resolutions scroll bars appears and the css-grid stops stretching over the entire page height, causing a blank white space on the bottom.
To see what I mean, simply run the snippet I've inserted as it opens in a low height window. I've also uploaded pictures of how it shows on my browser.
How it shows on normal height:
What happens when I reduce height:
I tried playing around with overflow and min-height, but couldn't work it out. It is not really a critical issue but I'm really interested just to understand why it happens. Thanks!
body, html{
height: 100vh;
min-height: 100vh;
min-width: 300px;
margin: 0;
padding: 0;
}
.grid-container-1{
height: 100vh;
min-height: 100vh;
min-width: 300px;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 8% 70% auto 8% ;
grid-template-areas:
"header1 header1 header1 header1"
"Cover Cover Cover Cover"
"Project Project Project Project"
"Footer Footer Footer Footer"
}
.header1{
grid-area: header1;
}
.cover{
grid-area: Cover;
}
.Project{
grid-area: Project;
}
.Footer{
grid-area: Footer;
}
.zone {
cursor:pointer;
color:#FFF;
font-size:2em;
border-radius:4px;
border:1px solid #bbb;
transition: all 0.3s linear;
}
.zone:hover {
-webkit-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
-moz-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
-o-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
}
/*https://paulund.co.uk/how-to-create-shiny-css-buttons*/
/***********************************************************************
* Green Background
**********************************************************************/
.green{
background: #56B870; /* Old browsers */
background: -moz-linear-gradient(top, #56B870 0%, #a5c956 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#56B870), color-stop(100%,#a5c956)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #56B870 0%,#a5c956 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #56B870 0%,#a5c956 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #56B870 0%,#a5c956 100%); /* IE10+ */
background: linear-gradient(top, #56B870 0%,#a5c956 100%); /* W3C */
}
/***********************************************************************
* Red Background
**********************************************************************/
.red{
background: #C655BE; /* Old browsers */
background: -moz-linear-gradient(top, #C655BE 0%, #cf0404 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C655BE), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* IE10+ */
background: linear-gradient(top, #C655BE 0%,#cf0404 100%); /* W3C */
}
/***********************************************************************
* Yellow Background
**********************************************************************/
.yellow{
background: #F3AAAA; /* Old browsers */
background: -moz-linear-gradient(top, #F3AAAA 0%, #febf04 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F3AAAA), color-stop(100%,#febf04)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* IE10+ */
background: linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* W3C */
}
/***********************************************************************
* Blue Background
**********************************************************************/
.blue{
background: #7abcff; /* Old browsers */
background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* IE10+ */
background: linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C */
}
<!DOCTYPE html>
<html>
<head>
<title>CSS Layout</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="grid-container-1">
<div class="header1 zone green">
Header
</div>
<div class="cover zone red">
Cover
</div>
<div class="Project zone blue">
Projects
</div>
<div class="Footer zone yellow">
Footer
</div>
</div>
</body>
</html>

Your font is too large for the last row height and it spills out of it's container.
One of the solutions is to change the last row size to 1fr:
body, html{
height: 100vh;
min-height: 100vh;
min-width: 300px;
margin: 0;
padding: 0;
}
.grid-container-1{
height: 100vh;
min-height: 100vh;
min-width: 300px;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 8% 70% auto 1fr;
grid-template-areas:
"header1 header1 header1 header1"
"Cover Cover Cover Cover"
"Project Project Project Project"
"Footer Footer Footer Footer"
}
.header1{
grid-area: header1;
}
.cover{
grid-area: Cover;
}
.Project{
grid-area: Project;
}
.Footer{
grid-area: Footer;
}
.zone {
cursor:pointer;
color:#FFF;
font-size:2em;
border-radius:4px;
border:1px solid #bbb;
transition: all 0.3s linear;
}
.zone:hover {
-webkit-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
-moz-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
-o-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
}
/*https://paulund.co.uk/how-to-create-shiny-css-buttons*/
/***********************************************************************
* Green Background
**********************************************************************/
.green{
background: #56B870; /* Old browsers */
background: -moz-linear-gradient(top, #56B870 0%, #a5c956 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#56B870), color-stop(100%,#a5c956)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #56B870 0%,#a5c956 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #56B870 0%,#a5c956 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #56B870 0%,#a5c956 100%); /* IE10+ */
background: linear-gradient(top, #56B870 0%,#a5c956 100%); /* W3C */
}
/***********************************************************************
* Red Background
**********************************************************************/
.red{
background: #C655BE; /* Old browsers */
background: -moz-linear-gradient(top, #C655BE 0%, #cf0404 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C655BE), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* IE10+ */
background: linear-gradient(top, #C655BE 0%,#cf0404 100%); /* W3C */
}
/***********************************************************************
* Yellow Background
**********************************************************************/
.yellow{
background: #F3AAAA; /* Old browsers */
background: -moz-linear-gradient(top, #F3AAAA 0%, #febf04 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F3AAAA), color-stop(100%,#febf04)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* IE10+ */
background: linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* W3C */
}
/***********************************************************************
* Blue Background
**********************************************************************/
.blue{
background: #7abcff; /* Old browsers */
background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* IE10+ */
background: linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C */
}
<!DOCTYPE html>
<html>
<head>
<title>CSS Layout</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="grid-container-1">
<div class="header1 zone green">
Header
</div>
<div class="cover zone red">
Cover
</div>
<div class="Project zone blue">
Projects
</div>
<div class="Footer zone yellow">
Footer
</div>
</div>
</body>
</html>

When your viewport is too small to fit your header and footer, your text size is overflowing - as a quick fix you can add overflow: hidden to zone to solve this in smaller screens - see demo below:
body, html{
height: 100vh;
min-height: 100vh;
min-width: 300px;
margin: 0;
padding: 0;
}
.grid-container-1{
height: 100vh;
min-height: 100vh;
min-width: 300px;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 8% 70% auto 8% ;
grid-template-areas:
"header1 header1 header1 header1"
"Cover Cover Cover Cover"
"Project Project Project Project"
"Footer Footer Footer Footer"
}
.header1{
grid-area: header1;
}
.cover{
grid-area: Cover;
}
.Project{
grid-area: Project;
}
.Footer{
grid-area: Footer;
}
.zone {
cursor:pointer;
color:#FFF;
font-size:2em;
border-radius:4px;
border:1px solid #bbb;
transition: all 0.3s linear;
overflow: hidden; /* ADDED */
}
.zone:hover {
-webkit-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
-moz-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
-o-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
}
/*https://paulund.co.uk/how-to-create-shiny-css-buttons*/
/***********************************************************************
* Green Background
**********************************************************************/
.green{
background: #56B870; /* Old browsers */
background: -moz-linear-gradient(top, #56B870 0%, #a5c956 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#56B870), color-stop(100%,#a5c956)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #56B870 0%,#a5c956 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #56B870 0%,#a5c956 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #56B870 0%,#a5c956 100%); /* IE10+ */
background: linear-gradient(top, #56B870 0%,#a5c956 100%); /* W3C */
}
/***********************************************************************
* Red Background
**********************************************************************/
.red{
background: #C655BE; /* Old browsers */
background: -moz-linear-gradient(top, #C655BE 0%, #cf0404 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C655BE), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* IE10+ */
background: linear-gradient(top, #C655BE 0%,#cf0404 100%); /* W3C */
}
/***********************************************************************
* Yellow Background
**********************************************************************/
.yellow{
background: #F3AAAA; /* Old browsers */
background: -moz-linear-gradient(top, #F3AAAA 0%, #febf04 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F3AAAA), color-stop(100%,#febf04)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* IE10+ */
background: linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* W3C */
}
/***********************************************************************
* Blue Background
**********************************************************************/
.blue{
background: #7abcff; /* Old browsers */
background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* IE10+ */
background: linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C */
}
<!DOCTYPE html>
<html>
<head>
<title>CSS Layout</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="grid-container-1">
<div class="header1 zone green">
Header
</div>
<div class="cover zone red">
Cover
</div>
<div class="Project zone blue">
Projects
</div>
<div class="Footer zone yellow">
Footer
</div>
</div>
</body>
</html>
Because the text is overflowing the elements is not very useful, you need to adjust the heights of your header and footer in your grid-template-rows to a value something like grid-template-rows: 3em 1fr auto 3em:
body, html{
height: 100vh;
min-height: 100vh;
min-width: 300px;
margin: 0;
padding: 0;
}
.grid-container-1{
height: 100vh;
min-height: 100vh;
min-width: 300px;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 3em 1fr auto 3em; /* CHANGED */
grid-template-areas:
"header1 header1 header1 header1"
"Cover Cover Cover Cover"
"Project Project Project Project"
"Footer Footer Footer Footer"
}
.header1{
grid-area: header1;
}
.cover{
grid-area: Cover;
}
.Project{
grid-area: Project;
}
.Footer{
grid-area: Footer;
}
.zone {
cursor:pointer;
color:#FFF;
font-size:2em;
border-radius:4px;
border:1px solid #bbb;
transition: all 0.3s linear;
}
.zone:hover {
-webkit-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
-moz-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
-o-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
}
/*https://paulund.co.uk/how-to-create-shiny-css-buttons*/
/***********************************************************************
* Green Background
**********************************************************************/
.green{
background: #56B870; /* Old browsers */
background: -moz-linear-gradient(top, #56B870 0%, #a5c956 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#56B870), color-stop(100%,#a5c956)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #56B870 0%,#a5c956 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #56B870 0%,#a5c956 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #56B870 0%,#a5c956 100%); /* IE10+ */
background: linear-gradient(top, #56B870 0%,#a5c956 100%); /* W3C */
}
/***********************************************************************
* Red Background
**********************************************************************/
.red{
background: #C655BE; /* Old browsers */
background: -moz-linear-gradient(top, #C655BE 0%, #cf0404 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C655BE), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* IE10+ */
background: linear-gradient(top, #C655BE 0%,#cf0404 100%); /* W3C */
}
/***********************************************************************
* Yellow Background
**********************************************************************/
.yellow{
background: #F3AAAA; /* Old browsers */
background: -moz-linear-gradient(top, #F3AAAA 0%, #febf04 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F3AAAA), color-stop(100%,#febf04)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* IE10+ */
background: linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* W3C */
}
/***********************************************************************
* Blue Background
**********************************************************************/
.blue{
background: #7abcff; /* Old browsers */
background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* IE10+ */
background: linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C */
}
<!DOCTYPE html>
<html>
<head>
<title>CSS Layout</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="grid-container-1">
<div class="header1 zone green">
Header
</div>
<div class="cover zone red">
Cover
</div>
<div class="Project zone blue">
Projects
</div>
<div class="Footer zone yellow">
Footer
</div>
</div>
</body>
</html>

Make 4 cells with divisor

How can I make these divisors of a simplest box. I have this simple box html and css.
HTML code is:
<div id="box"></div>
and CSS code of box is:
#box{
width: 350px;
height: 200px;
border-radius: 5px; /* IE10+ */
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%); /* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%); /* Opera */
background-image: -o-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%); /* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(100, #d6d6d6)); /* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%); /* W3C Markup */
background-image: linear-gradient(to bottom, #FFFFFF 0%, #d6d6d6 100%);
}
OK. Let's go to divisor... how can i do them? Image linked is here:
Thanks

A couple of pseudo-elements overlaid on top might work:
body {
background: #c0ffee;
}
#box {
width: 350px;
height: 200px;
margin: 2em auto;
border-radius: 5px;
/* IE10+ */
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%);
/* Opera */
background-image: -o-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(100, #d6d6d6));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%);
/* W3C Markup */
background-image: linear-gradient(to bottom, #FFFFFF 0%, #d6d6d6 100%);
position: relative;
}
#box::before,
#box::after {
content: '';
position: absolute;
}
#box::before {
width: 100%;
top: 50%;
left: 0;
margin-top: -3px;
height: 4px;
background: linear-gradient(to bottom, white, lightgrey);
border-radius: 2px;
z-index: 1;
}
#box::after {
width: 4px;
top: 0%;
left: 50%;
margin-left: -3px;
height: 100%;
background: linear-gradient(to left, white, lightgrey);
border-radius: 3px;
z-index: 2;
}
<div id="box"></div>

You are either going to need to insert a background image with the lines on the image or create sections within the box and styling the box based on where it is located in the main box.
#box{
width: 350px;
height: 200px;
border-radius: 5px; /* IE10+ */
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%); /* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%); /* Opera */
background-image: -o-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%); /* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(100, #d6d6d6)); /* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%); /* W3C Markup */
background-image: linear-gradient(to bottom, #FFFFFF 0%, #d6d6d6 100%);
font-size:0px;
}
.section{
width:49.25%;
height:49%;
margin:0px;
padding:0px;
display:inline-block;
}
#top-left{
border-bottom:5px solid white;
border-right:5px solid white;
}
#top-right{
border-bottom:5px solid white;
}
#bottom-left{
border-right:5px solid white;
}
<div id="box">
<div class="section" id="top-left"></div>
<div class="section" id="top-right"></div>
<div class="section" id="bottom-left"></div>
<div class="section" id="bottom-right"></div>
</div>

JSF. Change buttons/commandButtons text style

I need change the jsf(now use jsf 2.2) button text style. I didn't find any default styles in the other forums(like .ui-buttons, .ui-buttons-text-only, it doesn't work).
As example, I need a button with sizes(200, 200, blue), in the center of this rectangle new (20,20, white) and the simple text "blah". If
try
<h:button value="Logout" outcome="welcome" styleClass="button">
<h:outputLabel value="blah" styleClass="some_style">
</h:button>
result will be next -> button, after it the text 'blah', but I need text inside button.
Have anyone same problem?
I need much same butons and commandButtons. Maybe some can give advice about reasons to create own jsf element with need parameters and styles?
Thx

Because there is small space in comment section, I post it as answer.
For changing background, font size, style of button the following syntax and styles can be used:
html
<h:commandButton value="blah" action="welcome" styleClass="richButton" />
css
.richButton {
margin:0 5px 0 0;
padding:5px 10px 5px 10px;
height:29px;
font-size:12px;
color:#262626;
font-weight:bold;
border:1px #ccc solid;
border-radius:5px;
cursor:pointer;
font-family:Arial, Helvetica, sans-serif;
/* IE10 Consumer Preview */
background: -ms-linear-gradient(top, #FFFFFF 0%, #E3E3E3 100%);
/* Mozilla Firefox */
background: -moz-linear-gradient(top, #FFFFFF 0%, #E3E3E3 100%);
/* Opera */
background: -o-linear-gradient(top, #FFFFFF 0%, #E3E3E3 100%);
/* Webkit (Safari/Chrome 10) */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #E3E3E3));
/* Webkit (Chrome 11+) */
background: -webkit-linear-gradient(top, #FFFFFF 0%, #E3E3E3 100%);
/* W3C Markup, IE10 Release Preview */
background: linear-gradient(to bottom, #FFFFFF 0%, #E3E3E3 100%);
}
.richButton:hover:enabled {
/* IE10 Consumer Preview */
background: -ms-linear-gradient(top, #FFFFFF 0%, #CCCCCC 100%);
/* Mozilla Firefox */
background: -moz-linear-gradient(top, #FFFFFF 0%, #CCCCCC 100%);
/* Opera */
background: -o-linear-gradient(top, #FFFFFF 0%, #CCCCCC 100%);
/* Webkit (Safari/Chrome 10) */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #CCCCCC));
/* Webkit (Chrome 11+) */
background: -webkit-linear-gradient(top, #FFFFFF 0%, #CCCCCC 100%);
/* W3C Markup, IE10 Release Preview */
background: linear-gradient(to bottom, #FFFFFF 0%, #CCCCCC 100%);
}
.richButton:active:enabled {
/* IE10 Consumer Preview */
background: -ms-linear-gradient(top, #F0F0F0 0%, #CCCCCC 100%);
/* Mozilla Firefox */
background: -moz-linear-gradient(top, #F0F0F0 0%, #CCCCCC 100%);
/* Opera */
background: -o-linear-gradient(top, #F0F0F0 0%, #CCCCCC 100%);
/* Webkit (Safari/Chrome 10) */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F0F0F0), color-stop(1, #CCCCCC));
/* Webkit (Chrome 11+) */
background: -webkit-linear-gradient(top, #F0F0F0 0%, #CCCCCC 100%);
/* W3C Markup, IE10 Release Preview */
background: linear-gradient(to bottom, #F0F0F0 0%, #CCCCCC 100%);
}
.richButton:disabled {
font-weight: normal;
color: #888888;
}
You need change size, border size, border radius, background.

CSS background-image gradient and border-line on bigger element

I'd like to have a background-image with a line on the end.
The border or line should begin where the background-size ends.
The border line is grey in the concept. It should stay just one element.
background-image: gradient-y(#color-grey-2, #color-white);
background-position: left top;
background-size: 100% 40px;
background-repeat: no-repeat;

http://jsfiddle.net/8Q79p/ OLD JSFIDDLE. (Wrapper)
http://jsfiddle.net/8Q79p/1/ Updated; if you want just one element, you can use color-stop
<div id="gradient">
</div>
#gradient{
background: rgb(221,221,221); /* Old browsers */
background: -moz-linear-gradient(top, rgba(221,221,221,1) 1%, rgba(255,255,255,1) 46%, rgba(149,149,149,1) 47%, rgba(149,149,149,1) 48%, rgba(255,255,255,1) 49%, rgba(252,252,252,1) 100%, rgba(27,27,27,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(221,221,221,1)), color-stop(46%,rgba(255,255,255,1)), color-stop(47%,rgba(149,149,149,1)), color-stop(48%,rgba(149,149,149,1)), color-stop(49%,rgba(255,255,255,1)), color-stop(100%,rgba(252,252,252,1)), color-stop(100%,rgba(27,27,27,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(221,221,221,1) 1%,rgba(255,255,255,1) 46%,rgba(149,149,149,1) 47%,rgba(149,149,149,1) 48%,rgba(255,255,255,1) 49%,rgba(252,252,252,1) 100%,rgba(27,27,27,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(221,221,221,1) 1%,rgba(255,255,255,1) 46%,rgba(149,149,149,1) 47%,rgba(149,149,149,1) 48%,rgba(255,255,255,1) 49%,rgba(252,252,252,1) 100%,rgba(27,27,27,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(221,221,221,1) 1%,rgba(255,255,255,1) 46%,rgba(149,149,149,1) 47%,rgba(149,149,149,1) 48%,rgba(255,255,255,1) 49%,rgba(252,252,252,1) 100%,rgba(27,27,27,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(221,221,221,1) 1%,rgba(255,255,255,1) 46%,rgba(149,149,149,1) 47%,rgba(149,149,149,1) 48%,rgba(255,255,255,1) 49%,rgba(252,252,252,1) 100%,rgba(27,27,27,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#1b1b1b',GradientType=0 ); /* IE6-9 */
width: 100%;
height: 100px;
border: solid 1px black;
}