Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > alt.html > #24054 > unrolled thread

Chrome on Windows 10 error ?

Started byDale <dalekellytoo@gmail.com>
First post2025-09-10 02:56 -0400
Last post2025-09-13 06:05 -0400
Articles 20 on this page of 27 — 3 participants

Back to article view | Back to alt.html

Contents

  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

Page 1 of 2  [1] 2  Next page →

#24054 — Chrome on Windows 10 error ?

FromDale <dalekellytoo@gmail.com>
Date2025-09-10 02:56 -0400
SubjectChrome on Windows 10 error ?
Message-ID<109r7fd$1fe72$1@dont-email.me>

I just added some design to my Website.

https://www.dalekelly.org/


Put another link in the map of the main image on my HOME page.

"VIDEOS ?"


Once again, in Chrome on Windows 10, the icon doesn't show up.

But once again, in Chrome, the location of the icon will still allow the 
link to work.

I updated Chrome and had no solution.


Works okay with: Edge, Firefox, and Wave.

Chrome works fine with this on my iPhone6.

This works on FireTV Silk Browser too.

Last time this happened I had to make sure the link had a full address. 
I did this now.

Also deleted the browsing history again.


-- 
Mystery? -> https://www.dalekelly.org/

[toc] | [next] | [standalone]

#24055

FromDale <dalekellytoo@gmail.com>
Date2025-09-10 02:59 -0400
Message-ID<109r7l1$1frbg$1@dont-email.me>
In reply to#24054
On 9/10/2025 2:56 AM, Dale wrote:
> I just added some design to my Website.
> 
> https://www.dalekelly.org/


Apologies ...

It just started working after I made this post.

-- 
Mystery? -> https://www.dalekelly.org/

[toc] | [prev] | [next] | [standalone]

#24056

FromDale <dalekellytoo@gmail.com>
Date2025-09-10 13:28 -0400
Message-ID<109scft$1uehc$1@dont-email.me>
In reply to#24054
On 9/10/2025 2:56 AM, Dale wrote:
> 
> 
> I just added some design to my Website.
> 
> https://www.dalekelly.org/
> 
> 
> Put another link in the map of the main image on my HOME page.
> 
> "VIDEOS ?"
> 
> 
> Once again, in Chrome on Windows 10, the icon doesn't show up.
> 
> But once again, in Chrome, the location of the icon will still allow the 
> link to work.
> 
> I updated Chrome and had no solution.
> 
> 
> Works okay with: Edge, Firefox, and Wave.
> 
> Chrome works fine with this on my iPhone6.
> 
> This works on FireTV Silk Browser too.
> 
> Last time this happened I had to make sure the link had a full address. 
> I did this now.
> 
> Also deleted the browsing history again.
> 
> 

the links in the map of the main image aren't linking on iPhone Chrome ?

https://www.dalekelly.org/

-- 
Mystery? -> https://www.dalekelly.org/

[toc] | [prev] | [next] | [standalone]

#24057

FromDale <dalekellytoo@gmail.com>
Date2025-09-10 16:19 -0400
Message-ID<109smfv$21t9u$1@dont-email.me>
In reply to#24056
On 9/10/2025 1:28 PM, Dale wrote:
> On 9/10/2025 2:56 AM, Dale wrote:
>>
>>
>> I just added some design to my Website.
>>
>> https://www.dalekelly.org/
>>
>>
>> Put another link in the map of the main image on my HOME page.
>>
>> "VIDEOS ?"
>>
>>
>> Once again, in Chrome on Windows 10, the icon doesn't show up.
>>
>> But once again, in Chrome, the location of the icon will still allow 
>> the link to work.
>>
>> I updated Chrome and had no solution.
>>
>>
>> Works okay with: Edge, Firefox, and Wave.
>>
>> Chrome works fine with this on my iPhone6.
>>
>> This works on FireTV Silk Browser too.
>>
>> Last time this happened I had to make sure the link had a full 
>> address. I did this now.
>>
>> Also deleted the browsing history again.
>>
>>
> 
> the links in the map of the main image aren't linking on iPhone Chrome ?
> 
> https://www.dalekelly.org/
> 


I have thought of something.

My Cascading Style Sheet (CSS) may need adjusted.

The two main things it does are:

1) arranges the main menu according to three monitor sizes of Computer, 
Pad, SmartPhone

2) adjusts the size of images based on monitor size

https://www.dalekelly.org/mystyle.css

This is the site:

https://www.dalekelly.org/

Can't type well enough on the iPhone to see whether it functions on Safari.

Do you know if my site works on an iPhone's Safari ?



-- 
Mystery? -> https://www.dalekelly.org/

[toc] | [prev] | [next] | [standalone]

#24060

FromDale <dalekellytoo@gmail.com>
Date2025-09-10 21:08 -0400
Message-ID<109t7dn$27ba9$1@dont-email.me>
In reply to#24057
On 9/10/2025 4:19 PM, Dale wrote:
> On 9/10/2025 1:28 PM, Dale wrote:
>> On 9/10/2025 2:56 AM, Dale wrote:
>>>
>>>
>>> I just added some design to my Website.
>>>
>>> https://www.dalekelly.org/
>>>
>>>
>>> Put another link in the map of the main image on my HOME page.
>>>
>>> "VIDEOS ?"
>>>
>>>
>>> Once again, in Chrome on Windows 10, the icon doesn't show up.
>>>
>>> But once again, in Chrome, the location of the icon will still allow 
>>> the link to work.
>>>
>>> I updated Chrome and had no solution.
>>>
>>>
>>> Works okay with: Edge, Firefox, and Wave.
>>>
>>> Chrome works fine with this on my iPhone6.
>>>
>>> This works on FireTV Silk Browser too.
>>>
>>> Last time this happened I had to make sure the link had a full 
>>> address. I did this now.
>>>
>>> Also deleted the browsing history again.
>>>
>>>
>>
>> the links in the map of the main image aren't linking on iPhone Chrome ?
>>
>> https://www.dalekelly.org/
>>
> 
> 
> I have thought of something.
> 
> My Cascading Style Sheet (CSS) may need adjusted.
> 
> The two main things it does are:
> 
> 1) arranges the main menu according to three monitor sizes of Computer, 
> Pad, SmartPhone
> 
> 2) adjusts the size of images based on monitor size
> 
> https://www.dalekelly.org/mystyle.css
> 
> This is the site:
> 
> https://www.dalekelly.org/
> 
> Can't type well enough on the iPhone to see whether it functions on Safari.
> 
> Do you know if my site works on an iPhone's Safari ?
> 
> 
> 


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.


