- This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
Viewing 4 posts - 1 through 4 (of 4 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
How could I recreate this formatting in CSS?
I’d like to be able to do it without the display: run-in;
property becasue it’s not supported in Firefox. I tried making both the heading and the following paragraph inline, but that breaks when the next heading comes immediately afterwards.
https://codepen.io/anon/pen/OmZoBB?editors=1100#0
Also, is there some standard way of moving numbers into the margin? Any drawbacks to position: absolute;
and negative left margin?
Well your HTML structure needs some work.
The inline headings really aren’t working for you.
You be better using a proper list structure..then using headings and paragraphs if you want….that’s essentially what you have here…a list.
You might also look into CSS Counters
https://codepen.io/Paulie-D/pen/mmLvyG
As for positioning the numbers…sure, I’d use absolute positioning…it’s the most logical method.
I thought about a list, but the text is a legalese with the numbers being an integral part of the headings, because they’re mostly referenced in other documents by the number instead of name. Basically, they’re just identifiers for each section, so they need to be in the source. The sections are pretty standard (although, admittedly, somewhat short-ish) multi-paragraph body matter, and their ordering bears no weight, so I felt that it makes more sense not to use a list.
I did find a pretty elegant hack in the meantime:
h1::before,
h1 + p::after {
content: "";
display: block;
}
Accidental double post.