Hi, how do i make the CSS for the dates to be at the left side of the paragraph like that?

This is a card just FYI.

Thanks in advance.

Hi there JUI43555,

checkout the attachment to find one possible solution.


Click to view attachment

coothead

There are lots of ways you can do it (e.g. flex, float or inline-block?). Here's one using "position: absolute". I wonder if a Definition List would be more semantically appropriate for value pairs like these?

CSS:


HTML:

Hi there Christian J,

I would suggest that you change this...

CODE

div.about-us-card-1 {
position: relative;
padding: 2em;
width: 30em;
}

...to this...

CODE

div.about-us-card-1 {
position: relative;
padding: 2em;
max-width: 30em;
}

It will then make the page fully responsive.

coothead

Thanks, that should help.

One thing to keep in mind with "my" example (actually it's from the CSS2.1 spec) is that the DD's left margin must be large enough to accomodate the DT text. That's not a problem if the length of the DT content is known (such as the four-digit years in this example); but if the DT text content can vary widely, maybe some other solution (like flex) may work better by expanding the left column if needed?

Here's one using CSS tables, it's even shorter and should adapt to varying amounts of content better.

CSS

CODE

div.about-us-card-1 {
display: inline-table;
border-spacing: 1em;
max-width: 30em;
}

dt, dd {display: table-cell;}

Correction to make the padding/margin look more like in the OP's screenshot:


The second ("Attempts to decentralize...") section is still not the same height as the first section though (like in the screenshot).


HTML (same as before)

Here's one using inline-blocks. This one is sensitive to the (max-)width values of the DT and DD, or they'll end up below each other instead. Also the default margin of the DD needs to be removed.

CSS


HTML (same as before)

Now I realized that my Definition List examples rely on using separate DL elements for each pair of DT/DD elements, maybe that's not entirely appropriate?

It seems possible to use only a single DL in each card DIV with CSS "position: absolute" or "inline-block" (with added DD bottom margin), but "display: table" may not work since you need the DL for the new CSS table rows.

It can be much simpler. What about this?

Everything in the same DL.

Much better! And if by accident the DT text is longer than the DD's left margin allows, the DT will just push into the DD area, which looks bad but is still readable (unlike how position absolute text usually covers other content).

I assumed there would only be years.

It's just a matter of time before a client wants to add months too. Better safe than sorry.

If that happens it isn't that hard to give DT a width and adjust the left margin on DD accordingly.

True, I was thinking more of cases where site owners make changes to the text content without knowing much about how it affects the HTML and CSS.

Well, I haven't heard anything about clients...

There are a lot of different ways of doing this, and ten to twelve years ago I'd have leaned towards abusing the definition list. NOW though, the only thing I really see right in any version is the presence of an H2, and the paragraph wrapping a paragraph.

BUT, that span is obviously a heading for an ARTICLE, that's H3's job... marking the start of a subsection of the H2 preceding it. So long as you'd only have one paragraph, I'd make that a SECTION containing ARTICLE of H3 and P.



The code for formatting the section going something like this:



MAYBE adding a width declaration on the H3 if they're not uniform. Using display:table might be a more versatile option instead of flex, I'd have to see more data and style to decide on that.

The big key though is writing the semantic markup BEFORE worrying about styling it, since you need to always keep in mind HTML is for MORE than what it looks like for sighted users on browsers. HTML semantics -- the meanings of tags -- exists for a reason. To create logical structure for everyone -- visual, aural, braille, even search.

You have a section, with a heading, broken up into subsections/articles that also have headings describing the related content. That makes what the markup should be pretty clear... even if applying style to that is not.

I suppose it could be a heading, albeit a short one. I'm not really sure what those years represent semantically --maybe we are misled by seeing the OP's card mockup to think they must be marked up semantically as separate elements at all? Thinking of it I might as well use something like:


Not quite the same thing, but now I got curious about what W3C itself uses for its numbered nav menus, like this one: https://www.w3.org/TR/css-flexbox-1/#contents but it's just SPAN elements:


(The OL's own numbering seems hidden with CSS).

I also found this page from 1995: https://www.w3.org/History.html that uses headings for years, but DLs for months:





I agree when it comes to production pages, but since the OP asked about CSS layouts in this thread, I see the HTML here mostly as scaffolding for the CSS. That said it seems precarious to study CSS without a good understanding of HTML semantics.

Thinking more about the OP's sample text, I think it lacks enough context to know its HTML semantics. For example, if it's part of a Company History page one might use just H2 and P (perhaps with a DIV for the CSS layout). But if it's just random text snippets inserted say on other pages, maybe the ASIDE element would be appropriate?

Now I finally looked up the meaning of a CSS Card, and it appears to require a grid-like layout: https://developer.mozilla.org/en-US/docs/We...t_cookbook/Card in which case there might be a problem with overflowing content. But perhaps Grid or Flex can adapt all the cards to the one with the most content automatically?

Agreed. It's why I dislike the definition list... "1969" isn't a term, nor are we defining it.

Isn't it just wonderful to see how much interest
JUI43555, the original poster, is taking in their
little project.

We haven't seen hide or hair of them arouind
these parts for at least a week.

coothead

Wonder why?

Some people have lives outside web development forums.

QUOTE(Jason Knight @ Jun 4 2023, 03:43 PM)

Some people have lives outside web development forums.

That may well be true.

On the other hand, some people are just too pig ignorant to respond at all.

coothead

Don’t take my lack of input as a sign of not being interested I find this all fascinating but very much out of my skill level. I’m just leaving the post here and seeing where it goes. Already learnt a lot from this thread.

Thanks for this appreciate it

Just ask again if you need clarification or elaboration about something.