Combining blockquote and unordered lists

[paul8agrape]

I am currently putting a site together that has a lot of blockquotes and unordered lists. Right now, the CSS code for the blockquotes is:


blockquote {
color: #000055;
font-weight:bold;
}

My unordered lists code is:


ul.disc {list-style-type: disc;
}

Essentially, I want the unordered list to have the same attributes as blockquotes...so the actual text with the unordered lists would be bold with the same dark blue color of blockquotes. What would be the easiest way to make this happen?

Thanks for any help.

[mwinter]

I am currently putting a site together that has a lot of blockquotes and unordered lists.

Really? You aren't misusing the blockquote element for indentation, are you?



blockquote {
color: #000055;

Do be sure to specify an explicit background colour. Don't rely on defaults as your users may not have the same preferences as you.



ul.disc {

The word, disc, isn't a particularly good class name. Class names should be semantic: they should reflect meaning. What if you want to change the style next month, for instance?



Essentially, I want the unordered list to have the same attributes as blockquotes...so the actual text with the unordered lists would be bold with the same dark blue color of blockquotes. What would be the easiest way to make this happen?

If the lists will be children of the blockquote elements, then they can explicitly inherit the values:



blockquote ul {
color: inherit;
font-weight: inherit;
}

If not, then make a new rule that both sets of elements can use, combining the selectors:



blockquote, ul.disc {
color: #000055;
font-weight: bold;
}


Mike

[paul8agrape]

Really? You aren't misusing the blockquote element for indentation, are you?



Maybe I am...I'm just using the blockquote button in Dreamweaver to specify blocks of text as blockquotes, but it seems to work the same as indentations.

[mwinter]

I'm just using the blockquote button in Dreamweaver to specify blocks of text as blockquotes,

The 'quote' part of the element name is significant: one uses the blockquote element to mark-up a chunk of quoted text of the kind that's too long to write in-line with quotation marks. If you want to indent text, or indeed any element, use margins.



but it seems to work the same as indentations.

Except it's not. A cursory Google search (http://www.google.co.uk/search?q=blockquote+indent) for the words blockquote and indent will return a host of resources that tell you not to use it that way.

Mike

[paul8agrape]

I guess I'm just not getting something. Pardon me for being dense, but I'm a bit new to all of this. :)

So are you saying I probably shouldn't use blockquote? I understand what you and some of these articles are saying about blockquote being used incorrectly to indent text.

I tried using the below suggested CSS code but my ul was just standard...no dark blue color, etc.


blockquote, ul.disc {
color: #000055;
font-weight: bold;
}

So what would be the suggested way for handling quotes and unordered lists in the following examples (test website) if I want them to share the same style as far as bold text and dark blue?

Unordered list - http://rain.edchinn.com/Published/NeedEnemies.shtml
Quote paragraph - http://rain.edchinn.com/Published/WarriorsRain.shtml

[mwinter]

So are you saying I probably shouldn't use blockquote?

Not just to indent text, no. The way you use it in "Warriors in the Rain" is fine: you're quoting text, too much to quote as part of the paragraph. The way you use it in "The Need For Enemies" though is incorrect, and it should be replaced with a list:



<ul>
<li>I will be respectful of others, regardless of their perspective or group identification.</li>
<li>I will be suspicious of any "permission" to break the rules in order to get to some perceived enemy.</li>
<li>I will give all technologies, ideas and groups a fair and impartial hearing.</li>
<li>I will assume human complexity. (No one is all good or bad.)</li>
<li>I will stop listening to sources of fear and conspiracy.</li>
<li>I will stop ascribing superhuman features and capacities to people, ideas and systems.</li>
</ul>




I tried using the below suggested CSS code but my ul was just standard...no dark blue color, etc.


blockquote, ul.disc {
color: #000055;
font-weight: bold;
}

Did you add the "disc" class name to it? That is, the start-tag should have looked like:



<ul class="disc">




So what would be the suggested way for handling quotes and unordered lists in the following examples (test website) if I want them to share the same style as far as bold text and dark blue?

Well, assuming that you used the markup I posted at the beginning of this post, you could use the same style rule I quoted above albeit without the class:



blockquote, ul {
color: #000055;
font-weight: bold;
}

Does that help?
Mike