-- 
Mystery? -> https://www.dalekelly.org/

[toc] | [prev] | [next] | [standalone]

#24061

From"Jonathan N. Little" <lws4art@gmail.com>
Date2025-09-12 12:52 -0400
Message-ID<10a1j3s$3m3pr$1@dont-email.me>
In reply to#24060
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 -->

-- 
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[toc] | [prev] | [next] | [standalone]

#24062

FromDale <dalekellytoo@gmail.com>
Date2025-09-12 14:21 -0400
Message-ID<10a1obs$3nvrb$1@dont-email.me>
In reply to#24061
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/

[toc] | [prev] | [next] | [standalone]

#24063

From"Jonathan N. Little" <lws4art@gmail.com>
Date2025-09-12 14:45 -0400
Message-ID<10a1poo$3om0n$1@dont-email.me>
In reply to#24062
Dale wrote:
> 
> Thank You !
> 
> Will have a look at this !

I can confirm it will work in Chrome on Windows 10

-- 
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[toc] | [prev] | [next] | [standalone]

#24064

FromDale <dalekellytoo@gmail.com>
Date2025-09-12 17:35 -0400
Message-ID<10a23n3$3sokt$1@dont-email.me>
In reply to#24063
On 9/12/2025 2:45 PM, Jonathan N. Little wrote:
> Dale wrote:
>>
>> Thank You !
>>
>> Will have a look at this !
> 
> I can confirm it will work in Chrome on Windows 10
> 

Thank You once again for your reply!

The index.html page with CSS I currently have, works on all browser 
window size on Windows 10. With Chrome, Edge, Firefox, and Wave browsers.

https://www.dalekelly.org/

Included when a Windows 10 browser window is getting close to the size 
of my smart phone window.

On Windows 10 both main CSS aspects, menu design and image size, work fine.

Pixel map of main image, for links works fine, with all of the above 
Windows 10 considerations.

I was able to try Safari on my smart phone. As with Chrome on the smart 
phone, the pixel map isn't working.

CSS menu factor works on smart phone.

There are three menu factors. Computer size. Pad size. And smart phone size.

This leaves me to figure out why the pixel map, with the CSS image 
sizing, isn't working on smart phone. When it works on Windows 10 with 
the window size close to the CSS "smart phone" size.

Thank You once again for your reply!

I will consider all your feedback to figure this out!



-- 
Mystery? -> https://www.dalekelly.org/

[toc] | [prev] | [next] | [standalone]

#24065

From"Jonathan N. Little" <lws4art@gmail.com>
Date2025-09-12 18:45 -0400
Message-ID<10a27qe$3ubeh$1@dont-email.me>
In reply to#24064
Dale wrote:
> On 9/12/2025 2:45 PM, Jonathan N. Little wrote:
>> Dale wrote:
>>>
>>> Thank You !
>>>
>>> Will have a look at this !
>>
>> I can confirm it will work in Chrome on Windows 10
>>
> 
> Thank You once again for your reply!
> 
> The index.html page with CSS I currently have, works on all browser
> window size on Windows 10. With Chrome, Edge, Firefox, and Wave browsers.
> 
> https://www.dalekelly.org/
> 
> Included when a Windows 10 browser window is getting close to the size
> of my smart phone window.
> 
> On Windows 10 both main CSS aspects, menu design and image size, work fine.
> 
> Pixel map of main image, for links works fine, with all of the above
> Windows 10 considerations.
> 
> I was able to try Safari on my smart phone. As with Chrome on the smart
> phone, the pixel map isn't working.
> 
> CSS menu factor works on smart phone.
> 
> There are three menu factors. Computer size. Pad size. And smart phone
> size.
> 
> This leaves me to figure out why the pixel map, with the CSS image
> sizing, isn't working on smart phone. When it works on Windows 10 with
> the window size close to the CSS "smart phone" size.
> 
> Thank You once again for your reply!
> 
> I will consider all your feedback to figure this out!
> 

Apparently you are committed to the inflexibility of the map element. My
example did away with it.

BTW Videos does not work in portrait orientation on my Samsung Galaxy
S23. Does work in landscape mode.

-- 
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[toc] | [prev] | [next] | [standalone]

#24066

