Blocks - some questions
The site design I am manipulating has a set of nested divs for the main content. This is particularly vital because it controls the background colour. It goes something like this:
<Div 1: Overall Width> <Div 2: Header Picture (transparent)> </div 2> <Div 3: Main content area, background colour> <Div 4: Main Content> </Div 4> </ Div 3> <Div 5: Footer image (transparent)> </Div 5> </Div 1>
(dunno why the code snippet stuck the php bits in there.)
So just making the main body area a colour and calling it good won't work. But, when I've made separate components and put them into the main area I end up with a big gap between them. This looks... bad.
I can get around this by just doing the code for it as a "content" block and plunking in a bunch of html, but that seems counter-intuitive to using a CMS, no? It prevents me from using any of the neat blocks available, in particular image galleries.
I've tried messing with margins to get the separate block pieces to stack directly on top of each other with no padding/margins but I feel like I'm not finding the right place. I'm modifying the plain youghurt theme, for what it's worth. (If something else would be better suited for that please let me know)
Or, would it be ultimately easier to do something else to make it look the way I want it to? My initial thought was nesting the block components but after some research here that appears to be a no-go idea.
Thanks for any suggestions.
However, if the background color is set by the parent DIV, shouldn't it look alright even if there is a small gap between blocks?
I'll see if I can find the block codes. I was looking for them and was a little lost.
Depending on your design, you can try and apply the background directly to the blocks. Another idea, depending upon your design, would be to introduce additional block areas. That way, rather than having one large content section, you can have a header, with its own style, with header blocks, a content area with its own blocks, and a footer area with its own blocks.
I'm sorry if any of these suggestions don't exactly line up with your design. It's harder to visualize what you're doing than when you have the graphics right in front of you
This is the design I'm converting.
So the big pic with the rounded corners, is one item. (And has the transparent corners) - the text with the white bg is another - and then there's a footer image (again with the rounded corners)
When I just made separate blocks with them I ended up with blue gaps between them.
I edited the default.php file for my template and did this:
<div id="inside-left"> <?php $a = new Area('Left-Top'); $a->display($c); ?> <div id="inside-main"> <?php $a = new Area('Left-Middle'); $a->display($c); ?> </div> <div id="inside-foot"></div> </div>
Since the bottom image is something that never changes, I decided it'd be silly to make it a block and put the image in. I just made it static. (it's part of the css call for inside-foot)
And then I put the wrapper around the whole thing like I have done on my existing site. It appears to work perfectly, and as far as I can tell, when I add more blocks into the Left-Middle section they all retain the background.