From Newsgroup: alt.html


Hi ,

My CSS adjusts the main menu of my site depending on browser window size.


https://www.dalekelly.org/

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


There are three CSS sizes:

(1) computer
(2) pad
(3) smartphone

No problem with (1), (2) or (3) menus alone.

No problem with reducing the window size of (2) to (3).

The problem I have is when I am reducing the window size of (1) to (2).

When I am getting (1) close to (2) the image blocks some of the menu.
And the other parts of the page are somewhat under the menu.

In my CSS I adjust image sizes based on browser window size. This not functioning may be the reason the image is blocking some of the menu.
--
Mystery? -> https://www.dalekelly.org/

--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: alt.html

Dale wrote:

Hi ,

My CSS adjusts the main menu of my site depending on browser window size.

https://www.dalekelly.org/

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

There are three CSS sizes:

(1) computer
(2) pad
(3) smartphone

No problem with (1), (2) or (3) menus alone.

No problem with reducing the window size of (2) to (3).

The problem I have is when I am reducing the window size of (1) to (2).

When I am getting (1) close to (2) the image blocks some of the menu.
And the other parts of the page are somewhat under the menu.

In my CSS I adjust image sizes based on browser window size. This not functioning may be the reason the image is blocking some of the menu.

Do not witness such behavior. Maybe you are using an obsolete browser?
The page breaks only using a legacy SeaMonkey browser which many sites
break because it does not support much of the newer CSS and HTML.

BTW, I had a typo in my example css which you copied:

.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;
}

background-color should be with the final value 57% not 570%:

background-color: hsla(0, 0%, 90%, 57%);
--
Take care,

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

From Newsgroup: alt.html

Jonathan N. Little wrote:

Dale wrote:

My CSS adjusts the main menu of my site depending on browser window
size.

https://www.dalekelly.org/

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

There are three CSS sizes:

(1) computer
(2) pad
(3) smartphone

No problem with (1), (2) or (3) menus alone.

No problem with reducing the window size of (2) to (3).

The problem I have is when I am reducing the window size of (1) to (2).

When I am getting (1) close to (2) the image blocks some of the menu.
And the other parts of the page are somewhat under the menu.

In my CSS I adjust image sizes based on browser window size. This not functioning may be the reason the image is blocking some of the menu.

Do not witness such behavior.

I do, even with modern browsers.
The problem is that the side menu has position:fixed.
A fixed element does not leave a gap in the page.
So the main text & picture are centred relative to the entire page,
including the menu. So if the page is narrowed, both text and picture
overlap the menu.

The side menu has width:20%.
In mystyle2.css it says: div.content { margin-left:20% }.
But it looks like Dale forgot to put the main text & picture in that div
with class=content.
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: alt.html

On 9/21/2025 4:00 AM, Dale wrote:

Hi ,

My CSS adjusts the main menu of my site depending on browser window size.

https://www.dalekelly.org/

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

There are three CSS sizes:

(1) computer
(2) pad
(3) smartphone

No problem with (1), (2) or (3) menus alone.

No problem with reducing the window size of (2) to (3).

The problem I have is when I am reducing the window size of (1) to (2).

When I am getting (1) close to (2) the image blocks some of the menu.
And the other parts of the page are somewhat under the menu.

In my CSS I adjust image sizes based on browser window size. This not functioning may be the reason the image is blocking some of the menu.

Thank You Again !


Happens with these web browsers:

Chrome - Version 140.0.7339.186 (Official Build) (64-bit)
Edge - Version 140.0.3485.81 (Official build) (64-bit)
Firefox - 143.0.1 (64-bit)
Wave - Version 1.5.21.2 (Official Build) (64-bit)

Updated all those browsers and restarted them.

Using Windows 10: 19045.6332

Did your change:

background-color: hsla(0, 0%, 90%, 57%);

Still has my coding error.

The colors of the icons on the image seem to have changed. I like it.
But that wasn't the my coding error.

When I adjust the size of the computer browser window along the way from
a computer size to a pad size, the image starts to cover the vertical
menu on the way to the horizontal menu.

Some of the text gets covered by the vertical menu on the way to the horizontal menu.

Here are the files again:


https://www.dalekelly.org/

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


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

From Newsgroup: alt.html