FromDale <dalekellytoo@gmail.com>
Date2025-09-12 20:51 -0400
Message-ID<10a2f60$h7d$1@dont-email.me>
In reply to#24065
On 9/12/2025 6:45 PM, Jonathan N. Little wrote:
> Dale wrote:
>> On 9/12/2025 2:45 PM, Jonathan N. Little wrote:
>>> Dale wrote:
>>>>
>>>> Thank You !
>>>>
>>>> Will have a look at this !
>>>
>>> I can confirm it will work in Chrome on Windows 10
>>>
>>
>> Thank You once again for your reply!
>>
>> The index.html page with CSS I currently have, works on all browser
>> window size on Windows 10. With Chrome, Edge, Firefox, and Wave browsers.
>>
>> https://www.dalekelly.org/
>>
>> Included when a Windows 10 browser window is getting close to the size
>> of my smart phone window.
>>
>> On Windows 10 both main CSS aspects, menu design and image size, work fine.
>>
>> Pixel map of main image, for links works fine, with all of the above
>> Windows 10 considerations.
>>
>> I was able to try Safari on my smart phone. As with Chrome on the smart
>> phone, the pixel map isn't working.
>>
>> CSS menu factor works on smart phone.
>>
>> There are three menu factors. Computer size. Pad size. And smart phone
>> size.
>>
>> This leaves me to figure out why the pixel map, with the CSS image
>> sizing, isn't working on smart phone. When it works on Windows 10 with
>> the window size close to the CSS "smart phone" size.
>>
>> Thank You once again for your reply!
>>
>> I will consider all your feedback to figure this out!
>>
> 
> Apparently you are committed to the inflexibility of the map element. My
> example did away with it.

I am still going to be studying your previous reply!

> 
> BTW Videos does not work in portrait orientation on my Samsung Galaxy
> S23. Does work in landscape mode.
> 

Here is my CSS ...

https://www.dalekelly.org/mystyle.css

Here is my Website ...

https://www.dalekelly.org/


Using Safari on my iPhone6 the image pixel map for links works in 
landscape mode. But my CSS on the menu is arranging for "pads" not 
"smart phones" in landscape mode.

Using Chrome on my iPhone6 the pixel map still doesn't work in landscape 
mode. Even though my CSS of my menu is arranging for "pads" not "smart 
phones".

Doesn't work in portrait mode as before. Neither Safari or Chrome.

Again, it works on my computer with Windows 10. With a variety of 
browsers. Even when my CSS on the menu is arranging for "smart phones" 
in portrait mode.

My CSS file organizes the main menu and adjusts image sizes based on 
browser window size.

The image pixel map on Chrome/iPhone6 in landscape mode doesn't work 
while Safari/iPhone6 in landscape mode does?


-- 
Mystery? -> https://www.dalekelly.org/

[toc] | [prev] | [next] | [standalone]

#24067

From"Jonathan N. Little" <lws4art@gmail.com>
Date2025-09-13 01:15 -0400
Message-ID<10a2um9$5jp1$1@dont-email.me>
In reply to#24066
Dale wrote:
> On 9/12/2025 6:45 PM, Jonathan N. Little wrote:
>> Dale wrote:
>>> On 9/12/2025 2:45 PM, Jonathan N. Little wrote:
>>>> Dale wrote:
>>>>>
>>>>> Thank You !
>>>>>
>>>>> Will have a look at this !
>>>>
>>>> I can confirm it will work in Chrome on Windows 10
>>>>
>>>
>>> Thank You once again for your reply!
>>>
>>> The index.html page with CSS I currently have, works on all browser
>>> window size on Windows 10. With Chrome, Edge, Firefox, and Wave
>>> browsers.
>>>
>>> https://www.dalekelly.org/
>>>
>>> Included when a Windows 10 browser window is getting close to the size
>>> of my smart phone window.
>>>
>>> On Windows 10 both main CSS aspects, menu design and image size, work
>>> fine.
>>>
>>> Pixel map of main image, for links works fine, with all of the above
>>> Windows 10 considerations.
>>>
>>> I was able to try Safari on my smart phone. As with Chrome on the smart
>>> phone, the pixel map isn't working.
>>>
>>> CSS menu factor works on smart phone.
>>>
>>> There are three menu factors. Computer size. Pad size. And smart phone
>>> size.
>>>
>>> This leaves me to figure out why the pixel map, with the CSS image
>>> sizing, isn't working on smart phone. When it works on Windows 10 with
>>> the window size close to the CSS "smart phone" size.
>>>
>>> Thank You once again for your reply!
>>>
>>> I will consider all your feedback to figure this out!
>>>
>>
>> Apparently you are committed to the inflexibility of the map element. My
>> example did away with it.
> 
> I am still going to be studying your previous reply!
> 
>>
>> BTW Videos does not work in portrait orientation on my Samsung Galaxy
>> S23. Does work in landscape mode.
>>
> 
> Here is my CSS ...
> 
> https://www.dalekelly.org/mystyle.css
> 
> Here is my Website ...
> 
> https://www.dalekelly.org/
> 
> 
> Using Safari on my iPhone6 the image pixel map for links works in
> landscape mode. But my CSS on the menu is arranging for "pads" not
> "smart phones" in landscape mode.
> 
> Using Chrome on my iPhone6 the pixel map still doesn't work in landscape
> mode. Even though my CSS of my menu is arranging for "pads" not "smart
> phones".
> 
> Doesn't work in portrait mode as before. Neither Safari or Chrome.
> 
> Again, it works on my computer with Windows 10. With a variety of
> browsers. Even when my CSS on the menu is arranging for "smart phones"
> in portrait mode.
> 
> My CSS file organizes the main menu and adjusts image sizes based on
> browser window size.
> 
> The image pixel map on Chrome/iPhone6 in landscape mode doesn't work
> while Safari/iPhone6 in landscape mode does?
> 
> 

Did you paste my code into a file and test it? If you had you would see
that my approach works, both landscape and portrait.

Your method with map requires that your "links" be added to your image
and then define pixel-perfect locations in your area definitions to line
up with those in the image. If the image resizes with responsive sizing
in mobile then the image "link" is not inline with area "link".

My method abandons the whole map-area brittle relationship, and just
places actual links as overlays to your image. That way the link "image"
is always aligned with the link because it IS A LINK.

