.... of course, I usually do this with Compass, not vanilla Blueprint. Compass eliminates the presentational class name issue and definitely helps the fight against DIVitus. You could do the same thing with compress.rb that comes with Blueprint, but IMO, it takes longer.
[/evangelism] On Sep 3, 2009, at 10:43 AM, Lorin Tackett wrote: > The copyright DIV doesn't really need any of the grid information at > all, since it's 24 columns wide with no margin - that's superfluous > styling since span-n only floats, sets width and sets margin-right. > You can replace the span-24 DIV with a container DIV. Here's what I > usually do: > > <div id="content" class="container"> > <div id="primary" class="span-12"> > <!-- Main content --> > <p>Lorem ipsum...</p> > </div> > <div id="secondary" class="span-8"> > <!-- Sidebar content --> > </div> > <div id="footer"> > <div class="container"> > <p>Copyright info</p> > </div> > </div> > > Apply the background-color to the #footer and it'll expand to the > browser width. Don't be too afraid of wrapper DIVs. With Blueprint, > you're already using presentational markup, so puritans will scoff > either way. But at least this way you keep it down to only one > excess DIV instead of two. =) > > On Sep 3, 2009, at 7:46 AM, Tim W wrote: > >> >> I have taken to wrapping the container div in another div. Not sure >> if >> this is best practice, but it works. >> >> <div style="background-color:#D8EAC0"> >> <div class="container"> >> <div class="span-24 last"> >> Content >> </div> >> </div> >> </div> >> >> >> On Sep 3, 9:16 am, molaro <[email protected]> wrote: >>> I am building my second site with blueprint. In this site the design >>> has the content laid out within the standard 950px wide confines of >>> the framework, on a white background. However, the copyright text >>> in >>> the footer has a colored band stretching the width of the browser >>> window at the bottom. The copyright text appears inside this colored >>> band. >>> >>> Because the heights of my pages changes my copyright text changes >>> its >>> vertical position, so how do I add the color band and have it stay >>> behind this text? A background tile stays fixed while my copyright >>> moves up and down from page to page. A BP div with a background >>> tile >>> or background color only spans the 950 width. >>> >>> Maybe I am just not thinking about this in the right frame of mind, >>> but I'm not sure how to make this happen. Anybody done this or have >>> an idea of how to do it? >>> >>> Here's some example code: >>> >>> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http:// >>> www.w3.org/ >>> TR/html4/strict.dtd"> >>> <html> >>> <head> >>> <title>My Company Site</title> >>> <style> >>> #copyright { >>> margin:30px 0px; >>> padding:0; >>> background-color:#D8EAC0; >>> } >>> >>> #copyright p { >>> margin:0; >>> padding:12px 30px; >>> color:#666; >>> font-size: 0.9em; >>> } >>> >>> #copyright a:link, #copyright a:visited { >>> text-decoration:underline; >>> color:#00A164; >>> } >>> >>> #copyright a:active, #copyright a:hover { >>> text-decoration:underline; >>> color:#006633; >>> } >>> </style> >>> </head> >>> <body> >>> <div class="container showgrid"> >>> <div id="copyright" class="span-24 last"> >>> <p> >>> ©2009 My Company Name, Inc. >>> All rights reserved. >>> • Use of this Web site >>> constitutes acceptance of the >>> <a href="#">Privacy Policy</a>. >>> <br/>An <a href="#">ABC</a> company. >>> </p> >>> </div> >>> >>> </div> >> >> >> > --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
