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
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
