Month (or whatever)

1
2
3
4
5
6
7
8
9
10
11
12
13

Below is the HTML to generate this page as shown above. Values assigned to margins, dimensions, borders, colors, etc. are arbitrary.

<!DOCTYPE html>

<html>

<head>

<style>

content {margin:100px 100px 10px 100px; display:block; width:auto; height: auto; border: none; background: transparent; padding:10px;}

.holder { display: flex; flex-wrap: nowrap; background-color: transparent;
}

.holder > div { background-color: #f1f1f1; width: 100px; margin: 0; text-align: center; line-height: 75px; font-size: 30px; border: 1px solid LightBlue; }

ul.n { list-style-type: none; /* default */ list-style-position: outside; /* default */ }

ul.n li { display: inline; padding: 20px; }

nav {top:0px; left:1px; width: 100%; height:80px; position:fixed; padding: 2px 4px 6px 4px; text-align: left; font-size: 24px; font-weight: bold; color: black; background: DodgerBlue;}

nav a:visited, nav a {height:80px; margin:0 auto; border-top:1px solid #000000; border-bottom:1px solid #000; text-align: left; text-decoration:none; line-height:20px; color: black;}

nav a:hover {background:#aaa; color:#fff;}

</style>

</head>

<body>

<content>

<h1>Month (or whatever)</h1>

<div class="holder"> <div></div> <div> 1</div> <div> 2</div> <div> 3</div> <div> 4</div> <div> 5</div> <div> 6</div> </div>

<div class="holder"> <div> 7</div> <div> 8</div> <div> 9</div> <div> 10</div> <div> 11</div> <div> 12</div> <div> 13</div> </div>

</content>

<nav>

<ul class="n">
<li><a href= "https://johnandval.org" title= "John's and Val's Website"><img src= "jfa.ico" width= "40px" title= "Alexander icon"></a></li> <li><a href= "nav+summary.html" title= "Another navigtion example">Web Nav</a></li> <li><a href= "index.html">Index</a></li>
</ul>

</nav>

</body>

</html>