If there's any content in the first column, when the viewport is
smaller than the max-width, that content is butted right up against
the left edge. This not only doesn't look great, it hampers
readability for text.
One solution would be to have a "sub-container" div with
class="span-23 prepend-1", and from then on just work within 23
columns, but this seems like overkill to me. Page code follows, also
relevant to the issue regarding fancy-type's indenting with em's.
I assume that assigning padding to the container div itself, or even a
margin may cause layout issues? I don't want to have to do my own
cross-browser testing if I can avoid it.
Is there a known-good way to handle this issue that won't? Worst case
I could create a "meta-container" div just for this, but I was hoping
for something a bit more elegant. . .
Thanks.
=================================================
<code>
<!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>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>
Testing Blueprint CSS
</title>
<link rel="stylesheet" href="styles/blueprint/screen.css"
type="text/css" media=
"screen, projection" />
<link rel="stylesheet" href="styles/blueprint/print.css"
type="text/css" media=
"print" /><!--[if lt IE 8]>
<link rel="stylesheet" href="styles/blueprint/ie.css" type="text/
css" media="screen, projection" />
<![endif]-->
<!-- Fancy-type plugin -->
<link rel="stylesheet" href="/styles/blueprint/plugins/fancy-type/
screen.css" type=
"text/css" media="screen, projection" />
</head>
<body>
<div class="container">
<div class="span-23 prepend-top prepend-1">
<div class="span-23">
<h1>
Testing Blueprint CSS
</h1>
</div>
<hr/>
<div class="span-5">
Left sidebar
</div>
<div class="span-13 border">
Main content
<hr class="space" />
<h2>
Fancy-Type Classes
</h2>
<h3>
Subsequent Paragraph Indenting
</h3>
<div class="span-14">
<hr class="space" />
<h4 class="alt">
Regular font
</h4>
<p>| This is a paragraph with regular text.
</p>
<p>| Second paragraph - also regular
</p>
<p>| Third regular
</p>
<p>| Etc.
</p>
<hr class="space" />
<h4 class="alt">
Fonts Classed Small/Large
</h4>
<p>| This is a paragraph with regular text.
</p>
<p>| Second paragraph - also regular.
</p>
<p class="small">| Third, set with Blueprint’s <code>small</
code> class.
</p>
<p>| Fourth regular.
</p>
<p class="large">| Fifth paragraph set with Blueprint’s
<code>large</code> class.
</p>
<p>| Sixth regular.
</p>
</div>
</div>
<div class="span-5 last">
Right sidebar
</div>
<div class="span-23">
<hr class="space" />
<hr/>
Footer
<hr class="space" />
</div>
</div>
</div>
</body>
</html>
</code>
--
You received this message because you are subscribed to the Google Groups
"Blueprint CSS" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/blueprintcss?hl=en.
