Given the following photoshop mockup example:
http://www.advantex.net/images/help/blueprint-css-border-and-padding-problem.jpg
As you can see, the span-14 column has a 1px colored border, and the
content within that column has some padding applied. I have tried
everything I know to do, to get this client's mockup to work in
blueprint. The closest thing I have is similar to the following
markup:
<!--- column --->
<div id="RinColumn21" class="column span-14">
<!--- column border div --->
<div class="column border span-14 last">
<div class="pageHeader span-13
padHalf last">
<div class="span-9">
<h1>Retail
Industry News</h1>
<p>
The
most relevant headline news, selected
<br>
by
RetailWire editors.
</p>
</div>
<div class="span-4 last
debug">
<p>links
here</p>
</div>
</div>
<div class="span-13 padHalf
last">
<p>content here.</p>
</div>
</div>
</div>
<!--- end column21 --->
the column "border" class uses this CSS:
.border {
border: 1px solid #949564;
}
and the padHalf class uses this CSS:
/* to use this, make your content one grid column smaller.
This will pad the content one-half column on top and left (and right,
by way of the span you assign) */
.padHalf {
margin: 20px 0 0 20px
}
This is hacky, and worse, it the next column on the page, to the right
of this one that is span-14, still gets wrapped to the next line in IE
6 and lower.
We need this CSS framework to support the addition of padding and
borders to columns somehow, without getting really hacky... and every
solution I've seen elsewhere when searching this group doesn't seem to
fit my need here.
I've killed an entire day on this, and I still don't have what I
need. Please help!
Thanks much!
--
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.