You can adjust their locations over the image by changing the top and
left CSS attributes for the .pin# classes. As I commented in the CSS,
use percents and not pixels for these values and then the links will
always be in the same relative location in revelation to your longbeard
image even if the size changes with responsive scaling on different
devices or orientations.

In fact you can just cut and paste the CSS and HTML parts as commented
in the demo to your CSS and HTML file and it would just work as is.
Although you would need your original longbeard image before your put
the link numbers in it. Here, I uploaded the demo so you can test it
with your phone and discover that it just works, landscape or portrait.

<https://www.littleworksstudio.com/temp/usenet/dalekelly>

-- 
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[toc] | [prev] | [next] | [standalone]

#24069

FromDale <dalekellytoo@gmail.com>
Date2025-09-13 06:07 -0400
Message-ID<10a3fo4$b62o$2@dont-email.me>
In reply to#24067
On 9/13/2025 1:15 AM, Jonathan N. Little wrote:
> Dale wrote:
>> On 9/12/2025 6:45 PM, Jonathan N. Little wrote:
>>> Dale wrote:
>>>> On 9/12/2025 2:45 PM, Jonathan N. Little wrote:
>>>>> Dale wrote:
>>>>>>
>>>>>> Thank You !
>>>>>>
>>>>>> Will have a look at this !
>>>>>
>>>>> I can confirm it will work in Chrome on Windows 10
>>>>>
>>>>
>>>> Thank You once again for your reply!
>>>>
>>>> The index.html page with CSS I currently have, works on all browser
>>>> window size on Windows 10. With Chrome, Edge, Firefox, and Wave
>>>> browsers.
>>>>
>>>> https://www.dalekelly.org/
>>>>
>>>> Included when a Windows 10 browser window is getting close to the size
>>>> of my smart phone window.
>>>>
>>>> On Windows 10 both main CSS aspects, menu design and image size, work
>>>> fine.
>>>>
>>>> Pixel map of main image, for links works fine, with all of the above
>>>> Windows 10 considerations.
>>>>
>>>> I was able to try Safari on my smart phone. As with Chrome on the smart
>>>> phone, the pixel map isn't working.
>>>>
>>>> CSS menu factor works on smart phone.
>>>>
>>>> There are three menu factors. Computer size. Pad size. And smart phone
>>>> size.
>>>>
>>>> This leaves me to figure out why the pixel map, with the CSS image
>>>> sizing, isn't working on smart phone. When it works on Windows 10 with
>>>> the window size close to the CSS "smart phone" size.
>>>>
>>>> Thank You once again for your reply!
>>>>
>>>> I will consider all your feedback to figure this out!
>>>>
>>>
>>> Apparently you are committed to the inflexibility of the map element. My
>>> example did away with it.
>>
>> I am still going to be studying your previous reply!
>>
>>>
>>> BTW Videos does not work in portrait orientation on my Samsung Galaxy
>>> S23. Does work in landscape mode.
>>>
>>
>> Here is my CSS ...
>>
>> https://www.dalekelly.org/mystyle.css
>>
>> Here is my Website ...
>>
>> https://www.dalekelly.org/
>>
>>
>> Using Safari on my iPhone6 the image pixel map for links works in
>> landscape mode. But my CSS on the menu is arranging for "pads" not
>> "smart phones" in landscape mode.
>>
>> Using Chrome on my iPhone6 the pixel map still doesn't work in landscape
>> mode. Even though my CSS of my menu is arranging for "pads" not "smart
>> phones".
>>
>> Doesn't work in portrait mode as before. Neither Safari or Chrome.
>>
>> Again, it works on my computer with Windows 10. With a variety of
>> browsers. Even when my CSS on the menu is arranging for "smart phones"
>> in portrait mode.
>>
>> My CSS file organizes the main menu and adjusts image sizes based on
>> browser window size.
>>
>> The image pixel map on Chrome/iPhone6 in landscape mode doesn't work
>> while Safari/iPhone6 in landscape mode does?
>>
>>
> 
> Did you paste my code into a file and test it? If you had you would see
> that my approach works, both landscape and portrait.
> 
> Your method with map requires that your "links" be added to your image
> and then define pixel-perfect locations in your area definitions to line
> up with those in the image. If the image resizes with responsive sizing
> in mobile then the image "link" is not inline with area "link".
> 
> My method abandons the whole map-area brittle relationship, and just
> places actual links as overlays to your image. That way the link "image"
> is always aligned with the link because it IS A LINK.
> 
> You can adjust their locations over the image by changing the top and
> left CSS attributes for the .pin# classes. As I commented in the CSS,
> use percents and not pixels for these values and then the links will
> always be in the same relative location in revelation to your longbeard
> image even if the size changes with responsive scaling on different
> devices or orientations.
> 
> In fact you can just cut and paste the CSS and HTML parts as commented
> in the demo to your CSS and HTML file and it would just work as is.
> Although you would need your original longbeard image before your put
> the link numbers in it. Here, I uploaded the demo so you can test it
> with your phone and discover that it just works, landscape or portrait.
> 
> <https://www.littleworksstudio.com/temp/usenet/dalekelly>
> 


THANK YOU !

Got it mostly fixed with your suggestions. With Windows 10 Chrome, Edge, 
Firefox, and Wave browsers. With Safari and Chrome browsers on iPhone6.

Sometime I have to press on the links associated with the image more 
than one time. Only on iPhone.

https://www.dalekelly.org/

https://www.dalekelly.org/mystyle2.css

Couldn't get some headers and lines centered. They were partially under 
the main menu too. Just removed those for now.

The horizontal list of social media icons was partially below the main 
menu too. Will have to learn how to center these. Just removed those for 
now.

