Hi all,
This is a question for which I cannot find an answer online - yet!
I have a simple HTML document, with a linked CSS file. The HTML contains a grid with top: 0px; yet there is a gap between the grid and the top of the browser window when rendered. Can anyone explain why top is NOT top?
<!DOCTYPE html>
<html>
<head>
<title>Trial webpage</title>
<link rel="stylesheet" href="css/trialcss.css">
</head>
<body>
<div class="gridheader">
</div>
</body>
</html>
* {
box-sizing: border-box;
}
body {
width: 100%;
margin-left:auto;
margin-right:auto;
background-color: green;
}
.gridheader {
position: -webkit-sticky;
position: sticky;
background-color: white; /*Having a background color is vital for the sticky header to look good*/
border-style: solid; /*Just for guidence purposes*/
border-color: white;
display: grid; /*Display as a grid*/
grid-gap: 5px;
padding: 5px;
grid-template-columns: 300px 1fr 1fr; /*Set the column widths: 1fr = 1 fraction*/
grid-template-areas: /*Name areas and set layout*/
'logo logo cta'
'menu menu menu'
'spacer spacer spacer';
}
Screenshot:
Thanks in advance,
Dermot
This is a question for which I cannot find an answer online - yet!
I have a simple HTML document, with a linked CSS file. The HTML contains a grid with top: 0px; yet there is a gap between the grid and the top of the browser window when rendered. Can anyone explain why top is NOT top?
<!DOCTYPE html>
<html>
<head>
<title>Trial webpage</title>
<link rel="stylesheet" href="css/trialcss.css">
</head>
<body>
<div class="gridheader">
</div>
</body>
</html>
* {
box-sizing: border-box;
}
body {
width: 100%;
margin-left:auto;
margin-right:auto;
background-color: green;
}
.gridheader {
position: -webkit-sticky;
position: sticky;
background-color: white; /*Having a background color is vital for the sticky header to look good*/
border-style: solid; /*Just for guidence purposes*/
border-color: white;
display: grid; /*Display as a grid*/
grid-gap: 5px;
padding: 5px;
grid-template-columns: 300px 1fr 1fr; /*Set the column widths: 1fr = 1 fraction*/
grid-template-areas: /*Name areas and set layout*/
'logo logo cta'
'menu menu menu'
'spacer spacer spacer';
}
Screenshot:
Thanks in advance,
Dermot
