Is there a better way ? Even though this works

Because the pieces of text are numbered, then semantically it is an ordered list.
If you don’t like the default numbers, they can be removed via css (list-style). In Paul’s example he replaces them with the counter so the numbers are styled like you want.

3 Likes

I thought that list-style-none would have removed the numbers because I am trying to put them in brackets and the list desn;t do that.

This is what I am trying to achieve

I found this by searching sitepoint,

 <style type="text/css">
      ol {margin-left:0; padding-left:0; counter-reset:item}
      ol>li {margin-left:0; padding-left:0; counter-increment:item; list-style:none inside}
      ol>li:before {content:"(" counter(item) ")"; padding-right:0.5em}
    </style>
  </head>
  <body>
    <ol>
      <li>First</li>
      <li>Second</li>
      <li>Third</li>
    </ol>

Look at the code I gave you it adds the brackets for you with css counters!

.centred-list {
    margin:0;
    padding:0;
    list-style:none;
    counter-reset:section;
    line-height:1.2;
}
.centred-list li{margin:0 0 1px}
.centred-list li:before {
    counter-increment:section;
    content:"(" counter(section)".)";
    margin-right:5px;
}

The bracket is added here along with the dot that you wanted in your prefered display.

content:"(" counter(section)".)";

Just remove the dot if you don’t want it.:


`content:"(" counter(section)")";`

Don’t search Sitepoint for the same code that I have already given above :slight_smile:

2 Likes

Thanks, I got a bit mixed up because I had do a new “wrap” The one in this box didn’t have the border and I had to rename the list because the indentation is different i this box

What I cannot spot is which of the elements in the CSS controls the indentaion

I have tried very hard to follow the advice I have bee given here.

And have nearly done what you have all suggested. I am left though with two phrases that will not move to the right o that they line up below the 1 and the 2.