For the rest of the pages I could use the old CSS file ...

https://www.dalekelly.org/mystyle.css

Here is a backup of my old index file ...

https://www.dalekelly.org/indexbackup.html



Will be going with this for now !



THANK YOU AGAIN !



-- 
Mystery? -> https://www.dalekelly.org/

[toc] | [prev] | [next] | [standalone]

#24070

From"Jonathan N. Little" <lws4art@gmail.com>
Date2025-09-13 08:37 -0400
Message-ID<10a3oit$e6bb$1@dont-email.me>
In reply to#24069
Dale wrote:
> 
> Couldn't get some headers and lines centered. 

If you are talking about the H3 headers then just add CSS rule:

h3 { text-align: center; }

> They were partially under the main menu too. Just removed those for
> now.

BTW I would put all that stuff withing MAIN

Not sure to which you are referring to.

> 
> The horizontal list of social media icons was partially below the main
> menu too. Will have to learn how to center these. Just removed those for
> now.

I would suggest just using a list and giving it a class "social". Also
you don't need to tell people to click on social media icons, Everyone
knows to do that now ;-)

<!-- Start of Social Icons -->
<ul class="social">
  <li>
    <a href="https://www.facebook.com/dalekellytoo/">
      <img src="https://www.dalekelly.org/images/facebook_icon32.jpg"
alt="facebook" width="32" height="32">
    </a>
  </li>
  <li>
    <a href="https://www.instagram.com/dalekellytoo/">
      <img src="https://www.dalekelly.org/images/Instagram_Icon32.png"
alt="instagram" width="32" height="32">
    </a>
  </li>
  <li>
    <a href="https://www.twitter.com/@dalekellytoo/">
      <img src="https://www.dalekelly.org/images/twitter_icon32.jpg"
alt="twitter" width="32" height="32">
    </a>
  </li>
  <li>
    <a href="https://www.pinterest.com/dalekellytoo/">
      <img src="https://www.dalekelly.org/images/pinterest.png"
alt="pinterest" width="32" height="32">
    </a>
  </li>
  <li>
    <a href="https://www.youtube.com/@dalekellytoo">
      <img src="https://www.dalekelly.org/images/youtube_icon32.png"
alt="youtube" width="32" height="32">
    </a>
  </li>
  <li>
    <a href="https://linkedin.com/in/dalekellytoo">
      <img src="https://www.dalekelly.org/images/linkedin_icon32.jpg"
alt="linkedin" width="32" height="32">
    </a>
  </li>
  <li>
    <a href="https://github.com/dalekellytoo">
      <img src="https://www.dalekelly.org/images/github_icon32.jpg"
alt="github" width="32" height="32">
    </a>
  </li>
  <li>
    <a href="https://www.tiktok.com/@dalekellytoo">
      <img src="https://www.dalekelly.org/TikTok.jpg" alt="TikTok"
width="32" height="32">
    </a>
  </li>
  <li>
    <a href="https://www.reddit.com/user/dalekellytoo/">
      <img src="https://www.dalekelly.org/Reddit.jpg" alt="Reddit"
width="32" height="32"></a>
  </li>
  <li>
    <a href="mailto:dale@dalekelly.org">
      <img src="https://www.dalekelly.org/images/email_icon_32.jpg"
alt="email" width="32" height="32">
    </a>
  </li>
</ul>
<!-- End Social Icons -->


Then just had this one rule into your CSS:

.social {
  list-style: none;
  display: flex;
  gap: 5px;
}


> 
> For the rest of the pages I could use the old CSS file ...


-- 
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[toc] | [prev] | [next] | [standalone]

#24071

FromDale <dalekellytoo@gmail.com>
Date2025-09-13 10:54 -0400
Message-ID<10a40jl$fn9j$1@dont-email.me>
In reply to#24070
On 9/13/2025 8:37 AM, Jonathan N. Little wrote:
> Dale wrote:
>>
>> Couldn't get some headers and lines centered.
> 
> If you are talking about the H3 headers then just add CSS rule:
> 
> h3 { text-align: center; }
> 
>> They were partially under the main menu too. Just removed those for
>> now.
> 
> BTW I would put all that stuff withing MAIN
> 
> Not sure to which you are referring to.
> 
>>
>> The horizontal list of social media icons was partially below the main
>> menu too. Will have to learn how to center these. Just removed those for
>> now.
> 
> I would suggest just using a list and giving it a class "social". Also
> you don't need to tell people to click on social media icons, Everyone
> knows to do that now ;-)
> 
> <!-- Start of Social Icons -->
> <ul class="social">
>    <li>
>      <a href="https://www.facebook.com/dalekellytoo/">
>        <img src="https://www.dalekelly.org/images/facebook_icon32.jpg"
> alt="facebook" width="32" height="32">
>      </a>
>    </li>
>    <li>
>      <a href="https://www.instagram.com/dalekellytoo/">
>        <img src="https://www.dalekelly.org/images/Instagram_Icon32.png"
> alt="instagram" width="32" height="32">
>      </a>
>    </li>
>    <li>
>      <a href="https://www.twitter.com/@dalekellytoo/">
>        <img src="https://www.dalekelly.org/images/twitter_icon32.jpg"
> alt="twitter" width="32" height="32">
>      </a>
>    </li>
>    <li>
>      <a href="https://www.pinterest.com/dalekellytoo/">
>        <img src="https://www.dalekelly.org/images/pinterest.png"
> alt="pinterest" width="32" height="32">
>      </a>
>    </li>
>    <li>
>      <a href="https://www.youtube.com/@dalekellytoo">
>        <img src="https://www.dalekelly.org/images/youtube_icon32.png"
> alt="youtube" width="32" height="32">
>      </a>
>    </li>
>    <li>
>      <a href="https://linkedin.com/in/dalekellytoo">
>        <img src="https://www.dalekelly.org/images/linkedin_icon32.jpg"
> alt="linkedin" width="32" height="32">
>      </a>
>    </li>
>    <li>
>      <a href="https://github.com/dalekellytoo">
>        <img src="https://www.dalekelly.org/images/github_icon32.jpg"
> alt="github" width="32" height="32">
>      </a>
>    </li>
>    <li>
>      <a href="https://www.tiktok.com/@dalekellytoo">
>        <img src="https://www.dalekelly.org/TikTok.jpg" alt="TikTok"
> width="32" height="32">
>      </a>
>    </li>
>    <li>
>      <a href="https://www.reddit.com/user/dalekellytoo/">
>        <img src="https://www.dalekelly.org/Reddit.jpg" alt="Reddit"
> width="32" height="32"></a>
>    </li>
>    <li>
>      <a href="mailto:dale@dalekelly.org">
>        <img src="https://www.dalekelly.org/images/email_icon_32.jpg"
> alt="email" width="32" height="32">
>      </a>
>    </li>
> </ul>
> <!-- End Social Icons -->
> 
> 
> Then just had this one rule into your CSS:
> 
> .social {
>    list-style: none;
>    display: flex;
>    gap: 5px;
> }
> 
> 
>>
>> For the rest of the pages I could use the old CSS file ...
> 
> 

