Friends, hello from The Other Side of the Plague. It’s been awhile and I need your expert guidance once again. I used to post here as ‘semicolon’ — an error on my part when I first registered years ago because on literally every other technical forum I am known as ‘semicodin’: an artful play intended to convey that I have reduced skill when it comes to codin’! Coot still here? I see Paul is (thank God!) and for your benefit Maestro this old Semi-talented Sitepoint Member TIDIED (and did so manfully).
I have to warn you: The code I’m uploading is . . . intricate, so I’m also uploading graphics of both the output and (most importantly) what it is SUPPOSED to look like. I’m also uploading a fancy little ampersand graphic (the only IMG used in this project) for use in testing my code. And let me say this:
I would never attempt something this ambitious as HTML but my infernal Library upgraded from Windows 7 to Windows 10 — quite possibly the most universally-loathed OS _on the planet_semicodin
m locked out of accessing my templates (done in Adobe PageMaker, InDesign & Acrobat Professional) on DVD media because WIN10 can’t read the disks. The three hours I wasted on this is enough: I’m going pure HTML & CSS on this because I never want to be placed in this situation ever again. These templates are extremely important (for reasons I won’t go into) and I need to get them rendered as close to their Adobe originals as can be practical for HTML. Farewell Adobe; Hello HTML.
Friends I’m in a nursing home following a complete hip replacement w/post-op complications and doing this on my SmartPhone which is not as bad as you might think! with a little Android App (regrettably titled “Photo Editor” but whatever lol). The code I’m uploading is the first page of a letter with a 2-Column opening and vertical spacing to accommodate two little USPS Stickers. I’ve floated, blocked, aligned, overflowed, and collapsed until I’m blue in the face and this is as far as I’ve been able to get. I’ve tried to be as helpful as I can with the graphic of what it is supposed to look like and I’m extremely proud that I was able to cough up the Rounded-Corners Box (and more miraculous, the table cells inside it, with both left and right aligned cells) but, as with everything about this project, almost nothing is positioned correctly and much of the text is missing important bordering and size features.
I’ll leave it there and thank you as always for your patience and unrivaled skill. What a life eh? As Freud would say: “If it isn’t one thing, it’s your mother.”
Unfortunately your timing is very bad as I am just about to go on holiday for 2 weeks in a matter of hours and unlikely to have internet access while away apart from a sporadic connection on my mobile.
In order to help anyone else around while I’m away I have tidied up your code a little and put it into a codepen so that others can fork and work with it more easily, I have added some basic layout to get roughly where I think you were going but have not rigidly adhered to your measurements as that is something you can do later.
Note that your code format is ugly and unreadable (to me) and you should use lower case in the css as that is standard practice these days and so much easier to read. Also note that ALL CAPS for your text content should be controlled by the css (text-transform:uppercase) and not by directly TYPING ALL CAPS IN THE PAGE as that is a presentation issue not an html issue.
Generally sentences and paragraphs should be use the p tag although for the odd word or two a div is ok but try to think semantically about the html and if its a paragraph of text or a heading then use the appropriate html element in the correct order. Not everything is a div.
Structure of the html is important so group items properly and try to use classnames that make sense rather than saying big or bigbold because that means you can never change how they look from the css without changing the classname or having a classname that says bigbold but you have styled it small and light. It’s ok to have a few utility classes but for structural elements use more meaningful classnames (like header, nav, content, main-content, sub-content, footer, highlight and so on… )
I hope the above codepen helps and I don’t mean it to be a full (or fully valid) solution but a starting point for tidying up and working with.
It is unlikely that I will be able to reply for many days as I am leaving in a few hours and as mentioned will have limited internet access (There is no wifi where we are travelling and the mobile signal only works outside).
Thank you Paul. I won’t use that Tidier again, completely forgot about all caps! Enjoy your holiday and I/We’ll point ourselves in the right direction.
*as you can see I’m out of practice with these forum tools, sorry if my replies are out of order! Do you all still have that link for quoting instructions etc.?
━ ━ ━ ━ ━ ━ ━ ━ ━ ━
I will John! I’m pretty sure I even registered with them (in my ‘semicodin’ User name).
And thank you all for giving me Tidy alternatives. When I last did this there was a very clean, well-constructed site you could go to: a box to paste your code in and exactly one button to click to perform the task. Some of these sites may work perfectly but I can’t figure out how the hell to use them (and I don’t usually have trouble in that department).
Well I don’t believe it. I actually got this to work . . . TIDIED IT (no, really this time) . . . verified it . . . and uploaded everything to my ‘semicodin’ CODEPEN account (Ronpat — there’s some stuff with your name on it too!). I had to do this completely from scratch because Paul’s code looked too alien for me to follow. I’m too stressed to study theory at the moment and just need something that will compile to Acrobat right now. It is no reflection on Paul. I fully intend to pick up the conversation when he returns from vacation.
There are two Pens: One, a colorized replica of how the floats render; the second, how it will look actually.
The general nomenclature is: semicodin’s 2-Column FLOAT Letter
followed by a 6-digit version count in reverse. So we’re starting with my 999999 and the next should be 999998, then 999997, etc.
What is not working are the rules that should appear in my ‘ROUND’ container — and they are CRITICAL.
The lines need to span the ENTIRE ROW of ‘ROUND’ and the LAST ROW must have an additional line just below it. I need the lines defined by PIXEL SIZE (no thin, heavy etc. crap). And they need the capability of being styled in different ways.
The text should be vertically aligned DEAD CENTER and I want a few pixels between the text and the line, not sitting right on top of it! I experimented with various properties like baseline (or one of the other text tools) and even tried to tighten the letting by giving line-height the same value as the font-size but nothing worked. I was up all night getting it to this point and without going into detail, let’s just say the sh+t is going to hit the fan tomorrow if I don’t cough up these PDFs filled with their respective contents. I lost one day waiting for Sitepoint to send me a password reset before guessing they don’t want yahoo addresses. Thank you in advance everyone. Here are the links:
Edit — okay I don’t know why I couldn’t just display the Codepen links. ERM . . . trying
Hello Sitepoint. I redesigned this template to give the table a smaller ‘mirrored’ version of its larger parent and simplified style naming. Briefly, #RNDBDR1 is the large container and its junior – #RNDBDR2 – is the table with columns (see the graphic below for what it’s supposed to look like).
Sorry, some of my formatting was lost (but it looks like the code came through). So the skeleton is —
BODY #TWOCOLUMNS ID #COLUMN-A ID #COLUMN-B ID #RNDBDR1 ID #RNDBDR2 ID
Contained in the table .RNDBDR2 its 2 columns are —
.LEFTCOL
.RIGHTCOL
the border ‘GROOVY’ initiates the textual content of the letter and clears the floats —
.GROOVY clear: both etc.
— and the two remaining styles seated just below .GROOVY are page headers I can quickly grab and save as their own Templates (not intended to be a part of the lead page, just stored with it for convenience).
━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━
There are three problems, chief among them my attempt at border-radius . . .
The table #RNDBDR2
lost its border-radius
TH, TR & TR borders need to span the full width
displays a border-bottom in the last row (it shouldn’t); and
sacré bleu! – displays SQUARE at corners, blocking its
border-radius: 10px;
border: 3px solid black
round style
MAROON is supposed to be a small ‘focus box’ 80% of the width of COLUMN-A and CENTERED. Appearing directly below Maroon the font color for FIVE is supposed to be #353535. They share the same background-color – #CCCCCC
Both NINE and TEN are the same font-size but (for me) NINE is displaying gigantic . . . until I rotate my SmartPhone* to Landscape (Wide) mode, when NINE displays perfectly like TEN.
Thank you in advance for all help. Tidied code below. -semicodin
To be honest I’m not happy to help you produce something that is completely the wrong approach. I gave you a working and much simplified example to work from earlier in the thread and I had hoped that would spur you into the 21st century and use the modern more reliable methods in your approach.
I do see that you have made some efforts to tidy up so that is good but there are so many things that are wrong or will go wrong that I fear I may actually frighten you away of overwhelm you by mentioning them all. I will point at many issues below but is not an exhaustive list and not meant to deride your current efforts as we all have to learn our way through this jungle.
The floated approach is really a non starter these days for many reasons and flexbox is more reliable and robust and I have given you an example of that in my first demo.
However let’s ignore that for now and drill down to some problems:
First as a sign of goodwill here are some quick fixes.
Those three problems can be fixed with the following code:
Tables are shrink to fit so are only as wide as the content pushes them.Therefore the rows will not expand to full available width automatically unless you make the table width:100%.
The background on your th is blocking out the border-radius on the parent so you need a border-radius on the th as well to round the corner and crop the background.
Remove the border bottom from the table and the last row.
As an aside your th element should really be in the thead and not in the tbody to make semantic sense.
No you are not
You don’t have the viewport meta tag in place so effectively you are designing for desktop only. You don’t have media queries in place for smaller devices so you are designing a one size fits all display that takes no account of the available screen space.
What will happen on mobile devices when you omit the viewport meta tag is that they will take a guess that the page is 980px wide (or thereabouts) and simply scale the page smaller and smaller until it fits into a mobile screen. That results on my old iphone with a screen shrunk so small that I can read absolutely nothing.
This is not how you design for mobile. You cannot simply scale text smaller and smaller until it fits as that means it can’t be used without pinching and zooming everything. This behaviour is a legacy behaviour that was implemented when phones first came out so that people could get something rather than nothing but no one does that these days.
You should be using the viewport meta tag and then using media queries to change the design depending on how much space it needs at smaller screens. (Take a look at my first demo that shows how content can be arranged to be viewed at smaller screens.)
Okay enough said about that lets address some problems that I have mentioned here and in other places.
Ok so you want it height 100% and then a margin-bottom of 30px that makes the total area required to be 100% + 30px. That makes little sense. Luckily your height:100% is completely ignored in that context because percentage height can only be based on an unbroken chain of heights all the way back to root (the html element). Therefore height is redundant in that rule.
If indeed the element did manage to have the 100% height then your content would flow out of the bottom of the element because height is a limiting factor and if the screen was say only a few hundred pixels high then any content greater than that will overflow the element and be ignored in the flow.
Suffice to say you will seldom use height:100% unless you know why you are using it. In most cases it is not necessary. If indeed you did want an initial height you would use min-height anyway and let the element grow larger if required.
Let’s now move on the max-width:
max-width: 38%;
That looks innocuous enough but effectively you have given the element no width to start with as floats are shrink to fit. If the content in that float was perhaps a list and not unbroken lines of text then the width of that element would be the width of its content. If you were to add a background to that column you would see that it’s only when you add content that you get any width. The column will not be wider than the max-width but it will be narrower which is no good if you decide you wanted a background color to it.
Therefore all you need to do is remove max-width and use width instead.
What is that doing? It looks like an old hack for IE6 from 2002. Why are you building in hacks from 20 years ago
All of these are important concepts and exacerbated by the use of floats. Don’t get me wrong I love floats but these days seldom have need to use them unless its for text wrapping around an image.
It is centred and doing exactly what you tell it! The FIVE FIVE should obviously be a heading tag at appropriate level and the span should be a p element as already mentioned.
Looks the same size to me except it is bold.
Thats because of the scaling algorithm I talked about at the start and your lack of a viewport meta tag. The phone will adjust things as its sees fit to make it squash into its viewport. You have a width that is wider than most smart phones so the chances of it rendering properly are almost nil. Not to mention that phones will scale text when rotated (unless counteracted) and that just adds to the confusion.
None of those problems would be evident in my demo. (or few of them as it was only a quick mock up).
Lastly I have to once again remind you that html is a semantic language and you must use the right html for the job in hand and use heading tags , p tags , table tags and list tags and so on when they are required. Not everything is a div and spans are used for inline fragments and not as paragraphs.
Your use of classnames is still bewildering and so hard to follow or use. What happens if you change the order then your number nine will be before your number eight and so on. It makes no sense to name things by their order or appearance.
For example you have a class of maroon. What happens if you decide later that red would be better. Are you going to do this.
.maroon{color:red}
That has just doubled the workload and the usefulness is zero. You’d have to change the html so that all maroon classes were now called red instead.
.red{color:red}
However if you had said something more appropriate like:
.highlight {color:red}
There would be no need to change the html as it could be any color you want.
However better-still would be to do this:
.focus-box{color:maroon}
Problem solved. You know what it is and you can style it how you like.
Having suitable classnames makes it so much easier to debug and to manage long term. If you have well structured html and good classnames you make life so much easier.
I just want to thank you again Paul for all of the wonderful advice you have given me over the years. I will not be here ten weeks from now but never doubt that I am interested in and do read – and think about – your advice. I visit your archived site as well and actually tried modifying a few of your examples before throwing in the towel. I will experiment with your modifications/rewrites and study flexbox. You are this planet’s “Elder Statesman for Coding” and long after my account has been closed here I will follow your advice Paul. You are a treasure Sir.
It’s ok to have a few utility classes but for structural elements use more meaningful classnames (like header, nav, content, main-content, sub-content, footer, highlight and so on… )
I gave you a working and much simplified example to work from earlier in the thread and I had hoped that would spur you into the 21st century and use the modern more reliable methods in your approach.