This is a multi-part message in MIME format.
On 30/07/2019 11:38, Helmut Richter wrote:
1. Choice of URL depending on media type or screen width
Up to now, I have only found ways to *select* a style-sheet depending on media type or screen width, or of branching *within* a style sheet. In
both cases, there is only one HTML source file. Sometimes, however, it
would be easier to have two different URLs for two thoroughly different designs of a page. Some sites do that, e.g. de.wikipedia.org which immediately switches to de.m.wikipedia.org if called from a mobile phone.
Of course, when there is an elaborate CMS in the background, one can do everything. But can that be done with standard means, i.e. HTML, CSS, and,
if necessary, redirection in .htaccess? (The obvious work-around is a link
in each page "Do you prefer the other design?").
Media Queries is one way but your webpage must be HTML5 Standards
compliant and all the classes and IDs are properly set on the page.
<
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries>
2. The (sub-)menu icon
Instead of a large table of contents, one has to scatter mini-menus everywhere. These mini-menus should be invisible with an icon saying "Here is a menu if you touch this button". The usual shape is a square with rounded corners and three horizontal bars in the middle. Is there a standard way to produce this icon on the screen? I will do the graphics myself only if forced to.
You are talking about about "Hamburger Icon". One way is to use
bootstrap type icons as shown in this example:
<
https://getbootstrap.com/docs/3.3/examples/navbar/>
Minimise the page and you'll see the icon appear on top-right corner in
the Navbar. This can be adapted anywhere on the page with some trickery!
[ alt-no ] <
https://i.imgur.com/opGuP0O.png>
--
Helmut Richter
--
With over 999 million devices now running Windows 10, customer
satisfaction is higher than any previous version of windows.
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
</head>
<body bgcolor="#FFFFE0" text="#006600">
<div class="moz-cite-prefix">On 30/07/2019 11:38, Helmut Richter
wrote:<br>
</div>
<blockquote cite="mid:alpine.DEB.2.21.1907301141010.2214@kiboko2"
type="cite">
<pre wrap="">
1. Choice of URL depending on media type or screen width
Up to now, I have only found ways to *select* a style-sheet depending on
media type or screen width, or of branching *within* a style sheet. In
both cases, there is only one HTML source file. Sometimes, however, it
would be easier to have two different URLs for two thoroughly different
designs of a page. Some sites do that, e.g. de.wikipedia.org which
immediately switches to de.m.wikipedia.org if called from a mobile phone.
Of course, when there is an elaborate CMS in the background, one can do everything. But can that be done with standard means, i.e. HTML, CSS, and,
if necessary, redirection in .htaccess? (The obvious work-around is a link
in each page "Do you prefer the other design?").</pre>
</blockquote>
<br>
Media Queries is one way but your webpage must be HTML5 Standards
compliant and all the classes and IDs are properly set on the page.<br>
<br>
<a class="moz-txt-link-rfc2396E" href="
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries"><https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries></a><br>
<br>
<br>
<blockquote cite="mid:alpine.DEB.2.21.1907301141010.2214@kiboko2"
type="cite">
<pre wrap="">
2. The (sub-)menu icon
Instead of a large table of contents, one has to scatter mini-menus
everywhere. These mini-menus should be invisible with an icon saying "Here is
a menu if you touch this button". The usual shape is a square with rounded corners and three horizontal bars in the middle. Is there a standard way to produce this icon on the screen? I will do the graphics myself only if forced to.</pre>
</blockquote>
<br>
You are talking about about "Hamburger Icon". One way is to use
bootstrap type icons as shown in this example:<br>
<br>
<a class="moz-txt-link-rfc2396E" href="
https://getbootstrap.com/docs/3.3/examples/navbar/"><https://getbootstrap.com/docs/3.3/examples/navbar/></a><br>
<br>
Minimise the page and you'll see the icon appear on top-right corner
in the Navbar. This can be adapted anywhere on the page with some
trickery!<br>
<br>
<a href="
https://i.imgur.com/opGuP0O.png"><img alt="[ alt-no ]"
src="
https://i.imgur.com/opGuP0O.png" moz-do-not-send="true"
border="12" height="855" width="763"></a><br>
<br>
<br>
<blockquote cite="mid:alpine.DEB.2.21.1907301141010.2214@kiboko2"
type="cite">
<pre wrap="">
--
Helmut Richter
</pre>
</blockquote>
<br>
<br>
<div class="moz-signature">-- <br>
<div class="moz-signature">
<div style="width: 340px;height: 290px; background-color: blue;
color: yellow;font-weight: bolder; font-size:200%; text-align:
center; margin: 30px 5px 30px 5px;">With over 999 million
devices now running Windows 10, customer satisfaction is
higher than any previous version of windows.</div>
</div>
</div>
</body>
</html>
--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)
![https://i.imgur.com/opGuP0O.png"><img](https://i.imgur.com/opGuP0O.png"><img){kind=link}
![https://i.imgur.com/opGuP0O.png"](https://i.imgur.com/opGuP0O.png"){kind=link}