Friends . . . I just figured out I can actually save your code — even little bits of it — and reference it by your post number (it’s pathetic how clever I feel)! This is how I can distinguish all of these versions. So for example,Coot’s post #63 for the “OR” product. —
. . . I can save as NB_Coot_63.html
— the NB is for no border
— then Coot
— and finally, 63 refers to his post
And Ronpat’s (beautifully introduced btw, always thorough) post #68 is saved as BO_RP_68.html (the BO stands for Border).
Before I lose my berth at the library I’m going to do some furious copy-and-pasting exports using this key. RP, Coot, I can’t tell you how much I appreciate this.
Hey all, I realize I’ve been m.i.a. on my thread but I’m going through a difficult period and my posts are limited to whenever I have the gas to get to the library — a less-than pleasant experience surrounded by children hammering on their keyboards playing games, screaming at the top of their lungs, etc. I want to first address Coot’s inquiry re: the end-product of these html experiments:
Whenever I am posting to a forum I don’t post the end-product because I think it’s extremely important that the html destined for the archive of this thread be as boiled down and simple as I can make it — templates, in other words, from which the user can branch out starting from a proven layout with a space-hogging fixed-pitch font (the mighty LUCIDO CONSOLE is my personal favorite) and —
as little CSS and HTML as possible
to achieve the desired effect. Let me repeat that:
as little CSS and HTML as possible.
If anyone is curious about my end-product you all can swing by my Codepen account (posted earlier). Through the years I know how much I have appreciated examples posted on the net that have kept the shell of the example basic, making it easier to build on it one. error. at. a. time. I discipline the code by using a monospace font with the expectation that any font the User chooses will almost universally render a more expansive canvas. Now rp, coot, let’s code . . .
rp and coot — I’ve given the code you’ve posted some serious love in the past week. How can I put this. I love how lean coot’s code is, but . . . rp’s looks better. In the html that follows you can see where I’ve experimented with bits and pieces from each of you, and then placed a kind of “header” listing the forensic data of how much space the example is taking — this after removing your comments.
In fairness to you in particular rp, I probably should have distilled my browser compatibility needs to just two browsers — IEx and Chrome — in my first post, for which I apologize. Please appreciate the environment I’m working in, seated alternately next to the Queen of England, Pigpen, Cicero, or . . . Scut Farkus.
It looks great rp but it’s too damn much. Skip Mozilla, Opera, Linux, that Apple-version-with-the-pit-helmet, and anything else. Have pity on me and untold future aspiring web creators and limit it to just Chrome and IEx.
The following example is largely based on one of Coot’s iterations that I refer to as the “No Border" (NB) version:
The two color blocks at C4R4 float directly above the content in C4R5 with no border intruding between the two, and padding left + right identical.
The other versions I’m hoping to make are of RP’s “BORDER” versions (the border is intact, either as two bits on either side -or- the entire width of the cell). In addition to being code-lousy the most annoying problem I’ve had with the following is trying to render the 4/5th row of the forensic header — see my class LEGEND — in a smaller font size.
I’ve installed the big red X in the forensic header of IEx’s browser column as the ipso facto default it richly deserves (ideally there should be no red X anywhere). Ignore the FF column but please keep it in place.
I have nothing specific to submit in reply to your latest posts at this time.
I have no idea where your remark came from. I have written and tested my code using Firebox (sic) and Chrome. It should work in all devices but it has not been tested in anything other than FF and Chrome.
that Apple-version-with-the-pit-helmet - “pit” is spelled “pith”. I only know that because we wore them when outdoors during marching practice during basic training during the summer in Texas. :sweltering:
My personal goals do not include using as little HTML and CSS as possible.
My first objective is to write reliable, stable code that meets or exceeds the OPs requirements, then reduce it to more efficient code, if possible.
I took character counts of my latest version of your layout (my code, not yours, and not yet posted) which uses 6 columns and has no white space around the colored cells:
As it sits, it has 146 lines and 3,921 characters.
I then deleted leading and trailing spaces which destroyed the indentation of the HTML and CSS but reduced the character count to 3,217 characters.
Next, I deleted my comments from the top of the page and the extra unordered feature list above your table matrix which reduced the number of lines to 128 lines and the character count to 2,761 characters.
Finally, I deleted all commented out CSS and notes within CSS comment marks. That reduced the number of lines to 117 lines and the character count to 1,871 characters.
The number of lines could be reduced by another 14 if desired.
The length of the title could be reduced which would reduce the character count.
All of the carriage returns could be deleted from the CSS and HTML so you end up with a total line count of 1 and a total character count of 1,629 but the code would be difficult to troubleshoot and maintain.
In other words, I see no value in your request for the “smallest possible” code. I never changed the substance of my code at all except to make it unreadable and unmanageable yet it still works just as well as the “non-minimized, manageable” version. I recommend that you recalibrate your priorities. You are more than intelligent enough to grasp good code, It isn’t difficult, it’s just new, and your page is small so there isn’t much of it.
You need to heed my earlier advice to dump the use of the built in “page view” in your editor and develop your code using a real brower. And experiment, experiment, experiment with the CSS properties that you use so you learn how they behave and when to use them. Use online resources to find out what the choices of values are for each property used. None of this is “too much”, it just takes time and repetition to learn… and comments in the HTML and CSS (which means no minimized code) helps immensely when you want to work on the thing a year or two down the road.
It would be a mistake to think that you can combine several simplified “templates” in a new page and expect them to work the way you wish they would without making changes to the CSS. HTML and CSS work together, put the CSS in a different HTML environment and the chances are that it will fail to work as you expect it to. You need to understand how the properties work and how to modify them.
I’m just babbling free advice so you don’t feel abandoned.
When you have some specific objectives, let us know and we’ll help if we can.
There is a horizontal scroll bar on the body element in your latest demo #87. This is a big ‘no no’ as far as a web page is concern and you should never be seeing a horizontal scrollbar on the viewport across the whole range.
If you look at all the other demos that the kind people above have coded you will see that not one of them has a horizontal scrollbar at widths wider than the table.
As this is a learning exercise I will leave you to find the cause in this rule:
As an aside these days it is a convention to use only lowercase for your css selectors and html tags as it is far easier to read. It is not invalid but looks sloppy when you have an opening closing tag in capitals and a closing tag in lower-case.
Consistency is the key and coders these days tend to use lower-case all the time. Seeing a page with capital tags, capital CSS selectors is heavily reminiscent of pages built in the late 90s and although it may be valid it looks ugly and I find the code so much harder to read. (Note that if you were coding in xml then it would all be invalid).
In the end its a matter of choice but consistency is the key either way.
smaller font size.