On 9/21/2025 3:10 PM, Dale wrote:

On 9/21/2025 4:00 AM, Dale wrote:

Hi ,

My CSS adjusts the main menu of my site depending on browser window size.


https://www.dalekelly.org/

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


There are three CSS sizes:

(1) computer
(2) pad
(3) smartphone

No problem with (1), (2) or (3) menus alone.

No problem with reducing the window size of (2) to (3).

The problem I have is when I am reducing the window size of (1) to (2).

When I am getting (1) close to (2) the image blocks some of the menu.
And the other parts of the page are somewhat under the menu.

In my CSS I adjust image sizes based on browser window size. This not
functioning may be the reason the image is blocking some of the menu.

Thank You Again !

Happens with these web browsers:

Chrome - Version 140.0.7339.186 (Official Build) (64-bit)
Edge - Version 140.0.3485.81 (Official build) (64-bit)
Firefox - 143.0.1 (64-bit)
Wave - Version 1.5.21.2 (Official Build) (64-bit)

Updated all those browsers and restarted them.

Using Windows 10: 19045.6332

Did your change:

background-color: hsla(0, 0%, 90%, 57%);

Still has my coding error.

The colors of the icons on the image seem to have changed. I like it.
But that wasn't the my coding error.

When I adjust the size of the computer browser window along the way from
a computer size to a pad size, the image starts to cover the vertical
menu on the way to the horizontal menu.

Some of the text gets covered by the vertical menu on the way to the horizontal menu.

Here are the files again:

https://www.dalekelly.org/

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

Thank You Again !

On the other site pages with the old CSS it sizes okay.

For example:

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

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

I am more of an enthusiast than an architect, designer, or programmer.
--
Mystery? -> https://www.dalekelly.org/
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: alt.html

On 9/21/2025 12:13 PM, Siard wrote:

Jonathan N. Little wrote:

Dale wrote:

My CSS adjusts the main menu of my site depending on browser window
size.

https://www.dalekelly.org/

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

There are three CSS sizes:

(1) computer
(2) pad
(3) smartphone

No problem with (1), (2) or (3) menus alone.

No problem with reducing the window size of (2) to (3).

The problem I have is when I am reducing the window size of (1) to (2).

When I am getting (1) close to (2) the image blocks some of the menu.
And the other parts of the page are somewhat under the menu.

In my CSS I adjust image sizes based on browser window size. This not
functioning may be the reason the image is blocking some of the menu.

Do not witness such behavior.

I do, even with modern browsers.
The problem is that the side menu has position:fixed.
A fixed element does not leave a gap in the page.
So the main text & picture are centred relative to the entire page,
including the menu. So if the page is narrowed, both text and picture
overlap the menu.

The side menu has width:20%.
In mystyle2.css it says: div.content { margin-left:20% }.
But it looks like Dale forgot to put the main text & picture in that div
with class=content.

Thank You Also !

I will have a look into this.

On index.html with CSS I basically have:

menu
image with icons
headers <h1> and <h3>
a horizontal line of icons outside of the image

For computer sized browser windows I want to keep the menu vertical on
the left. I want computer browsers to go to other CSS menu handling when
the browser is sized to those handles.

I want everything else centered.

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

From Newsgroup: alt.html

On Sun, 21 Sep 2025 18:13:42 +0200, Siard wrote:

The problem is that the side menu has position:fixed.
A fixed element does not leave a gap in the page.
So the main text & picture are centred relative to the entire page,
including the menu. So if the page is narrowed, both text and picture
overlap the menu.

Maybe you want rCLstickyrCY instead of rCLfixedrCY positioning <https://developer.mozilla.org/en-US/docs/Web/CSS/position>.
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: alt.html

On 9/21/2025 3:47 PM, Dale wrote:

On 9/21/2025 12:13 PM, Siard wrote:

Jonathan N. Little wrote:

Dale wrote:

My CSS adjusts the main menu of my site depending on browser window
size.

https://www.dalekelly.org/

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

There are three CSS sizes:

(1) computer
(2) pad
(3) smartphone

No problem with (1), (2) or (3) menus alone.

No problem with reducing the window size of (2) to (3).

The problem I have is when I am reducing the window size of (1) to (2). >>>>
When I am getting (1) close to (2) the image blocks some of the menu.
And the other parts of the page are somewhat under the menu.

