Home Index
Link Another Yet More

Example of Changing the Webpage as a Function of the Viewing Device

This puts the navigation bar on top if viewed on a small-screen device. View on your PC and on your smartphone to see how it works.

There are easier ways of changing the style sheet to change in accordance with screen size, but understanding what is being done usually requires ones' being intimately familiar with CSS and webpage design. I believe anyone who writes style sheets and HTML code can understand the CSS for this page.

An In-line List

This list can be placed inside a navigation section. Padding of list items can be increased or decreased as needed to keep items from infringing on one another or to admit additional items on the bar.

Although line (<li>) should be closed, the element will almost always work without the line closing (</li>).

Default Unordered List

A list with or without links or images can be used anywhere in a webpage. This one would be typical for using as part of the text or in a vertical navigation section.

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

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

body { margin: 0; font-family: Arial, Times New Roman, sans-serif; }

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

ul.a li { display: inline; padding-right: 4px; }

@media screen and (min-width: 600px) {

nav {top: 0px; left: 2px; width: 15%; height: 600px; position:fixed; margin-left: 0; text-align: left; font-size: 20px; font-weight:bold; color: black; line-height: 1.2; background-color: Khaki;} nav a: visited, nav a {margin: 0 auto; border: none; text-align: left; text-decoration:none; line-height: 20px; color: black;} nav a:hover {background-color: #AAAAAA; color: white;}

ul.b { padding: 15px; }

div.navtop { display: none; }

div.nav2nd { display: none; }

content {margin:10px 50px 10px 17%; display:block; width:auto; height: auto; border: none; background: transparent; padding:10px; z-index: 0; }

}

@media screen and (max-width: 500px) {

.navtop { overflow: hidden; background-color: DodgerBlue; position: fixed; top: 2px; left: 0; width: 100%; height: 60px; z-index: 2; }

.navtop a { float: left; display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 20px; }

.navtop a:hover { background-color: Khaki; color: black; }

.nav2nd { overflow: hidden; background-color: DodgerBlue; position: fixed; top: 60px; left: 0; width: 100%; height: 50px; z-index: 3; }

.nav2nd a { float: left; display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 20px; }

.nav2nd a:hover { background-color: Khaki; color: black; }

content {margin:110px 30px 10px 10px; display:block; width:auto; height: auto; border: none; background: transparent; padding:10px; z-index: 0; }

<nav> { display: none; }

}

</style>

</head>

<body>

<div class="navtop">

<a href="mobile6.html"><img src= "jfa.ico" width= "30px"></a>

<a href="https:johnandval.org/">Home</a>

<a href="index.html">Index</a> </div>

<div class="nav2nd">

<a href="" title= "This is not a real link, but one could be here.">Link</a>

<a href="" title= "Not a real link, merely demonstration">Another</a>

<a href="" title= "Not a real link, merely demonstration">Yet More</a>

</div>

<content>

<h2>Example of Changing the Webpage as a Function of the Viewing Device</h2>

<p>This puts the navigation bar on top if viewed on a small-screen device. View on your PC and on your smartphone to see how it works.

<p>There are easier ways of changing the style sheet to change in accordance with screen size, but understanding what is being done usually requires ones' being intimately familiar with CSS and webpage design. I believe anyone who writes style sheets and HTML code can understand the CSS for this page.

<h3>An In-line List</h2>

<p>This list can be placed inside a navigation section. Padding of list items can be increased or decreased as needed to keep items from infringing on one another or to admit additional items on the bar.

<ul class="a">
<li><img src= "jfa.ico" width= "40px" title= "Alexander icon"></li>
<li><a href= "https://johnandval.org" title= "John's and Val's Website">Home</a></li>
<li><a href= "index.html">Index</a></li>
<li>URL or icon or . . . . </li>
</ul>

<p>Although line (<li>) should be closed, the element will almost always work without the line closing (</li>).

<h2>Default Unordered List</h2>

<p> A list with or without links or images can be used anywhere in a webpage. This one would be typical for using as part of the text or in a vertical navigation section.

<ul class="b">
<li><img src= "jfa.ico" width= "40px" title= "Alexander icon"></li>
<li><a href= "https://johnandval.org" title= "John's and Val's Website">Home</a></li>
<li><a href= "index.html">Index</a></li>
<li>URL or icon or . . . . </li>
</ul>

</content>

<nav>

<ul class="b" style= "list-style: none;">
<li><img src= "jfa.ico" width= "40px" title= "Alexander icon"></li>
<li><a href= "https://johnandval.org" title= "John's and Val's Website">Home</a></li>
<a href= "index.html">Index</a></li>
</ul>

</nav>

</body>

</html>