From Newsgroup: misc.phone.mobile.iphone

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/
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: misc.phone.mobile.iphone

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
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: misc.phone.mobile.iphone

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/
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: misc.phone.mobile.iphone

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
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: misc.phone.mobile.iphone

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.

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

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/
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: misc.phone.mobile.iphone

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/
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: misc.phone.mobile.iphone

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
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: misc.phone.mobile.iphone

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/
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: misc.phone.mobile.iphone

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


Then just had this one rule into your CSS:

.social {
-a-a list-style: none;
-a-a display: flex;
-a-a 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 {
-a list-style: none;
-a display: flex;
-a 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
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: misc.phone.mobile.iphone

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


Then just had this one rule into your CSS:

.social {
-a-a list-style: none;
-a-a display: flex;
-a-a 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 {
-a list-style: none;
-a display: flex;
-a 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/
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: misc.phone.mobile.iphone

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
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: misc.phone.mobile.iphone

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/
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: misc.phone.mobile.iphone

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:

-a-a ...
</head>

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

<body>
-a-a ...

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.



HTH
--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: misc.phone.mobile.iphone

On 9/13/2025 9:40 PM, Jonathan N. Little wrote:

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:

-a-a ...
</head>

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

<body>
-a-a ...

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.

THANK YOU VERY MUCH !

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.

With the above it works now !

THANK YOU VERY MUCH !
--
Mystery? -> https://www.dalekelly.org/
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: misc.phone.mobile.iphone

On 9/13/2025 10:12 PM, Dale wrote:

On 9/13/2025 9:40 PM, Jonathan N. Little wrote:

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:

-a-a-a ...
</head>

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

<body>
-a-a-a ...

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.

THANK YOU VERY MUCH !

That is due to where you placed it in the HTML. It's order does matter.
-a 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-a-a-a-a-a-a-a-a-a-a-a-a-a-a-a-a-a-a <a href="https://www.wikipedia.org/wiki/
Physics">Super?</a> -|-
-a-a-a-a-a-a-a-a-a-a-a-a-a-a-a-a-a-a-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.

With the above it works now !

THANK YOU VERY MUCH !

One thing is happening.

I have an iPhone6.

Using the Safari Web browser the icons in my image on the HOME page work
fine.

Using the Chrome Web browser the icons in my image on the HOME page
appear touched but the linking requires a couple touches.

I guess it may be the age of my iPhone6.

https://www.dalekelly.org/
--
Mystery? -> https://www.dalekelly.org/
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: misc.phone.mobile.iphone

Dale wrote:

I guess it may be the age of my iPhone6.

Yeah, IPhone 6 EOL was Jan 2023. You will find a lot of stuff won't work
on that phone now.
--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: misc.phone.mobile.iphone

On 9/14/2025 7:43 PM, Jonathan N. Little wrote:

Dale wrote:

I guess it may be the age of my iPhone6.

Yeah, IPhone 6 EOL was Jan 2023. You will find a lot of stuff won't work
on that phone now.

One thing that happens is the battery goes dead after just a couple
minutes off the power cord.

I had a previous iPhone6 and the same thing happened.

Also I mainly use Siri to launch stuff. Text takes a couple tries sometimes.

I do still like the button on the face of the screen.
--
Mystery? -> https://www.dalekelly.org/
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: misc.phone.mobile.iphone

On Sun, 14 Sep 2025 20:43:22 -0400, Dale wrote:

One thing that happens is the battery goes dead after just a couple
minutes off the power cord.

Need a new battery ... oh wait, you canrCOt replace batteries in Apple
stuff, can you?
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: misc.phone.mobile.iphone

On 2025-09-15, Lawrence DrCOOliveiro <ldo@nz.invalid> wrote:

On Sun, 14 Sep 2025 20:43:22 -0400, Dale wrote:

One thing that happens is the battery goes dead after just a couple
minutes off the power cord.

Need a new battery ... oh wait, you canrCOt replace batteries in Apple
stuff, can you?

Sure you can.
--
E-mail sent to this address may be devoured by my ravenous SPAM filter.
I often ignore posts from Google. Use a real news client instead.

JR
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: misc.phone.mobile.iphone

On 2025-09-15, Dale <dalekellytoo@gmail.com> wrote:

On 9/14/2025 7:43 PM, Jonathan N. Little wrote:

Dale wrote:

I guess it may be the age of my iPhone6.

Yeah, IPhone 6 EOL was Jan 2023. You will find a lot of stuff won't work
on that phone now.

One thing that happens is the battery goes dead after just a couple
minutes off the power cord.

I had a previous iPhone6 and the same thing happened.

Also I mainly use Siri to launch stuff. Text takes a couple tries sometimes.

I do still like the button on the face of the screen.

The battery can be replaced relatively cheaply while you wait.
--
E-mail sent to this address may be devoured by my ravenous SPAM filter.
I often ignore posts from Google. Use a real news client instead.

JR
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: misc.phone.mobile.iphone

Jolly Roger wrote:

On 2025-09-15, Dale <dalekellytoo@gmail.com> wrote:

On 9/14/2025 7:43 PM, Jonathan N. Little wrote:

Dale wrote:

I guess it may be the age of my iPhone6.

Yeah, IPhone 6 EOL was Jan 2023. You will find a lot of stuff won't work >>> on that phone now.

One thing that happens is the battery goes dead after just a couple
minutes off the power cord.

I had a previous iPhone6 and the same thing happened.

Also I mainly use Siri to launch stuff. Text takes a couple tries sometimes. >>
I do still like the button on the face of the screen.

The battery can be replaced relatively cheaply while you wait.

But the OS, security, and apps cannot. Retire and replace the phone and
use it with an app such as DroidCam to re-purpose as a webcam.
--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: misc.phone.mobile.iphone

Dale <dalekellytoo@gmail.com> wrote:

On 9/14/2025 7:43 PM, Jonathan N. Little wrote:

Dale wrote:

I guess it may be the age of my iPhone6.

Yeah, IPhone 6 EOL was Jan 2023. You will find a lot of stuff won't work
on that phone now.

One thing that happens is the battery goes dead after just a couple
minutes off the power cord.

I had a previous iPhone6 and the same thing happened.

Also I mainly use Siri to launch stuff. Text takes a couple tries sometimes.

I do still like the button on the face of the screen.

The iphone SE 2nd or 3rd generation is still fully supported and can be had second hand for a good price nowadays. They both still have a physical home button.

--- Synchronet 3.21a-Linux NewsLink 1.2