Structuring and styling of a HTML page with tabs navigation

4:22 AM 2/1/20191:07 AM 2/25/2019

... and without javascript help. This may look easy, but the fact said otherwise. And since I spent hours to complete it, it is here now for my own reference :)

The basics, in colors

Same as above tabs, with a better look (after some fine-tune)

Feel tree to further adjust it and use it for your webpages...

Note for its "just a bit of complicated" CSS

If you take a look at the source of this page, you'll see that for a simple HMTL structure like below:

<ul class="tabs">
	<li><input id="tab-1" name="tab" type="radio" checked>
		<label for="tab-1">Tab 1</label>
		<div>...</div></li>
	<li><input id="tab-2" name="tab" type="radio">
		<label for="tab-2">Tab 2</label>
		<div>...</div></li>
	<li><input id="tab-3" name="tab" type="radio">
		<label for="tab-3">Tab 3</label>
		<div>...</div></li>
</ul><!-- end of ul.tabs -->

you'll need to style it in a bit hard way (see its styling companion, below):

<style>
	ul.tabs{
		position: relative; /* as ref absolutely positioned ul.tabs's div */
		min-width: 18em; /* avoid list items get wrapped to next line */
		margin-bottom: 13em; /* 1em by default, but now is a bit larger to make room for 
			ul.tabs's div (by pushing page content under ul.tabs to bottom).
			how far? see CSS height rule under ul.tabs input[type="radio"]~div{} somewhere below.*/
	}
	ul.tabs>li{
		display: inline-block; /* list items to be displayed in a line */
	}
	ul.tabs input[type="radio"]{
		display: none; /* hide the traditional radio buttons and use labels instead as menu items */
	}
	ul.tabs input[type="radio"]+label{
		position: relative; /* allow menu items ordering in z direction (see following line below) */
		z-index: 1; /* menu items need to be on top, basically */
		padding: 1em; /* basic padding */
	}
	ul.tabs input[type="radio"]~div{
		display: none;
		position: absolute;
		left: 0;
		width: calc(100% - 2em);
		height: 10em; /* distance to push page content under ul.tabs,
			see margin-bottom rule under ul.tabs{} rule above.*/
		overflow: auto; /* show scroller when necessary */
		padding: 1em; /* basic padding to content */
	}
	ul.tabs input[type="radio"]:checked~div{
		display: block;
	}
</style>

We may want to work on an alternative, using CSS feature :target, but I find that much much harder in other couple of ways:

Comments