WOW ! WOW ! WOW !

Thank You for the detailed suggestion!

I followed it.

The headers are now all centered.

https://www.dalekelly.org/

But the new social media icon line isn't yet centered.

This is added to CSS:

.social {
   list-style: none;
   display: flex;
   gap: 5px;
}

https://www.dalekelly.org/mystyle2.css

Happening same as with old codes.

https://www.dalekelly.org/indexbackup.html

https://www.dalekelly.org/mystyle.css


THANK YOU AGAIN !


-- 
Mystery? -> https://www.dalekelly.org/

[toc] | [prev] | [next] | [standalone]

#24072

From"Jonathan N. Little" <lws4art@gmail.com>
Date2025-09-13 11:14 -0400
Message-ID<10a41nt$hgbu$1@dont-email.me>
In reply to#24071
Dale wrote:
> On 9/13/2025 8:37 AM, Jonathan N. Little wrote:
>> Dale wrote:
>>>
>>> Couldn't get some headers and lines centered.
>>
>> If you are talking about the H3 headers then just add CSS rule:
>>
>> h3 { text-align: center; }
>>
>>> They were partially under the main menu too. Just removed those for
>>> now.
>>
>> BTW I would put all that stuff withing MAIN
>>
>> Not sure to which you are referring to.
>>
>>>
>>> The horizontal list of social media icons was partially below the main
>>> menu too. Will have to learn how to center these. Just removed those for
>>> now.
>>
>> I would suggest just using a list and giving it a class "social". Also
>> you don't need to tell people to click on social media icons, Everyone
>> knows to do that now ;-)
>>
>> <!-- Start of Social Icons -->
>> <ul class="social">
>>    <li>
>>      <a href="https://www.facebook.com/dalekellytoo/">
>>        <img src="https://www.dalekelly.org/images/facebook_icon32.jpg"
>> alt="facebook" width="32" height="32">
>>      </a>
>>    </li>
>>    <li>
>>      <a href="https://www.instagram.com/dalekellytoo/">
>>        <img src="https://www.dalekelly.org/images/Instagram_Icon32.png"
>> alt="instagram" width="32" height="32">
>>      </a>
>>    </li>
>>    <li>
>>      <a href="https://www.twitter.com/@dalekellytoo/">
>>        <img src="https://www.dalekelly.org/images/twitter_icon32.jpg"
>> alt="twitter" width="32" height="32">
>>      </a>
>>    </li>
>>    <li>
>>      <a href="https://www.pinterest.com/dalekellytoo/">
>>        <img src="https://www.dalekelly.org/images/pinterest.png"
>> alt="pinterest" width="32" height="32">
>>      </a>
>>    </li>
>>    <li>
>>      <a href="https://www.youtube.com/@dalekellytoo">
>>        <img src="https://www.dalekelly.org/images/youtube_icon32.png"
>> alt="youtube" width="32" height="32">
>>      </a>
>>    </li>
>>    <li>
>>      <a href="https://linkedin.com/in/dalekellytoo">
>>        <img src="https://www.dalekelly.org/images/linkedin_icon32.jpg"
>> alt="linkedin" width="32" height="32">
>>      </a>
>>    </li>
>>    <li>
>>      <a href="https://github.com/dalekellytoo">
>>        <img src="https://www.dalekelly.org/images/github_icon32.jpg"
>> alt="github" width="32" height="32">
>>      </a>
>>    </li>
>>    <li>
>>      <a href="https://www.tiktok.com/@dalekellytoo">
>>        <img src="https://www.dalekelly.org/TikTok.jpg" alt="TikTok"
>> width="32" height="32">
>>      </a>
>>    </li>
>>    <li>
>>      <a href="https://www.reddit.com/user/dalekellytoo/">
>>        <img src="https://www.dalekelly.org/Reddit.jpg" alt="Reddit"
>> width="32" height="32"></a>
>>    </li>
>>    <li>
>>      <a href="mailto:dale@dalekelly.org">
>>        <img src="https://www.dalekelly.org/images/email_icon_32.jpg"
>> alt="email" width="32" height="32">
>>      </a>
>>    </li>
>> </ul>
>> <!-- End Social Icons -->
>>
>>
>> Then just had this one rule into your CSS:
>>
>> .social {
>>    list-style: none;
>>    display: flex;
>>    gap: 5px;
>> }
>>
>>
>>>
>>> For the rest of the pages I could use the old CSS file ...
>>
>>
> 
> WOW ! WOW ! WOW !
> 
> Thank You for the detailed suggestion!
> 
> I followed it.
> 
> The headers are now all centered.
> 
> https://www.dalekelly.org/
> 
> But the new social media icon line isn't yet centered.
> 
> This is added to CSS:
> 
> .social {
>   list-style: none;
>   display: flex;
>   gap: 5px;
> }
> 
> https://www.dalekelly.org/mystyle2.css
> 
> Happening same as with old codes.
> 
> https://www.dalekelly.org/indexbackup.html
> 
> https://www.dalekelly.org/mystyle.css
> 
> 
> THANK YOU AGAIN !
> 
> 

