First off this works and displays as it should, but I suspect I should not have to use “minus padding” to get it to do so. I guess I would be better changing the measurements from px to % for those who have a different font or text size. Though I know I cannot specify a %age for minus padding.
<tr>
<td colspan=5 rowspan=6><p class="table1911alignleft"><br>I certify that:—<br>
(1.) All the ages of this Schedule are entered in the proper sex columns.<br>
(2.) I have counted the males and females in Column 3 and 4 separately,</p>
and have compared their sum with the total number of persons.<br>
<span class="minuspadding12">(3.)</span> After making the necessary enquiries I have completed all the entries on<br>
<span class="indent5">the</span> Schedule which appeared to be defective, and have corrected<br>
<span class="padding191120">such as appeared to be erroneous.</span><br>
<p class="indent12">Initials of Enumerator G.E.B</p></td>
<td class="nbl" colspan=3><p class="statscenter">TOTALS</p></td>
<td class="nbat" colspan="7"></td>
</tr>
@certificates: when you post code here, you need to format it so that it will display correctly.
You can highlight your code, then use the </> button in the editor window, which will format it, or you can place three backticks ``` (top left key on US/UK keyboards) on a line before your code, and three on a line after your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.
There is no such thing as negative padding but I think you meant negative margin anyway
As with all these layouts you need to think of semantics first and as you have a list of items a list is the correct element to use.
With a careful structure you can avoid all the miscellaneous padding/margins and magic numbers (which by the way don’t line up in your page) and simply let the html and css do the heavy lifting for you.
I would go about it like this:
The code could be dropped straight into your cell.
I have become confused now because as far as I can tell my tables are all validly constructed yet the validator tells me there are 93 error each regarding nothing n the cells
The only complicated part was the CSS counters but that had nothing to do with the way it was laid out and could simple be replaced with numbers as in your version.
The layout works by using inline-block which can be used to center the whole thing in the available space. The box will be as wide as its longest line of text.
The centred lines in each item are created using spans which are set to display:block to bring then to a new line and then text-align:center to center them.
This keeps the whole lot aligned together as required.
Using breaks to break lines is not semantic unless it is a natural break in the line such as lines in a poem. For text that you want visually to appear on the next line but not to actually be another line of text then you should use css to create the visual appearance. A break is a an html element that usually means the line has ended and a new line started. It is not a means to split a line of text at some arbitrary point and as such should seldom be used in paragraphs. It is mostly used in poems to create a new line.
The sentence you have is one sentence that does not have a pause (or break) in its logic and is read as one sentence. Therefore a span is used which infers no semantic meaning to the text and the required visual display is handled silently through css. The meaning of the text is therefore untouched and as expected. Html provides the structure and css provides the visual that you require without harming the semantics of the html.
Thank for that. It’ really is helpful. Can I ask will it work as is for all the entries or will I need to do any adjustments because some have longer names than others of course
I have been trying to adapt the first code you gave me so that I could use it in the top left box which begins …of every person, but whilst I can see you have list style none in the CSS it still gives me the 1 & 2 or two dots if I change it to a ul.
of every Person, whether Member of
Family, Visitor, or Servant,
who
(1)passed the night of Sunday April
2nd, 1911, in this dwelling and
was alive at midnight, or
(2) arrived in this dwelling on the
morning of Monday, April 3rd, not
having been enumerated elsewhere.
Initials of Enumerator G.E.B
</head>
<body>
<div class="wrap">
<div class="box">
<p>of every Person, whether Member of<br>Family, Visitor, or Servant,<br>who</p>
<ul class="centred-list">
<li>(1)passed the night of Sunday April<br> 2nd,</span></span> 1911, in this dwelling and<br>was alive at midnight, or</li>
<li>(2) arrived in this dwelling on the<br>morning of Monday, April 3rd, not<br>having been enumerated elsewhere.</li>
</ol>
<p class="footnote">Initials of Enumerator G.E.B</p>
</div>
</div>
</body>
</html>
I know, which i why I haven’t implemented it. You seem to developed an acerbic wit of late, I have seen some of your responses to others, I like it and it makes me smile
It should not be a ul but an ol as I mentioned above. The numbers are being added by the css counters rule and you do not need to add them manually. Thjis means that if at a later date you ad or remove or insert entries the numbers will still be uniformly correct. Imagine if you had a hundred entries and you wanted to remove one entry in the middle! You would then need to manually change all the numbers from 1 - 99. The css counters does this automatically.
