Grouping DT's and DD's

In a member’s profile, I have a tab which shows the member’s latest comments.

For each comment, I have a block of related info like this…


<dl id='myComments'>
	<dt>Article:</dt>
	<dd>"5 Tax Shelters You Need To Know"</dd>
	<dt>Date:</dt>
	<dd>May 8, 2014 @ 10:21pm</dd>
	<dt>Comment:</dt>
	<dd>"This article really taught me some interesteing new places
			to look for savings when doing my taxes!!  I can't wait
			to see the big refund I get this year!!"</dd>
</dl>

Here is how one comment would be displayed…

What I would like to do is make these fields appear as one logical unit, visually.

This might be achieved by simply adding a border at the top of each comment block, or maybe something fancier like doing alternating background shading color between each comment in the listing.

What is the proper way to group the above data in terms of HTML?

And what is the best way to achieve the end effect I want using HTML and CSS?

Sincerely,

Debbie

Have you tried styling the <dl> tag

Yes, the most backwards compatible solution is something like a border on the <dl> elements. For modern browsers, you could do something like this with CSS:

dl:nth-child(odd) {background: #e7e7e7;}

A PHP option would be to stick a class on every second dl for styling purposes. Of course, the stripe effect can also be done with JS.

An id of “comments” on the dl isn’t going to work if you have multiple dls, so perhaps we are missing the point here.

Maybe “I” am missing the point…

Image the code in my OP - or the screenshot - occurring maybe 12 times for a user.

Guess I haven’t thought things out very well yet, but I guess it didn’t occur to me that I needed multiple <dl>'s…

So do I need something like this…


<dl class='myComments'>
	<dt>Article:</dt>
	<dd>"5 Tax Shelters You Need To Know"</dd>
	<dt>Date:</dt>
	<dd>May 8, 2014 @ 10:21pm</dd>
	<dt>Comment:</dt>
	<dd>"This article really taught me some interesteing new places 
			to look for savings when doing my taxes!!  I can't wait 
			to see the big refund I get this year!!"</dd>
</dl>

<dl class='myComments greenBar'>
	<dt>Article:</dt>
	<dd>"Save Your Money for a CPA"</dd>
	<dt>Date:</dt>
	<dd>May 87, 2014 @ 08:07am</dd>
	<dt>Comment:</dt>
	<dd>"I hired a CPA and boy did she help me out!!</dd>
</dl>

<dl class='myComments'>
	<dt>Article:</dt>
	<dd>"Yellen Promises to keep Rates Low"</dd>
	<dt>Date:</dt>
	<dd>May 8, 2014 @ 5:49pm</dd>
	<dt>Comment:</dt>
	<dd>"It's nice to finally see a female running the Fed!!</dd>
</dl>

Sincerely,

Debbie

That would do it, yes. As I said, if you wish you can do without the greenbar class and do this instead:

dl:nth-child(even) {background:green;}

If you stick with a class, perhaps don’t name it by a color, in case you decide on a different color later.

Okay, I’ll experiment with that sample code. (I just wasn’t sure where to begin.)

How well supported is that?

And if an older browser didn’t support it, then what would happen?

Good point!

Thanks,

Debbie

Not sure about (odd) itself, but seems it’s just IE8 and under that would be a problem.

And if an older browser didn’t support it, then what would happen?

Nothing. No background color. The few people that would happen to is negligible. And it’s just punishment for perpetuating the life of IE8.

nth-child is supported by all of the popular browsers except for IE8. There are a number of workarounds available to emulate it for IE8.

How do you really feel, Ralph? :lol:

(I guess I’m behind the times… Is IE8 old or something? Or was it an evil version? You sound like you are talking about IE6…)

Debbie

Is there another valid way I could do the markup for my example in Post #4?

As I play with DL/DT/DD again, I am remembering what a PITA they are as far as layout/styling!! :mad:

Here is what I have so far… (Look, Ralph, an actual working sample!!) :wink:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<style>
		body {
				color: #000000;
				font-family: Helvetica,Arial,Sans-Serif;
				font-size: 0.9em;
				font-weight: normal;
				line-height: 1.4em;
		}
		
		#parent{
			width: 50%;
			margin: 100px auto;
		}
		
		/* MY-COMMENTS */
		#boxUserDetails dl.myComments{
			margin: 30px 40px -10px 40px;
			padding: 5px 0 0 0;
			border-top: 1px solid #AAA;
		}

		#boxUserDetails dl.myComments dt,
		#boxUserDetails dl.myComments dd{
			display: inline-block;
			width: 58%;						/* Can't use 50% because of the whitespace gap between inline blocks and this is the easier fix. */
		/*	width: 68%;						/* Can't use 50% because of the whitespace gap between inline blocks and this is the easier fix. */
			*display: inline;			/* IE6 & 7 inline-block fix - invalid css. */
			zoom: 1.0;						/* IE6 & 7 fix - invalid css. */
			vertical-align: top;
			text-align: left;
		}

		#boxUserDetails dl.myComments dt{
			display: inline-block;
			width: 20%;					/**/
			font-weight: bold;
			text-align: left;
			margin: 0 5px 0 0;
		}
	</style>
