Content or Container?
10 views
Skip to first unread message
Murray
Aug 19, 2009, 10:35:07 PM8/19/09
to Object Oriented CSS
I have a question on how to deal with a decorative line between search
results. Is it content or part of a container?
Sometimes, for example, in a search result, it's nice to have an
underline beneath each result. The designer of my latest project wants
this line to be the width of the paragraph and no further. This
presents a problem with the way my container and content is styled.
Because there is padding my content elements, any border I add to its
containing box will be wider than the content elements.
I have tried adding the border to a .ft element which has padding,
then turning the padding off the content elements contained in there,
but it's a nasty load of css styles to reverse the behaviour for
something like that.
What I've ended up with might not be so nice either but it works...
<div class="result">
<div class="result-bd">
<p>result content</p>
</div>
</div>
<div class="separator"><hr class="hide" /></div>
<div class="result">
<div class="result-bd">
<p>result content</p>
</div>
</div>
I've treated .separator (which is a commonly asked for custom tag by
our content loaders) as a content object, giving it the same padding
treatment as a paragraph.
I've hidden the <hr /> as this causes a lot of grief with browser
inconsistencies.
Does anybody else have a suggestion for this?
results. Is it content or part of a container?
Sometimes, for example, in a search result, it's nice to have an
underline beneath each result. The designer of my latest project wants
this line to be the width of the paragraph and no further. This
presents a problem with the way my container and content is styled.
Because there is padding my content elements, any border I add to its
containing box will be wider than the content elements.
I have tried adding the border to a .ft element which has padding,
then turning the padding off the content elements contained in there,
but it's a nasty load of css styles to reverse the behaviour for
something like that.
What I've ended up with might not be so nice either but it works...
<div class="result">
<div class="result-bd">
<p>result content</p>
</div>
</div>
<div class="separator"><hr class="hide" /></div>
<div class="result">
<div class="result-bd">
<p>result content</p>
</div>
</div>
I've treated .separator (which is a commonly asked for custom tag by
our content loaders) as a content object, giving it the same padding
treatment as a paragraph.
I've hidden the <hr /> as this causes a lot of grief with browser
inconsistencies.
Does anybody else have a suggestion for this?
Frimmin
Aug 29, 2009, 2:11:45 PM8/29/09
to Object Oriented CSS
Looking on the Yahoo! Finance pages, I see they used a similar
approach, so I think you're on the right track. Just be sure to double-
check IE6; I've had experiences of IE6 fighting w div heights that
short.
approach, so I think you're on the right track. Just be sure to double-
check IE6; I've had experiences of IE6 fighting w div heights that
short.
Nicole Sullivan
Aug 30, 2009, 3:07:36 AM8/30/09
to object-or...@googlegroups.com
I probably would create a list object which inserts the dividers as borders on the LI. Then add a class firstItem/lastItem if they need to be treated differently.
Nicole
--
Nicole Sullivan
Object Oriented CSS http://wiki.github.com/stubbornella/oocss
Smush it http://smush.it
Website http://stubbornella.org
Book Even Faster Websites with O'Reilly
Nicole Sullivan
Aug 30, 2009, 3:08:54 AM8/30/09
to Nicole Sullivan, object-or...@googlegroups.com
As an added bonus, you get some nice accessibility karma for free when you use real lists for lists because screen reader users can skip the whole list or access and item in the list via keyboard shortcuts.
Murray Nuttall
Aug 30, 2009, 5:57:26 AM8/30/09
to object-or...@googlegroups.com
The trouble with using a list for this is that the search results are
rich in content, with images, paragraphs, icons, breadcrumbs and other
lists.
Not only will I need to add rules which counter the result-list border
styles so that other lists within the results appear correctly, but I
will also have to turn the left and right padding off of the content
elements within the result-list as well, otherwise the border is still
going to bleed.
I do agree that a list would be really nice to use in this case, but
the amount of rules and there specificity seem to work against the
simplicity of oocss...
Perhaps I'm missing something?
rich in content, with images, paragraphs, icons, breadcrumbs and other
lists.
Not only will I need to add rules which counter the result-list border
styles so that other lists within the results appear correctly, but I
will also have to turn the left and right padding off of the content
elements within the result-list as well, otherwise the border is still
going to bleed.
I do agree that a list would be really nice to use in this case, but
the amount of rules and there specificity seem to work against the
simplicity of oocss...
Perhaps I'm missing something?
Murray
Aug 31, 2009, 7:12:05 PM8/31/09
to Object Oriented CSS
How about a div with negative margins inside the list item?
<!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" xml:lang="en" lang="en">
<head>
<title>Untitled</title>
<style type="text/css">
* {margin: 0;padding: 0;}
p, ul, h2 {margin: 0 0 .818em;padding: 0 10px;}
ul {list-style: none;}
li {border-bottom: 1px dotted black;}
li .result {margin-left: -10px;margin-right: -10px;}
</style>
</head>
<body>
<ul>
<li>
<div class="result">
<h2>Heading for result</h2>
<p><strong>paragraph within div.result within list item</strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
tincidunt scelerisque leo. Nullam vel dui at felis hendrerit
malesuada. Phasellus mi ligula, tincidunt a, pharetra vitae, tempus
quis, orci. Donec blandit, felis nec lacinia blandit, augue orci
malesuada mauris, nec porta sem velit ut quam. Morbi metus urna,
facilisis sit amet, tempus sed, mollis nec, tellus. Ut tincidunt.
Nulla id odio. Aliquam lacinia bibendum justo.</p>
</div>
</li>
<li>
<div class="result">
<h2>Heading for result</h2>
<p><strong>paragraph within div.result within list item</strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
tincidunt scelerisque leo. Nullam vel dui at felis hendrerit
malesuada. Phasellus mi ligula, tincidunt a, pharetra vitae, tempus
quis, orci. Donec blandit, felis nec lacinia blandit, augue orci
malesuada mauris, nec porta sem velit ut quam. Morbi metus urna,
facilisis sit amet, tempus sed, mollis nec, tellus. Ut tincidunt.
Nulla id odio. Aliquam lacinia bibendum justo.</p>
</div>
</li>
</ul>
</body>
</html>
<!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" xml:lang="en" lang="en">
<head>
<title>Untitled</title>
<style type="text/css">
* {margin: 0;padding: 0;}
p, ul, h2 {margin: 0 0 .818em;padding: 0 10px;}
ul {list-style: none;}
li {border-bottom: 1px dotted black;}
li .result {margin-left: -10px;margin-right: -10px;}
</style>
</head>
<body>
<ul>
<li>
<div class="result">
<h2>Heading for result</h2>
<p><strong>paragraph within div.result within list item</strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
tincidunt scelerisque leo. Nullam vel dui at felis hendrerit
malesuada. Phasellus mi ligula, tincidunt a, pharetra vitae, tempus
quis, orci. Donec blandit, felis nec lacinia blandit, augue orci
malesuada mauris, nec porta sem velit ut quam. Morbi metus urna,
facilisis sit amet, tempus sed, mollis nec, tellus. Ut tincidunt.
Nulla id odio. Aliquam lacinia bibendum justo.</p>
</div>
</li>
<li>
<div class="result">
<h2>Heading for result</h2>
<p><strong>paragraph within div.result within list item</strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
tincidunt scelerisque leo. Nullam vel dui at felis hendrerit
malesuada. Phasellus mi ligula, tincidunt a, pharetra vitae, tempus
quis, orci. Donec blandit, felis nec lacinia blandit, augue orci
malesuada mauris, nec porta sem velit ut quam. Morbi metus urna,
facilisis sit amet, tempus sed, mollis nec, tellus. Ut tincidunt.
Nulla id odio. Aliquam lacinia bibendum justo.</p>
</div>
</li>
</ul>
</body>
</html>
Murray
Oct 8, 2009, 6:42:33 PM10/8/09
to Object Oriented CSS
Another content vs container issue.
I have an error message and a blockquote. Their layout is similar but
with different border colours and backgrounds. Semantically the
blockquote should be done using the <blockquote> tag and I am inclined
to treat the error message in a similar way with <div class="error">.
However, because the mod css already exists, it feels as though I
should be using the standard module format to create the error box...
and if I'm using it for the error box, should I be using it for the
blockquote?
<div class="error">
<h3>error message heading</h3>
<p>text</p>
</div>
vs.
<div class="error">
<div class="inner">
<div class="hd">
<h3>error message heading</h3>
</div>
<div class="bd">
<p>text</p>
</div>
</div>
</div>
I guess my question is: At what point does a container qualify to use
the standard module format? Is it on a case by case basis, or should
we always add the extra markup for future possibilities?
Stumped.
I have an error message and a blockquote. Their layout is similar but
with different border colours and backgrounds. Semantically the
blockquote should be done using the <blockquote> tag and I am inclined
to treat the error message in a similar way with <div class="error">.
However, because the mod css already exists, it feels as though I
should be using the standard module format to create the error box...
and if I'm using it for the error box, should I be using it for the
blockquote?
<div class="error">
<h3>error message heading</h3>
<p>text</p>
</div>
vs.
<div class="error">
<div class="inner">
<div class="hd">
<h3>error message heading</h3>
</div>
<div class="bd">
<p>text</p>
</div>
</div>
</div>
I guess my question is: At what point does a container qualify to use
the standard module format? Is it on a case by case basis, or should
we always add the extra markup for future possibilities?
Stumped.
Reply all
Reply to author
Forward
0 new messages