Printable Version of Topic
Click here to view this topic in its original format
HTMLHelp Forums _ Cascading Style Sheets _ Help with text layout & CSS
Posted by: JUI43555 May 26 2023, 08:33 AM
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. 
<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>
Posted by: coothead May 26 2023, 10:45 AM
Hi there JUI43555,
checkout the attachment to find one possible solution.JUI43555.zip ( 23.56k ) Number of downloads: 77
coothead
Posted by: Christian J May 26 2023, 04:28 PM
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 https://html.spec.whatwg.org/multipage/grouping-content.html#the-dl-element would be more semantically appropriate for value pairs like these?
CSS:
position: relative;
padding: 2em;
width: 30em;
}
dt {
position: absolute;
top: auto;
left: 2em;
}
dd {margin-left: 3em;}
HTML:
<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>
Posted by: coothead May 26 2023, 04:44 PM
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
Posted by: Christian J May 26 2023, 05:01 PM
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?
Posted by: Christian J May 27 2023, 09:03 AM
Here's one using CSS tables, it's even shorter and should adapt to varying amounts of content better.
CSS
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:
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)
<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>
Posted by: Christian J May 29 2023, 08:50 AM
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
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)
<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>
Posted by: Christian J May 29 2023, 09:15 AM
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.
Posted by: pandy May 29 2023, 07:56 PM
It can be much simpler. What about this?
Everything in the same DL.
.about-us-card-1 dd { margin: 0 0 2em 4em }
Posted by: Christian J May 30 2023, 09:51 AM
It can be much simpler. What about this?
Everything in the same DL.
.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).
Posted by: pandy May 30 2023, 11:15 AM
I assumed there would only be years.
Posted by: Christian J May 30 2023, 02:09 PM
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.
Posted by: pandy May 30 2023, 06:33 PM
If that happens it isn't that hard to give DT a width and adjust the left margin on DD accordingly.
Posted by: Christian J Jun 1 2023, 07:33 AM
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.
Posted by: pandy Jun 1 2023, 02:21 PM
Well, I haven't heard anything about clients... 
Posted by: Jason Knight Jun 2 2023, 03:35 AM
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.
<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:
.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.
Posted by: Christian J Jun 2 2023, 11:14 AM
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: 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:
<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:
<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>
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.
Posted by: Christian J Jun 3 2023, 11:40 AM
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/Web/CSS/Layout_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?
Posted by: Jason Knight Jun 3 2023, 11:30 PM
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.
Posted by: coothead Jun 4 2023, 04:25 AM
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
Posted by: pandy Jun 4 2023, 09:11 AM
Wonder why? 
Posted by: Jason Knight Jun 4 2023, 09:43 AM
We haven't seen hide or hair of them arouind these parts for at least a week
Some people have lives outside web development forums.
Posted by: coothead Jun 5 2023, 09:19 AM
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
Posted by: JUI43555 Jun 5 2023, 03:40 PM
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
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.
Posted by: JUI43555 Jun 5 2023, 03:42 PM
Hi there JUI43555,
checkout the attachment to find one possible solution.
coothead
Thanks for this appreciate it
Posted by: Christian J Jun 6 2023, 04:02 AM
I find this all fascinating but very much out of my skill level.
Just ask again if you need clarification or elaboration about something.
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)