Help with text layout & CSS |
Help with text layout & CSS |
JUI43555 |
May 26 2023, 08:33 AM
Post
#1
|
Member Group: Members Posts: 44 Joined: 6-March 23 From: Perth Member No.: 28,833 |
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 |
May 26 2023, 10:45 AM
Post
#2
|
Advanced Member Group: Members Posts: 226 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
Hi there JUI43555,
coothead |
Christian J |
May 26 2023, 04:28 PM
Post
#3
|
. Group: WDG Moderators Posts: 9,722 Joined: 10-August 06 Member No.: 7 |
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 |
May 26 2023, 04:44 PM
Post
#4
|
Advanced Member Group: Members Posts: 226 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
Hi there Christian J,
coothead |
Christian J |
May 26 2023, 05:01 PM
Post
#5
|
. Group: WDG Moderators Posts: 9,722 Joined: 10-August 06 Member No.: 7 |
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 |
May 27 2023, 09:03 AM
Post
#6
|
. Group: WDG Moderators Posts: 9,722 Joined: 10-August 06 Member No.: 7 |
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 |
May 29 2023, 08:50 AM
Post
#7
|
. Group: WDG Moderators Posts: 9,722 Joined: 10-August 06 Member No.: 7 |
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 |
May 29 2023, 09:15 AM
Post
#8
|
. Group: WDG Moderators Posts: 9,722 Joined: 10-August 06 Member No.: 7 |
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 |
May 29 2023, 07:56 PM
Post
#9
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,753 Joined: 9-August 06 Member No.: 6 |
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 |
May 30 2023, 09:51 AM
Post
#10
|
. Group: WDG Moderators Posts: 9,722 Joined: 10-August 06 Member No.: 7 |
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 |
May 30 2023, 11:15 AM
Post
#11
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,753 Joined: 9-August 06 Member No.: 6 |
I assumed there would only be years.
|
Christian J |
May 30 2023, 02:09 PM
Post
#12
|
. Group: WDG Moderators Posts: 9,722 Joined: 10-August 06 Member No.: 7 |
|
pandy |
May 30 2023, 06:33 PM
Post
#13
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,753 Joined: 9-August 06 Member No.: 6 |
If that happens it isn't that hard to give DT a width and adjust the left margin on DD accordingly.
|
Christian J |
Jun 1 2023, 07:33 AM
Post
#14
|
. Group: WDG Moderators Posts: 9,722 Joined: 10-August 06 Member No.: 7 |
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 |
Jun 1 2023, 02:21 PM
Post
#15
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,753 Joined: 9-August 06 Member No.: 6 |
Well, I haven't heard anything about clients...
|
Jason Knight |
Jun 2 2023, 03:35 AM
Post
#16
|
Advanced Member Group: Members Posts: 109 Joined: 25-December 22 Member No.: 28,719 |
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 |
Jun 2 2023, 11:14 AM
Post
#17
|
. Group: WDG Moderators Posts: 9,722 Joined: 10-August 06 Member No.: 7 |
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> QUOTE 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 |
Jun 3 2023, 11:40 AM
Post
#18
|
. Group: WDG Moderators Posts: 9,722 Joined: 10-August 06 Member No.: 7 |
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 |
Jun 3 2023, 11:30 PM
Post
#19
|
Advanced Member Group: Members Posts: 109 Joined: 25-December 22 Member No.: 28,719 |
|
coothead |
Jun 4 2023, 04:25 AM
Post
#20
|
Advanced Member Group: Members Posts: 226 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
coothead |
Lo-Fi Version | Time is now: 25th September 2024 - 02:59 AM |