| Sysop: | Amessyroom |
|---|---|
| Location: | Fayetteville, NC |
| Users: | 27 |
| Nodes: | 6 (0 / 6) |
| Uptime: | 38:51:18 |
| Calls: | 631 |
| Calls today: | 2 |
| Files: | 1,187 |
| D/L today: |
23 files (29,781K bytes) |
| Messages: | 174,060 |
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.
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.
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.
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 !
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.
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.
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 !
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%);
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.
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>.
I have never learned web programming on Mozilla.
I have used W3Schools since the mid 90's.
<div class="content"> worked !
<div class="content"> worked !
Thank You Very Much !
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.
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.
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.
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.
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 !