</head>

<body>
	<div id="parent">
		<div id="boxUserDetails">
			<dl class='myComments'>
				<dt>Article:</dt>
				<dd><b>"5 Tax Shelters You Need To Know"</b></dd>
				<dt>Date:</dt>
				<dd>May 8, 2014</dd>
				<dt>Comment:</dt>
				<dd>"This article really taught me some interesting new places
							to look for savings when doing my taxes!!  I can't wait
							to see the big refund I get this year!!"</dd>
			</dl>
			<dl class='myComments'>
				<dt>Article:</dt>
				<dd><b>"Which States Support Main Street?"</b></dd>
				<dt>Date:</dt>
				<dd>May 7, 2014</dd>
				<dt>Comment:</dt>
				<dd>"Time to move to a state which appreciates entrepreneurs!!"</dd>
			</dl>
		</div>
	</div>
</body>
</html>

Some of the problems I am having include:

1.) Can’t get the labels close to the text

2.) Adding <b> to the Article Title has bolded all <dt>'s

3.) Not sure how well supported this code is across browsers (I’m in FireFox on my Mac.)

4.) The styled <dl> is too wide and not matching the text below it.

I don’t think that I’m going about this the right way… :-/

Sincerely,

Debbie

P.S. The code above is modified code that Paul O’ helped me out with on a similar section of my website. For that other section, it works, but it just seems very temperamental and the slightest thing throws it off!!

IE8 is the new IE6.

@ralph ;

Any thoughts on how to fix or improve my code in Post #10?

Sincerely,

Debbie

Seems OK to me.

Try

dd {margin-left: 0;}

2.) Adding <b> to the Article Title has bolded all <dt>'s

You’ve styled the <dt>s bold, so it will apply to all of them. Just apply a class to one if you only want it to apply to one.

3.) Not sure how well supported this code is across browsers  (I'm in FireFox on my Mac.)

Download some other browsers. :stuck_out_tongue:

Should be OK on others, though. Fine in Chrome.

4.) The styled <dl> is too wide and not matching the text below it.

Set a width that suits.

No, I styled the Article Title bold…


		<dd><b>"5 Tax Shelters You Need To Know"</b></dd>

Gonna buy me Windows and VMware? :wink:

[b]Try changing this to 48%…


		#boxUserDetails dl.myComments dt,
		#boxUserDetails dl.myComments dd{
			display: inline-block;
			width: 58%;						/* Can't use 50% because of the whitespace gap between inline blocks and this is the easier fix. */

It blows up!!![/b]

(Or try changing the DT to just one less as 19% and watch it break things as well…)

As I recall, even Paul O’ said that the width’s on DT’s and DD’s were loopy…

Your margin idea above helped some, but I still have a big gap, plus I don’t understand how the widths work… :-/

Maybe there is a way to do this, though?

Sincerely,

Debbie

Try adding background colours to the dl, dt’s and dd’s.

I’m using FireBug, thank you very much!

And this is one block of code I can’t figure out for the life of me how things are working.

For example, this had a left margin on it that I could see in FireBug, but couldn’t find which element had the margin on it?!


		#boxUserDetails dl.myComments dd{