Very simple, just add "justify-content: center;" to the flex container,
i.e.:

.social {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 5px;
}

To learn more see:

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container>

or

<https://css-tricks.com/snippets/css/a-guide-to-flexbox/>

With flex you can align left, right or center, or evenly space them
across the width.
-- 
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[toc] | [prev] | [next] | [standalone]

#24073

FromDale <dalekellytoo@gmail.com>
Date2025-09-13 16:08 -0400
Message-ID<10a4j0i$lmn4$1@dont-email.me>
In reply to#24072
On 9/13/2025 11:14 AM, Jonathan N. Little wrote:
> Dale wrote:
>> On 9/13/2025 8:37 AM, Jonathan N. Little wrote:
>>> Dale wrote:
>>>>
>>>> Couldn't get some headers and lines centered.
>>>
>>> If you are talking about the H3 headers then just add CSS rule:
>>>
>>> h3 { text-align: center; }
>>>
>>>> They were partially under the main menu too. Just removed those for
>>>> now.
>>>
>>> BTW I would put all that stuff withing MAIN
>>>
>>> Not sure to which you are referring to.
>>>
>>>>
>>>> The horizontal list of social media icons was partially below the main
>>>> menu too. Will have to learn how to center these. Just removed those for
>>>> now.
>>>
>>> I would suggest just using a list and giving it a class "social". Also
>>> you don't need to tell people to click on social media icons, Everyone
>>> knows to do that now ;-)
>>>
>>> <!-- Start of Social Icons -->
>>> <ul class="social">
>>>     <li>
>>>       <a href="https://www.facebook.com/dalekellytoo/">
>>>         <img src="https://www.dalekelly.org/images/facebook_icon32.jpg"
>>> alt="facebook" width="32" height="32">
>>>       </a>
>>>     </li>
>>>     <li>
>>>       <a href="https://www.instagram.com/dalekellytoo/">
>>>         <img src="https://www.dalekelly.org/images/Instagram_Icon32.png"
>>> alt="instagram" width="32" height="32">
>>>       </a>
>>>     </li>
>>>     <li>
>>>       <a href="https://www.twitter.com/@dalekellytoo/">
>>>         <img src="https://www.dalekelly.org/images/twitter_icon32.jpg"
>>> alt="twitter" width="32" height="32">
>>>       </a>
>>>     </li>
>>>     <li>
>>>       <a href="https://www.pinterest.com/dalekellytoo/">
>>>         <img src="https://www.dalekelly.org/images/pinterest.png"
>>> alt="pinterest" width="32" height="32">
>>>       </a>
>>>     </li>
>>>     <li>
>>>       <a href="https://www.youtube.com/@dalekellytoo">
>>>         <img src="https://www.dalekelly.org/images/youtube_icon32.png"
>>> alt="youtube" width="32" height="32">
>>>       </a>
>>>     </li>
>>>     <li>
>>>       <a href="https://linkedin.com/in/dalekellytoo">
>>>         <img src="https://www.dalekelly.org/images/linkedin_icon32.jpg"
>>> alt="linkedin" width="32" height="32">
>>>       </a>
>>>     </li>
>>>     <li>
>>>       <a href="https://github.com/dalekellytoo">
>>>         <img src="https://www.dalekelly.org/images/github_icon32.jpg"
>>> alt="github" width="32" height="32">
>>>       </a>
>>>     </li>
>>>     <li>
>>>       <a href="https://www.tiktok.com/@dalekellytoo">
>>>         <img src="https://www.dalekelly.org/TikTok.jpg" alt="TikTok"
>>> width="32" height="32">
>>>       </a>
>>>     </li>
>>>     <li>
>>>       <a href="https://www.reddit.com/user/dalekellytoo/">
>>>         <img src="https://www.dalekelly.org/Reddit.jpg" alt="Reddit"
>>> width="32" height="32"></a>
>>>     </li>
>>>     <li>
>>>       <a href="mailto:dale@dalekelly.org">
>>>         <img src="https://www.dalekelly.org/images/email_icon_32.jpg"
>>> alt="email" width="32" height="32">
>>>       </a>
>>>     </li>
>>> </ul>
>>> <!-- End Social Icons -->
>>>
>>>
>>> Then just had this one rule into your CSS:
>>>
>>> .social {
>>>     list-style: none;
>>>     display: flex;
>>>     gap: 5px;
>>> }
>>>
>>>
>>>>
>>>> For the rest of the pages I could use the old CSS file ...
>>>
>>>
>>
>> WOW ! WOW ! WOW !
>>
>> Thank You for the detailed suggestion!
>>
>> I followed it.
>>
>> The headers are now all centered.
>>
>> https://www.dalekelly.org/
>>
>> But the new social media icon line isn't yet centered.
>>
>> This is added to CSS:
>>
>> .social {
>>    list-style: none;
>>    display: flex;
>>    gap: 5px;
>> }
>>
>> https://www.dalekelly.org/mystyle2.css
>>
>> Happening same as with old codes.
>>
>> https://www.dalekelly.org/indexbackup.html
>>
>> https://www.dalekelly.org/mystyle.css
>>
>>
>> THANK YOU AGAIN !
>>
>>
> 
> Very simple, just add "justify-content: center;" to the flex container,
> i.e.:
> 
> .social {
>    list-style: none;
>    display: flex;
>    justify-content: center;
>    gap: 5px;
> }
> 
> To learn more see:
> 
> <https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container>
> 
> or
> 
> <https://css-tricks.com/snippets/css/a-guide-to-flexbox/>
> 
> With flex you can align left, right or center, or evenly space them
> across the width.


