This is a nice simple solution but also highlights what I don't like about the use of CSS and graphics on web sites; complex dependencies.
When writing software the more complex the interactions between different parts of the code the harder it is to debug and/or change. That's the argument against too many global variables and goto statements.
Let's enumerate some of the interactions in your simple example that must be considered if you wanted to make changes to this design.
GRAPHICS
If the customer wanted you to change the color scheme of this design what would you have to do?
1. Recreate the three graphics elements with the new colors.
2. Change the CSS body tag background color. This value has to match the bottom part of the header_bg.png graphic to blend with the left and right border panels. (I think that's right.)
3. Change the CSS #container tag to adjust the center main content background color and this has to match the bottom color of the header_bg.png graphic.
4. Change the CSS #navbar tag to match the top of the header_bg.png graphic.
The use of absolute positioning for the menu text also means that any change in the height of the header section requires and adjustment to this parameter too. This happens to me all the time when I add a photo or other graphic to the header that was taller than I expected.
I've been struggling with all these factors for several years so I really appreciate your attempt to illustrate a simple solution. I do like that the HTML li.selected tag clips the background graphic. I didn't know that so I'll try that out.
But for me this is still more interaction between these elements than I would like. I'd like to be able to change these things through a web interface and I don't really want to have to automate the generation of graphic elements automatically.
Before XPages I've experimented with dynamically generating the CSS with math to control absolute positioning. This way I could keep all the logic for calculating where things were placed in one piece of code. But it wasn't very flexible so I had just moved the problems to another place.
What has really stopped me, though, is the need to accommodate the various differences between how browsers render HTML and CSS. I just can't afford to try to keep up with all the changes and discoveries that affect this.
This is a nice simple solution but also highlights what I don't like about the use of CSS and graphics on web sites; complex dependencies.
When writing software the more complex the interactions between different parts of the code the harder it is to debug and/or change. That's the argument against too many global variables and goto statements.
Let's enumerate some of the interactions in your simple example that must be considered if you wanted to make changes to this design.
GRAPHICS
If the customer wanted you to change the color scheme of this design what would you have to do?
1. Recreate the three graphics elements with the new colors.
2. Change the CSS body tag background color. This value has to match the bottom part of the header_bg.png graphic to blend with the left and right border panels. (I think that's right.)
3. Change the CSS #container tag to adjust the center main content background color and this has to match the bottom color of the header_bg.png graphic.
4. Change the CSS #navbar tag to match the top of the header_bg.png graphic.
The use of absolute positioning for the menu text also means that any change in the height of the header section requires and adjustment to this parameter too. This happens to me all the time when I add a photo or other graphic to the header that was taller than I expected.
I've been struggling with all these factors for several years so I really appreciate your attempt to illustrate a simple solution. I do like that the HTML li.selected tag clips the background graphic. I didn't know that so I'll try that out.
But for me this is still more interaction between these elements than I would like. I'd like to be able to change these things through a web interface and I don't really want to have to automate the generation of graphic elements automatically.
Before XPages I've experimented with dynamically generating the CSS with math to control absolute positioning. This way I could keep all the logic for calculating where things were placed in one piece of code. But it wasn't very flexible so I had just moved the problems to another place.
What has really stopped me, though, is the need to accommodate the various differences between how browsers render HTML and CSS. I just can't afford to try to keep up with all the changes and discoveries that affect this.
Peace,
Rob:-]