Sorry, type-o margins: 0, auto; ==> margin: 0, auto; Also, if you are not seeing your background image, double check the path to the image. You may want to set it relative to the root of your site, as in change background-image: url(../images/bg-y.jpg) repeat-y; to background-image: url(/images/bg-y.jpg) repeat-y;
Finally, you may want to make your background image even wider. In blueprint, at default settings, content extends to completely fill the 950px container. Therefore in your background you would want the white area to be 970+px wide to have at least 10px of white space as an outside margin. From that edge, then add another 11px of drop shadow to make your full background 992+ wide to visually contain content that is 950 wide. An aside - noticing your choice of "container-em", suggesting your intention was to also be fluid by using ems for column width. Note that a full-width 972px graphic cannot stretch or be fluid. The alternative is to slice off and use left and right border divs with the shadowed edges that are separate and outside of the BP container (to the left and right of it) and make the container background a solid color fill instead of an image so it can resize with the font or be elastic. ----- Original Message ----- From: G. D. Speer To: [email protected] Sent: Wednesday, September 23, 2009 6:02 PM Subject: [BP #3424] Re: New problem This isn't really a blueprint issue. You might need to return to the basics and read up on classic layout techniques with CSS. If you don't know the fundamentals, you can't hope to understand what a framework like blueprint is doing and whether it's really saving you time and working as planned. That said. Here's a few pointers for the stage you are at. Either at the body level or the first div within the body, you need the full page to be painted with the background color. Unless you need a wrapper div, use the body tag. Just imagine you are making boxes inside of boxes starting with the full-size visible page. So, you have: CSS: body { background-color: #484637 background-image: url(../images/bg-gradient.jpg) repeat-x; } HTML: <body> </body> This gives you the solid dark color or color plus dark color gradient from a long skinny image file. Next, you want a 972 px wide box within that page which uses your image as it's background. Add to the CSS a class for the div that centers it, sets the width and adds the white background with edge shadows - there are several centering techniques (you can Google it). .wrapper { margins: 0, auto; width: 972px; background-image: url(../images/bg-y.jpg) repeat-y; } "auto" says take the width of the viewport, subtract the width of this box, and apply half that calculated amount as the margin to use on the left and right in order to center this box. Your HTML is now: <body> <div class="wrapper"> </div> </body> Above and below this you may want extra top and bottom divs to add top and bottom shadows or borders (or not! - You can just use a top and bottom margin in the CSS above. Change margin: 0, auto; to margin: 20px, auto; which means add 20 px of space above and below and 'auto' space on left and right of the box called 'wrapper'.) HTML example: <body> <div class="topborder"></div> <div class="wrapper"> </div> <div class="bottomborder"></div> </body> Now that your asthetics are done, you place in the middle of this the 950px wide blueprint outside container, which you will then subdivide into smaller compartments (rows and columns). So now you have ... CSS: body { background-color: #484637 background-image: url(../images/bg-gradient.jpg) repeat-x; } .wrapper { margins: 20px, auto; width: 972px; background-image: url(../images/bg-y.jpg) repeat-y; } .container { margins: 0, 11px; } This is in additional to all the styling for a container and it's contained divs that comes from blueprint. It's the number of pixels needed on each side of a 950 wide blueprint container to center it within a 972 wide wrapper. and the HTML is now: <body> <div class="wrapper"> <div class="container"> <div class="span....">col. 1 content</div> <div class="span....">col. 2 content</div> <div class="span.... last">final column content</div> </div> </div> </body> Now the blueprint tutorials can help you with what goes inside the container div. If you are truly emulating the Bay Nature design, instead of bg-y.jpg, I would remake that shadow image as a png with solid white in the center, but the drop shadow as shadow over transparent. This way, you can use a gradient fill on the body that changes colors and the shadow darkens whatever color it appears over so you don't have a color mismatch as the shadow extends down the page. If, instead, you are not using a gradient and are just putting in a single solid color fill on the body tag that matches the outer edges of the current bg-y.jpg file, then the file you have is just fine. Since your background image is a fixed width, your container needs to be fixed width (950px) instead of a variable width defined in ems or percentages. ----- Original Message ----- From: ~ To: [email protected] Sent: Wednesday, September 23, 2009 4:06 PM Subject: [BP #3423] New problem Hi everyone, I have a new problem. I am still learning. In the past, I made a few websites but I gave up because it's so complex to create. But now I won't give up this time! I would appreciate your help! : ) In Photoshop, I added a shade to the sides of the white background as you see the example in the Bay Nature website (http://www.baynature.com/). Actually, the white background that I created is 950 px width but, with the shade, it's 972 width. Open the attachment. See below. .container-em { background-image: url(../images/bg-y.jpg); background-repeat: repeat-y; background-attachment: scroll; background-position: center 0; width:950px; margin:0 auto; } HTML: <div class="container-em"> I thought it should work but it didn't. I tried width:972px for the container but, still, it won't work. I don't know what to do.t Thank you for help! Steven ---------------------------------------------------------------------------- No virus found in this incoming message. Checked by AVG - www.avg.com Version: 8.5.409 / Virus Database: 270.13.112/2390 - Release Date: 09/23/09 05:52:00 ------------------------------------------------------------------------------ No virus found in this incoming message. Checked by AVG - www.avg.com Version: 8.5.409 / Virus Database: 270.13.112/2390 - Release Date: 09/23/09 05:52:00 --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