THANK YOU !

Works Great !

https://www.dalekelly.org/

https://www.dalekelly.org/mystyle2.css

With such quick responses you seem like an expert !

For now I am going to edit one more thing. I will be comparing my two 
CSS files and any styles within the index file.

My CSS has three main menu designs based on browser window size:

1) computer size, a vertical menu on the left
2) pad size, a horizontal menu on the top
3) smart phone size, a vertical menu that is centered

The (1) menu has space above it when I scroll down, leaving the <h1> behind.

Does not happen with previous CSS:

https://www.dalekelly.org/mystyle.css

https://www.dalekelly.org/indexbackup.html


THANK YOU AGAIN !

-- 
Mystery? -> https://www.dalekelly.org/

[toc] | [prev] | [next] | [standalone]

#24074

From"Jonathan N. Little" <lws4art@gmail.com>
Date2025-09-13 16:45 -0400
Message-ID<10a4l4o$n8ci$1@dont-email.me>
In reply to#24073
Dale wrote:
> 
> The (1) menu has space above it when I scroll down, leaving the <h1>
> behind.

You have an error, you have h1>Dale's Website</h1> outside of the body
element:

  ...
</head>

<h1>Dale's Website</h1> <-This needs to be inside the BODY element.

<body>
  ...

-- 
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[toc] | [prev] | [next] | [standalone]

#24075

FromDale <dalekellytoo@gmail.com>
Date2025-09-13 18:41 -0400
Message-ID<10a4rv8$oqtr$1@dont-email.me>
In reply to#24074
On 9/13/2025 4:45 PM, Jonathan N. Little wrote:
> Dale wrote:
>>
>> The (1) menu has space above it when I scroll down, leaving the <h1>
>> behind.
> 
> You have an error, you have h1>Dale's Website</h1> outside of the body
> element:
> 
>    ...
> </head>
> 
> <h1>Dale's Website</h1> <-This needs to be inside the BODY element.
> 
> <body>
>    ...
> 


THANK YOU FOR THE RESPONSE !

I put the header in the body section. Same response as before.

The error I have is that when I scroll down, the vertical menu has a 
rectangular space left above it.

https://www.dalekelly.org/

https://www.dalekelly.org/mystyle2.css

It worked before my edits:

https://www.dalekelly.org/mystyle.css

https://www.dalekelly.org/indexbackup.html


I used the old CSS as the CSS for all other pages on my site. Works there.

https://www.dalekelly.org/mystyle.css

https://www.dalekelly.org/indexbackup.html


THANK YOU FOR THE RESPONSE !


-- 
Mystery? -> https://www.dalekelly.org/

[toc] | [prev] | [next] | [standalone]

#24076

From"Jonathan N. Little" <lws4art@gmail.com>
Date2025-09-13 21:40 -0400
Message-ID<10a56dt$sc7n$1@dont-email.me>
In reply to#24075
Dale wrote:
> On 9/13/2025 4:45 PM, Jonathan N. Little wrote:
>> Dale wrote:
>>>
>>> The (1) menu has space above it when I scroll down, leaving the <h1>
>>> behind.
>>
>> You have an error, you have h1>Dale's Website</h1> outside of the body
>> element:
>>
>>    ...
>> </head>
>>
>> <h1>Dale's Website</h1> <-This needs to be inside the BODY element.
>>
>> <body>
>>    ...
>>
> 
> 
> THANK YOU FOR THE RESPONSE !
> 
> I put the header in the body section. Same response as before.
> 
> The error I have is that when I scroll down, the vertical menu has a
> rectangular space left above it.


That is due to where you placed it in the HTML. It's order does matter.
 In your original "ul.sidebar" is immediately following the BODY opening
tag. In your new it is preceded by:

<h3><a href="https://www.wikipedia.org/wiki/Meta">Natural?</a> -|-
					<a href="https://www.wikipedia.org/wiki/Physics">Super?</a> -|-
					<a
href="https://www.wikipedia.org/wiki/Metaphysics">Supernatural?</a></h3>

<h1>Dale's Website</h1>

Move the above into the MAIN opening tag.

If you want "Dale's Website" above the "Natural? | Super? |
Supernatural?" line the original too swap their order in the html. If
you refer to my mock-up

<https://www.littleworksstudio.com/temp/usenet/dalekelly>
 view the source I kept parts organized:

...
<body>
  <aside>
    your main sidebar menu here
  </aside

  <main>
    your main content here
  </main>

  <footer>
    your stuff on the bottom here
  </footer>
</body>

Also note that CSS rules order in your stylesheet also matter if you have:

.foo {
  color: red;
}

but further down the stylesheet you have

.foo {	
  color: green;
}

then in your HTML

<p class="foo">
  I will be color green not red.
</p>


HTH

-- 
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[toc] | [prev] | [next] | [standalone]

Page 1 of 2  [1] 2  Next page →

Back to top | Article view | alt.html

csiph-web