Having spent three hour doing it, I feel like just sticking some padding on it and be done with it (:confounded:-(((

Which lines in which page, Antony? URL?

www.c5d.co.uk/kimmeridge1911.php

Line 83 & 84 they should just be under the two numbers with the same indentation

I’m sorry, I don’t think I can help. Those line numbers are within the nav menu list items and I don’t think that is what you mean.

In addition,

None of the invalid <tr> tags have been deleted. For whatever reason you’ve chosen to ignore that advice.

The CSS is filled with invalid selectors like this: .table1841header td, tr, th {. More sound advice ignored.

The text on this page has become so small that it is impossible to read without zooming the window.

…and you are still building your site.

I’m sorry, but I still cannot fathom the rationale behind building a massive site with a precision layout while ignoring known errors in the CSS which compound page layout issues rather than fixing the buggy code as problems are discovered.

[quote=“ronpat, post:28, topic:250396”]
I’m sorry, I don’t think I can help. Those line numbers are within the nav menu list items and I don’t think that is what you mean. [/quote]

Thanks for looking anyway.

[quote=“ronpat, post:28, topic:250396”]In addition,

None of the invalid <tr> tags have been deleted. For whatever reason you’ve chosen to ignore that advice. [/quote]

I can’t find any empty <tr></tr> tags in the HTML and besides I spent all evening trying to sort this problem. I can’t do two things at once

As you know I have merged nine CSS sheets into one.

You will have noted that all the ids have gone

Previously each decades census had it’s own.
I’m not surprised if I missed something. I have also removed 30000+ &nbsp entries, and 7500 <br><br>.

Thanks again for looking

Why not give the correct line numbers in the HTML? You know that we cannot tell which lines are imported and being added to the base HTML by php. We have to refer to HTML line numbers which includes the lines added by php.

Maybe show a cropped screen shot that I can match.

Look again. The validator doesn’t lie.

https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.c5d.co.uk%2Fkimmeridge1911.php

Firefox + Firebug “show source”

FF with HTML; yep, it’s there.

There is a problem with some <tr> tags. Continue to deny it, or investigate and fix it.

3 Likes

One small step for mankind…

1 Like

I do want to know how you were doing that, i.e. what method or what tool you used.

Trying to give some help I reformatted the css file linked to from that page:
testcss.css (51.6 KB) The file is tested to work as before.

That took only a few commands in my editor.

I took the liberty to add the classes to the td and tr where I thought they were missing.

Mind that I moved some generic element blocks to the top to be easy to find, they were anyway eventually overridden by classes. Some comments may also been moved in error.

2 Likes

As Ron said those line numbers don’t match up to anything that we have been discussing. You will need to double check the correct line numbers or be more specific about where we will find this item?

1 Like

That’s not an argument contradicting the empty rows issue!

I don’t think Ms Excel is what @ronpat and @SamA74 are using when they look at your table code.

As they say the empty rows are invalid, and there are 31 instances of three empty rows:
`

` , there are also 93 cells before each instance using `rowspan=4` to span those emty rows.

I don’t think it’s so easy as to just delete those. I,m afraid it would take some debugging to fix this without corrupting the table.

1 Like

Thanks for coming back to me, Here is the screenshot you asked for. I have been away this morning,

I have tried to amend the whole page semantically as you suggested yesterday. Would you be kind enough to have a look and let me know if I have got the right end of the stick please? All the heading columns are constructed the same way but I guess one with lots of lines would be best

It’ line 152 & 153

You wouldn’t if you knew. First off I copied and pasted everything into one massive CSS sheet and used codebeautifer to identify duplicates and itemise it better but it actually made a complete mess of it.

So I started again, with the testcss.css and added the body and font styling which is the same on all of them. I then looked at every web page and identified any CSS class or id or whatever, went back to its relevent sheet and transferred that to the new stylesheet. If an entry had another specification which did exactly the same thing, then I changed the CSS instruction in the HTML. and did not add the duplicate to the new sheet. I also reclassed most of the IDs in the classes.

I guess basically it was hard manual labour, But generally it has been worthwhile. Though obviously there are issues.

Thanks for the revised CSS sheet. Removing the comments won’t really matter. I know what most of them do as I been dealing with them for so long!

Hi,

That seems to be a different layout to the other block we have been discussing? It looks like the list items are now still centred as blocks but the text in each block is left-aligned (not centred as per the other one). Therefore I’m not sure how you want this to look but I would go ‘roughly’ along these lines (although the page seems to be a moving target at present).

/* third box */
p.central{text-align:center;margin:0 0 1em;}
p.central span{display:block}
ol.left-aligned{text-align:left;display:inline-block;}
ol.left-aligned span{text-align:left}
ol.left-aligned li{padding:0 0 0 25px;position:relative;}
ol.left-aligned li:before{
  position:absolute;
  top:0;
  left:0;
}
.wrap.noborder{border:none}
<div class="wrap noborder">
  <p class="central">of every Person, whether Member of <span>Family, Visitor, or Servant,</span> <span>who</span></p>
  <ol class="centred-list left-aligned">
    <li> passed the night of Sunday April<span>2nd,1911, in this dwelling and</span><span>was alive at midnight,</span><span>or</span></li>
    <li> arrived in this dwelling on the<span>morning of Monday, April 3rd, not</span><span>having been enumerated elsewhere.</span></li>
  </ol>
  <p>No one else must be included</p>
  <p class="central smallertext1911">(For order of entering names see Examples on<span>back of Schedule)</span></p>
</div>

However I’m not sure if that was supposed to be the same as the others or was indeed another variation.

Don’t create new rules for each section unless they are vastly different but instead use classes as modifiers to the content rather than duplicating all the styles (as in wrap1 and box1 etc).

Note than in my codepen demo the widths and min-widths were just for example and shouldn’t really be needed unless you want those dimensions enforced. Also the border on the wrap was only for show.

2 Likes

It is moving because I am trying to work on the table.

Each family though has exactly same layout, and my intention is to get the top one right and then copy & paste it in

1 Like

(I didn’t say removing them. I told you I moved them, to where I think they were originally placed.)

Thanks for telling how you went about merging the stylesheets.

Because I thought it could be a risky task, I couldn’t resist removing all the empty table rows.
Together with deleting the 31 instances of the three empty rows were the 31 instances of different rowspans that needed to be three rows lesser. Piece of cake search and replace.

To restore the effect those rowspans had I inserted a “trspan” class on the row before the now deleted three rows. That class is used to force the row to absorb all avaiable height for its cells, just like the former rowspans did.

Uploaded the now valid (I hope) table and the style with the new class in.
kimmeridge1911-tr.html (421.7 KB)
testcss-tr.css (51.8 KB)
(Added “-tr” to the file names for transfer. Mind the files should be copied/renamed to their original names to be used or tested.)

EDIT)
Come to think of I hadn’t reformatted the table to proper indentation. Uploaded the files new.

That sounds as a good idea. I hope you can use the uploaded files.

2 Likes