In my CSS I adjust image sizes based on browser window size. This not
functioning may be the reason the image is blocking some of the menu.

Do not witness such behavior.

I do, even with modern browsers.
The problem is that the side menu has position:fixed.
A fixed element does not leave a gap in the page.
So the main text & picture are centred relative to the entire page,
including the menu. So if the page is narrowed, both text and picture
overlap the menu.

The side menu has width:20%.
In mystyle2.css it says: div.content { margin-left:20% }.
But it looks like Dale forgot to put the main text & picture in that div
with class=content.

Thank You Also !

I will have a look into this.

On index.html with CSS I basically have:

menu
image with icons
headers <h1> and <h3>
a horizontal line of icons outside of the image

For computer sized browser windows I want to keep the menu vertical on
the left. I want computer browsers to go to other CSS menu handling when
the browser is sized to those handles.

I want everything else centered.

Thank You Also !

I forgot to say:

1) the image gets over the menu along the way
2) the rest gets under the menu along the way
--
Mystery? -> https://www.dalekelly.org/
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: alt.html

On 9/21/2025 10:29 AM, Jonathan N. Little wrote:

Dale wrote:

Hi ,

My CSS adjusts the main menu of my site depending on browser window size.


https://www.dalekelly.org/

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


There are three CSS sizes:

(1) computer
(2) pad
(3) smartphone

No problem with (1), (2) or (3) menus alone.

No problem with reducing the window size of (2) to (3).

The problem I have is when I am reducing the window size of (1) to (2).

When I am getting (1) close to (2) the image blocks some of the menu.
And the other parts of the page are somewhat under the menu.

In my CSS I adjust image sizes based on browser window size. This not
functioning may be the reason the image is blocking some of the menu.

Do not witness such behavior. Maybe you are using an obsolete browser?
The page breaks only using a legacy SeaMonkey browser which many sites
break because it does not support much of the newer CSS and HTML.

BTW, I had a typo in my example css which you copied:

.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;
}

background-color should be with the final value 57% not 570%:

background-color: hsla(0, 0%, 90%, 57%);

Thank You Again !


Happens with these web browsers:

Chrome - Version 140.0.7339.186 (Official Build) (64-bit)
Edge - Version 140.0.3485.81 (Official build) (64-bit)
Firefox - 143.0.1 (64-bit)
Wave - Version 1.5.21.2 (Official Build) (64-bit)

Updated all those browsers and restarted them.

Using Windows 10: 19045.6332

Did your change:

background-color: hsla(0, 0%, 90%, 57%);

Still has my coding error.

The colors of the icons on the image seem to have changed. I like it.
But that wasn't the my coding error.

When I adjust the size of the computer browser window along the way from
a computer size to a pad size, the image starts to cover the vertical
menu on the way to the horizontal menu.

Some of the text gets covered by the vertical menu on the way to the horizontal menu.

Here are the files again:


https://www.dalekelly.org/

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


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

From Newsgroup: alt.html

On 9/21/2025 12:13 PM, Siard wrote:

Jonathan N. Little wrote:

Dale wrote:

My CSS adjusts the main menu of my site depending on browser window
size.

https://www.dalekelly.org/

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

There are three CSS sizes:

(1) computer
(2) pad
(3) smartphone

No problem with (1), (2) or (3) menus alone.

No problem with reducing the window size of (2) to (3).

The problem I have is when I am reducing the window size of (1) to (2).

When I am getting (1) close to (2) the image blocks some of the menu.
And the other parts of the page are somewhat under the menu.

In my CSS I adjust image sizes based on browser window size. This not
functioning may be the reason the image is blocking some of the menu.

Do not witness such behavior.

I do, even with modern browsers.
The problem is that the side menu has position:fixed.
A fixed element does not leave a gap in the page.
So the main text & picture are centred relative to the entire page,
including the menu. So if the page is narrowed, both text and picture
overlap the menu.

The side menu has width:20%.
In mystyle2.css it says: div.content { margin-left:20% }.
But it looks like Dale forgot to put the main text & picture in that div
with class=content.

<div class="content"> worked !

Thank You Very Much !

Now I have to give a try to organize my application of all the
assistance I got so far.
--
Mystery? -> https://www.dalekelly.org/
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: alt.html

