What is the Built-in Box-Model of the WEB (Advanced)?

This shot is the continuation of the original shot in the series about the box model.

The work is clearly unfinished since the Color List (Menu) that you can see belongs to the Left of the writing, NOT below it. Here, we will demonstrate the actions needed BEYOND just moving it.

I did say that I would keep this as simple as possible, so let us just do what the code itself suggests.

The color of the last three lines depends on your browser. The point is that those three lines DO NOT affect the result.

At this stage of the game, we have some idea of WHAT we are going to send. From here, we will develop the LANDING SITE that receives it.

We are starting with a more advanced version of the model than we have seen so far. When we have the solution to that, it will be a general solution that applies both to what we have seen so far and just about everything else!

Outlining the extras

You will notice some enhancements that I have just now added to the model. They are NOT, strictly speaking, part of the main point; however, for those interested, these two side issues are mentioned here:

Banner and postage stamp

[Float: left] is a CSS command that supports two or more DIVS inside a parent to be alongside, rather than on top. Within the code, the ID that supports this is Banner WITH_ p Stamp.

Scroller latin

[Lorem ipsum] is recognized by all in the typesetting and text-programming world. The reason for using it here is that being hundreds of words long, it is big enough to require vertical scrolling. A decent text-editor can easily skip around it because it takes up three very long lines with blanks to separate them. Within the code, the class which supports this keeps the original name of “workArea”.

Bringing it all together

Since only one color can “win,” it is preferable to take the hex code background rather than the one named “Coral” as there is an obvious way to edit a hex code.

That hex code background also needs a matching text-color – it is probably best to stick to black or white.

The following sequence completes our requirements for now:

1. Keep (one) color from the border of the “Landing Zone” as a background for “Menu Holder."
2. The “Scroller Latin” now has its border replaced by a margin because it is part of the “Work Area."
3. Step <2> is repeated for the “Banner with Stamp” because it is also part of the “Work Area.”
4. The “Menu Holder” no longer needs a border as it was only for estimation.
5. The “Position Absolute” sequence is enabled so that the “Menu Holder” can finally go HOME.

Note About Viewing: If you view this in low magnification or on a very widescreen, you will have to reduce the viewer-width until the page lines up sensibly. There is NOT room in this shot to explain a more robust solution for this.

The takeaway

The menu must possess its own background. Furthermore, the area(s) it goes to should be empty so that it is big enough to accommodate that menu.

Points about the Source Code

The precise names used in the code are simply not the optimal names for teaching beginners exactly what they do. “Menu Holder” is coded as: holdsThe_menu. “Scroller Latin” is the single word, scrollerLatin. “Banner WITH_ p Stamp” is the single word, BannerWITH_pStamp.

A different type of issue is that there is no div called “Landing Zone." Instead, the job is done by the “Banner WITH_ p Stamp” immediately followed by the “Scroller Latin”.

This document is aimed at novice programmers. It is, therefore, optimized for teaching CSS. From this, the code differs in a few ways from what a production-programmer would normally use. Examples are based on the Line Numbers included within the title - If you are using these for positioning, comments of deleted code may remain from the previous version.