Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]
| From | Dale <dalekellytoo@gmail.com> |
|---|---|
| Newsgroups | alt.html, comp.infosystems.www.authoring.html, comp.infosystems.www.authoring.stylesheets |
| Subject | Re: Chrome on Windows 10 error ? |
| Date | 2025-09-12 14:21 -0400 |
| Organization | https://www.dalekelly.org/ |
| Message-ID | <10a1obs$3nvrb$1@dont-email.me> (permalink) |
| References | <109r7fd$1fe72$1@dont-email.me> <109scft$1uehc$1@dont-email.me> <109smfv$21t9u$1@dont-email.me> <109t7dn$27ba9$1@dont-email.me> <10a1j3s$3m3pr$1@dont-email.me> |
Cross-posted to 3 groups.
On 9/12/2025 12:52 PM, Jonathan N. Little wrote:
> Dale wrote:
>>
>> Got iPhone Safari Browser to load my site.
>>
>> https://www.dalekelly.org/
>>
>> Same error happening as with iPhone Chrome Browser.
>>
>> Problems with the pixel map of the main image on my HOME page.
>>
>> Once again, on the computer it works, even when I size the browser to
>> the smallest size.
>>
>
> I have been watching you struggle with this for some time now. May I
> suggest simpler, more flexible way that would do what you wish but work
> in more browsers and device. below it a mock-up with both HTML and CSS
> you could copy and paste in a blank HTML file to demo. I linked to your
> your image, but you would want one without the "links" in the image.
> This method is more flexible and you can add or remove "map pins"
> without needing a new image. Also you could have a larger "map" and it
> would still work when responsively scaled on mobile devices. Note
> comments in code.
>
> <!-- start copy of code below this line -->
> <!DOCTYPE html>
> <html lang="en">
>
> <head>
> <meta charset="UTF-8">
> <meta name="viewport" content="width=device-width, initial-scale=1.0">
> <title>Optional Route</title>
> <style>
> /* Mock website css, not important further look below */
> body {
> display: grid;
> grid-template-columns: 1fr 3fr;
> }
>
> h1,
> aside {
> color: hsl(0, 0%, 100%);
> background-color: hsl(225, 2%, 51%);
> }
>
> main {
> padding: 1em;
> }
>
> ul {
> list-style: none;
> margin: initial 0;
> padding: 0;
> }
>
> li {
> margin: initial 0;
> padding: .5em;
> }
>
> li:first-child {
> color: hsl(0, 0%, 0%);
> background-color: hsl(0, 0%, 100%);
> }
>
> /* The Alternative Option css below */
> .imagemap {
> font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
> font-weight: bold;
> font-size: 2rem;
> position: relative;
> width: fit-content;
> margin: 0 auto;
> }
>
> /* This will make image responsive for mobile */
> .imagemap img {
> max-width: 100%;
> height: auto;
> vertical-align: middle;
> background-repeat: no-repeat;
> background-size: cover;
> shape-margin: 1rem;
> }
>
> .pin {
> position: absolute;
> display: inline-block;
> color: hsl(0, 0%, 0%);
> background-color: hsla(0, 0%, 90%, 570%);
> padding: .25em;
> border-radius: 10px;
> min-width: 1.5em;
> text-align: center;
> }
>
> .pin:hover,
> .pin:active {
> color: hsl(0, 0%, 100%);
> background-color: hsl(0, 0%, 0%, 50%);
> }
>
> /* Use % so pins location stable if image is resized by viewport */
> .pin1 {
> top: 1%;
> left: 35%;
> }
>
> .pin2 {
> top: 5%;
> left: 5%;
> }
>
> .pin3 {
> top: 5%;
> left: 65%;
> }
>
> .pin4 {
> top: 60%;
> left: 35%;
> }
> </style>
> </head>
>
> <body>
>
> <aside>
> <ul>
> <li>NAV LINKS</li>
> <li>NAV LINKS</li>
> <li>NAV LINKS</li>
> <li>NAV LINKS</li>
> <li>NAV LINKS</li>
> <li>NAV LINKS</li>
> <li>NAV LINKS</li>
> <li>NAV LINKS</li>
> <li>NAV LINKS</li>
> <li>NAV LINKS</li>
> </ul>
> </aside>
>
> <main>
> <h1>Alternative Option</h1>
> <!--Alternative HTML -->
> <div class="imagemap">
> <img src="https://www.dalekelly.org/images/longbeard.jpeg"
> alt="Dale Longbeard" width="443" height="785">
> <a href="https://en.wikipedia.org/wiki/Universalism" class="pin
> pin1" title="Universalism">1?</a>
> <a href="https://en.wikipedia.org/wiki/Mysticism" class="pin pin2"
> title="Mysticism">2?</a>
> <a href="https://en.wikipedia.org/wiki/Mediumship" class="pin
> pin3" title="Mediumship">3?</a>
> <a href="https://www.dalekelly.org/weblog.html#video" class="pin
> pin4" title="Videos">4?</a>
> </div>
> <!-- End of Alternative HTML -->
> </main>
>
> </body>
>
> </html>
> <!-- End copy of code above this line & paste into blank HTML file -->
>
Thank You !
Will have a look at this !
--
Mystery? -> https://www.dalekelly.org/
Back to alt.html | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread
Chrome on Windows 10 error ? Dale <dalekellytoo@gmail.com> - 2025-09-10 02:56 -0400
Re: Chrome on Windows 10 error ? Dale <dalekellytoo@gmail.com> - 2025-09-10 02:59 -0400
Re: Chrome on Windows 10 error ? Dale <dalekellytoo@gmail.com> - 2025-09-10 13:28 -0400
Re: Chrome on Windows 10 error ? Dale <dalekellytoo@gmail.com> - 2025-09-10 16:19 -0400
Re: Chrome on Windows 10 error ? Dale <dalekellytoo@gmail.com> - 2025-09-10 21:08 -0400
Re: Chrome on Windows 10 error ? "Jonathan N. Little" <lws4art@gmail.com> - 2025-09-12 12:52 -0400
Re: Chrome on Windows 10 error ? Dale <dalekellytoo@gmail.com> - 2025-09-12 14:21 -0400
Re: Chrome on Windows 10 error ? "Jonathan N. Little" <lws4art@gmail.com> - 2025-09-12 14:45 -0400
Re: Chrome on Windows 10 error ? Dale <dalekellytoo@gmail.com> - 2025-09-12 17:35 -0400
Re: Chrome on Windows 10 error ? "Jonathan N. Little" <lws4art@gmail.com> - 2025-09-12 18:45 -0400
Re: Chrome on Windows 10 error ? Dale <dalekellytoo@gmail.com> - 2025-09-12 20:51 -0400
Re: Chrome on Windows 10 error ? "Jonathan N. Little" <lws4art@gmail.com> - 2025-09-13 01:15 -0400
Re: Chrome on Windows 10 error ? Dale <dalekellytoo@gmail.com> - 2025-09-13 06:07 -0400
Re: Chrome on Windows 10 error ? "Jonathan N. Little" <lws4art@gmail.com> - 2025-09-13 08:37 -0400
Re: Chrome on Windows 10 error ? Dale <dalekellytoo@gmail.com> - 2025-09-13 10:54 -0400
Re: Chrome on Windows 10 error ? "Jonathan N. Little" <lws4art@gmail.com> - 2025-09-13 11:14 -0400
Re: Chrome on Windows 10 error ? Dale <dalekellytoo@gmail.com> - 2025-09-13 16:08 -0400
Re: Chrome on Windows 10 error ? "Jonathan N. Little" <lws4art@gmail.com> - 2025-09-13 16:45 -0400
Re: Chrome on Windows 10 error ? Dale <dalekellytoo@gmail.com> - 2025-09-13 18:41 -0400
Re: Chrome on Windows 10 error ? "Jonathan N. Little" <lws4art@gmail.com> - 2025-09-13 21:40 -0400
Re: Chrome on Windows 10 error ? Dale <dalekellytoo@gmail.com> - 2025-09-13 22:12 -0400
Re: Chrome on Windows 10 error ? Dale <dalekellytoo@gmail.com> - 2025-09-14 18:57 -0400
Re: Chrome on Windows 10 error ? "Jonathan N. Little" <lws4art@gmail.com> - 2025-09-14 19:43 -0400
Re: Chrome on Windows 10 error ? Dale <dalekellytoo@gmail.com> - 2025-09-14 20:43 -0400
Re: Chrome on Windows 10 error ? Jolly Roger <jollyroger@pobox.com> - 2025-09-15 16:08 +0000
Re: Chrome on Windows 10 error ? "Jonathan N. Little" <lws4art@gmail.com> - 2025-09-16 10:06 -0400
Re: Chrome on Windows 10 error ? Dale <dalekellytoo@gmail.com> - 2025-09-13 06:05 -0400
csiph-web