On 9/21/2025 5:11 PM, Lawrence DrCOOliveiro wrote:

On Sun, 21 Sep 2025 18:13:42 +0200, Siard wrote:

The problem is that the side menu has position:fixed.
A fixed element does not leave a gap in the page.
So the main text & picture are centred relative to the entire page,
including the menu. So if the page is narrowed, both text and picture
overlap the menu.

Maybe you want rCLstickyrCY instead of rCLfixedrCY positioning <https://developer.mozilla.org/en-US/docs/Web/CSS/position>.

Thank You !

I will have a look !

I have never learned web programming on Mozilla.

I have used W3Schools since the mid 90's.
--
Mystery? -> https://www.dalekelly.org/
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: alt.html

On Sun, 21 Sep 2025 22:23:51 -0400, Dale wrote:

I have never learned web programming on Mozilla.

I have used W3Schools since the mid 90's.

When I started looking things up, I kept getting W3Schools links to begin with, too.

Then when I discovered MDN, I found it tended to offer much better quality info. So I mainly use that now.
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: alt.html

On Sun, 21 Sep 2025 21:02:14 -0400, Dale wrote:

<div class="content"> worked !

This is the kind of thing you can debug in the rCLInspectorrCY view.
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: alt.html

Dale wrote:

<div class="content"> worked !

Thank You Very Much !

Yes, it is present in the css file as well as in /images.html, which is why that problem does not exist there.
But it was missing in the main page. It looks like you forgot to put it there. --- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: alt.html

On 9/21/2025 10:57 PM, Lawrence DrCOOliveiro wrote:

On Sun, 21 Sep 2025 22:23:51 -0400, Dale wrote:

I have never learned web programming on Mozilla.

I have used W3Schools since the mid 90's.

When I started looking things up, I kept getting W3Schools links to begin with, too.

Then when I discovered MDN, I found it tended to offer much better quality info. So I mainly use that now.

I remember when W3.org had instruction.

I now took a look and can't find it there.
--
Mystery? -> https://www.dalekelly.org/
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: alt.html

On 9/21/2025 10:58 PM, Lawrence DrCOOliveiro wrote:

On Sun, 21 Sep 2025 21:02:14 -0400, Dale wrote:

<div class="content"> worked !

This is the kind of thing you can debug in the rCLInspectorrCY view.

Put that on my list of exploration !

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

From Newsgroup: alt.html

On 9/22/2025 3:53 AM, Siard wrote:

Dale wrote:

<div class="content"> worked !

Thank You Very Much !

Yes, it is present in the css file as well as in /images.html, which is why that problem does not exist there.
But it was missing in the main page. It looks like you forgot to put it there.

I am more of an enthusiast than an architect, designer, or programmer.

I used to like putting explanations within the code. Would like to get
back to that. If I can in web coding.

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

From Newsgroup: alt.html

Dale wrote:

On 9/21/2025 10:57 PM, Lawrence DrCOOliveiro wrote:

On Sun, 21 Sep 2025 22:23:51 -0400, Dale wrote:

I have never learned web programming on Mozilla.

I have used W3Schools since the mid 90's.

When I started looking things up, I kept getting W3Schools links to begin
with, too.

Then when I discovered MDN, I found it tended to offer much better
quality
info. So I mainly use that now.

I remember when W3.org had instruction.

I now took a look and can't find it there.

Still there, for example HTML standard.

<https://html.spec.whatwg.org/multipage/#toc-semantics>

But that said, W3.org was never friendly for newbies with tutorials and such

Here is the TOC for all associated standard.

<https://www.w3.org/TR/?status%5B0%5D=standard>

MDN is a bit friendlier.

<https://developer.mozilla.org/en-US/>

BTW it doesn't cater only to Mozilla specific browsers, it lists
features supported by other browsers but not currently in Firefox
--
Take care,

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

From Newsgroup: alt.html

Dale wrote:

On 9/21/2025 10:58 PM, Lawrence DrCOOliveiro wrote:

On Sun, 21 Sep 2025 21:02:14 -0400, Dale wrote:

<div class="content"> worked !

This is the kind of thing you can debug in the rCLInspectorrCY view.

Put that on my list of exploration !

Thank You !

F12 in your browser to access developer tools.
--
Take care,

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