Help with text layout & CSS Options

[JUI43555]

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.

CODE

<div class="about-us-card-1">
                <h2>Lorem Ipsum</h2>
                <p>
                    <span>1969</span>
                    Company opens first store in March, operating through a small leased shopfront 10 metres by 10 metres, selling floor coverings. George and Jean serve customers in the shop and one other
                    person assists them in the shop. Warren Preuss is employed to set up links with the major suppliers and manage ordering of stock. Two carpet layers are employed to cut and install. A
                    warehouse in an industrial area has also been leased to store the products.
                </p>
                <p>
                    <span>1969</span>
                    Attempts to decentralise much of the data processing seem to be successful. Headquarters at the capital city store still manages purchasing, warehousing and marketing. The two capital city
                    stores amalgamate into one new superstore in the Central Business District. A gala opening occurs.
                </p>
            </div>

[coothead]

Hi there JUI43555,

checkout the attachment to find one possible solution.


 JUI43555.zip ( 23.56k ) Number of downloads: 77

coothead

[Christian J]

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

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:

CODE

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

dt {
position: absolute;
top: auto;
left: 2em;
}

dd {margin-left: 3em;}

HTML:

CODE

<div class="about-us-card-1">
<h2>Lorem Ipsum</h2>
<dl>
    <dt>1969</dt>
    <dd>Company opens first store in March, operating through a small leased shopfront 10 metres by 10 metres, selling floor coverings. George and Jean serve customers in the shop and one other    person assists them in the shop. Warren Preuss is employed to set up links with the major suppliers and manage ordering of stock. Two carpet layers are employed to cut and install. A    warehouse in an industrial area has also been leased to store the products.</dd>
</dl>
<dl>
    <dt>1969</dt>
    <dd>Attempts to decentralise much of the data processing seem to be successful. Headquarters at the capital city store still manages purchasing, warehousing and marketing. The two capital city    stores amalgamate into one new superstore in the Central Business District. A gala opening occurs.</dd>
</dl>
</div>

[coothead]

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

[Christian J]

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?

[Christian J]

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:

CODE

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

dt, dd {display: table-cell;}

dd {padding-left: 1em;}

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)

CODE

<div class="about-us-card-1">
<h2>Lorem Ipsum</h2>
<dl>
    <dt>1969</dt>
    <dd>Company opens first store in March, operating through a small leased shopfront 10 metres by 10 metres, selling floor coverings. George and Jean serve customers in the shop and one other    person assists them in the shop. Warren Preuss is employed to set up links with the major suppliers and manage ordering of stock. Two carpet layers are employed to cut and install. A    warehouse in an industrial area has also been leased to store the products.</dd>
</dl>
<dl>
    <dt>1969</dt>
    <dd>Attempts to decentralise much of the data processing seem to be successful. Headquarters at the capital city store still manages purchasing, warehousing and marketing. The two capital city    stores amalgamate into one new superstore in the Central Business District. A gala opening occurs.</dd>
</dl>
</div>

This post has been edited by Christian J: May 27 2023, 02:25 PM

[Christian J]

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

CODE

div, dt, dd {
vertical-align: top;
display: inline-block;
}

div {
max-width: 30em;
padding: 1em;
}

dt {width: 3em;}

dd {
margin: 0;
max-width: 26em;
}

HTML (same as before)

CODE

<div class="about-us-card-1">
<h2>Lorem Ipsum</h2>
<dl>
    <dt>1969</dt>
    <dd>Company opens first store in March, operating through a small leased shopfront 10 metres by 10 metres, selling floor coverings. George and Jean serve customers in the shop and one other    person assists them in the shop. Warren Preuss is employed to set up links with the major suppliers and manage ordering of stock. Two carpet layers are employed to cut and install. A    warehouse in an industrial area has also been leased to store the products.</dd>
</dl>
<dl>
    <dt>1969</dt>
    <dd>Attempts to decentralise much of the data processing seem to be successful. Headquarters at the capital city store still manages purchasing, warehousing and marketing. The two capital city stores amalgamate into one new superstore in the Central Business District. A gala opening occurs.</dd>
</dl>
</div>

[Christian J]

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.

[pandy]

It can be much simpler. What about this?

Everything in the same DL.

CODE

.about-us-card-1 dt    { float: left }
.about-us-card-1 dd    { margin: 0 0 2em 4em }

[Christian J]

It can be much simpler. What about this?

Everything in the same DL.

CODE

.about-us-card-1 dt    { float: left }
.about-us-card-1 dd    { margin: 0 0 2em 4em }

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).

[pandy]

I assumed there would only be years.

[Christian J]

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.

[pandy]

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

[Christian J]

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.

[pandy]

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

[Jason Knight]

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.

CODE

<section class="actionCard">
    <h2>Lorem Ipsum</h2>
    <article>
        <h3>1969</h3>
        <p>
            Company opens first store in March, operating through a small leased shopfront 10 metres by 10 metres, selling floor coverings. George and Jean serve customers in the shop and one other person assists them in the shop. Warren Preuss is employed to set up links with the major suppliers and manage ordering of stock. Two carpet layers are employed to cut and install. A warehouse in an industrial area has also been leased to store the products.
        </p>
    </article><article>
        <h3>1969</h3<>
        <p>
            Attempts to decentralise much of the data processing seem to be successful. Headquarters at the capital city store still manages purchasing, warehousing and marketing. The two capital city stores amalgamate into one new superstore in the Central Business District. A gala opening occurs.
        </p>
    </article>
<!-- .actionCard --></section>

The code for formatting the section going something like this:

CODE

.actionCard article {
    display:flex;
    gap:1rem;
}

.actionCard h3 {
    flex-grow:0;
}

.actionCard p {
    flex-grow:1;
}

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.

[Christian J]

BUT, that span is obviously a heading for an ARTICLE

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:

CODE

<p>1969 - Company opens first store in March</p>

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:

CODE

<ol class="toc">
      <li><a href="#overview"><span class="secno">1.1</span> <span class="content"> Overview</span></a>
      </li><li><a href="#placement"><span class="secno">1.2</span> <span class="content"> Module interactions</span></a>
     </li></ol>

(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:

CODE

    <h2>1989</h2>
    <dl>
      <dt>March</dt>
      <dd><a href="History/1989/proposal.html">"Information Management: A
          Proposal"</a> written by <a href="People.html#BernersLee">Tim BL</a>
        and circulated for comments at <a href="http://www.cern.ch/">CERN</a>
        (TBL). Paper "HyperText and CERN" produced as background (<a href="/Administration/HTandCERN.txt">text</a>
        or <a href="/Administration/HTandCERN.wn">WriteNow</a> format).</dd>
    </dl>

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.

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.

[Christian J]

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?

[Jason Knight]

Thinking more about the OP's sample text, I think it lacks enough context to know its HTML semantics.

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

[coothead]

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