When Paul O’ helped me with my Member Bio page a few months ago, I didn’t really understand what he did, but at least it worked.

And now that I am trying to modify that same code, I have no clue what is going on with the widths and margins on my DD and DT’s.

And as I mentioned above, if you make the changes I mention, things flip out, and looking at the code in FireBug, I don’t understand the cause-and-effect… :frowning:

Sincerely,

Debbie

You also did this:

#boxUserDetails dl.myComments dt {
display: inline-block;
width: 20%;
[COLOR="#FF0000"]font-weight: bold;[/COLOR]
text-align: left;
margin: 0;
}

Gonna buy me Windows and VMware? :wink:

Chrome, Safari and Opera are free, you know? You could start with those. :stuck_out_tongue:

Here are some minor tweaks to your page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<style>
		body {
				color: #000000;
				font-family: Helvetica,Arial,Sans-Serif;
				font-size: 0.9em;
				font-weight: normal;
				line-height: 1.4em;
		}
		
		#parent{
			width: 50%;
			margin: 100px auto;
		}
		
		/* MY-COMMENTS */
		#boxUserDetails dl.myComments{
			margin: 10px 0 0 0;
			padding: 5px 0 0 0;
			border-top: 1px solid #AAA;
			min-width: 400px;
		}

		dd {margin: 0;}

		#boxUserDetails dl.myComments dt,
		#boxUserDetails dl.myComments dd{
			display: inline-block;
			width: 75%;						/* Can't use 50% because of the whitespace gap between inline blocks and this is the easier fix. */
		/*	width: 68%;						/* Can't use 50% because of the whitespace gap between inline blocks and this is the easier fix. */
			*display: inline;			/* IE6 & 7 inline-block fix - invalid css. */
			zoom: 1.0;						/* IE6 & 7 fix - invalid css. */
			vertical-align: top;
			text-align: left;
		}

		#boxUserDetails dl.myComments dt{
			display: inline-block;
			width: 20%;					/**/
			font-weight: bold;
			text-align: left;
			margin: 0;
		}
	</style>
</head>

<body>
	<div id="parent">
		<div id="boxUserDetails">
			<dl class='myComments'>
				<dt>Article:</dt>
				<dd><b>"5 Tax Shelters You Need To Know"</b></dd>
				<dt>Date:</dt>
				<dd>May 8, 2014</dd>
				<dt>Comment:</dt>
				<dd>"This article really taught me some interesting new places 
							to look for savings when doing my taxes!!  I can't wait 
							to see the big refund I get this year!!"</dd>
			</dl>
			<dl class='myComments'>
				<dt>Article:</dt>
				<dd><b>"Which States Support Main Street?"</b></dd>
				<dt>Date:</dt>
				<dd>May 7, 2014</dd>
				<dt>Comment:</dt>
				<dd>"Time to move to a state which appreciates entrepreneurs!!"</dd>
			</dl>
		</div>
	</div>
</body>
</html>

See http://modern.ie/en-us/virtualization-tools#downloads where you can get copies of Internet Explorer images 6 through 11 that can run on VirtualBox, vmWare or parallels.

Link to download a free copy of VirtualBox - https://www.virtualbox.org/wiki/Downloads

So no need to buy anything unless you want to.

Okay, you got me!

I do have Safari, Chrome, and Opera for Mac in addition to FireFox.

I jut worry about Windows, and that my eyes may be deceiving me!

When I run your code, I don’t see any visual differences.

Not sure what your changes did to improve things?

It would help me if I understood how the widths are working.

Conventional wisdom would say that if the DT column width plus the DD column width equaled 100%, then you’d be okay?! :-/

I also don’t understand in my code why the first DT column is at 20% and there is tons of space to the right of the text, and yet if I back the width down to 19% it breaks?! (Visually it looks like 10% width would do…)

Follow me?

Debbie

Why use a FireBug sledgehammer when all you want to see is the margins?


...
...
/* DEBUG */
	body {background-color:#ddd;}
	dl   {background-color: lightblue;}
	dt   {background-color: lightgreen;}
	dd   {background-color: orange;}
</style>