Blocks - some questions

I am just getting my feet wet with Concrete5 and I think so far I have a pretty decent grasp of how to make this do what I want. However I have found, er... a block... in my progress with blocks.

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.)

follow me?

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.
lisbokt
View Replies:
elyon replied on at Reply
elyon
Many of the blocks use their own classes, so it may be possible to address each block directly through CSS to remove the margin and padding around each of them.

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?
lisbokt replied on at Reply
lisbokt
That's the thing - the background colour is only set by one parent block, and needs to fit snugly next to the top and bottom ones.

I'll see if I can find the block codes. I was looking for them and was a little lost.
Tony replied on at Reply
Tony
i may be misunderstanding what you're trying to do here, but you could try having either the header or the footer image be the background image of the body area, with "no-repeat bottom" or "no-repeat top", so that way the blocks can display overtop of it. this also seems like more of a css/html related question rather than something directly related to concrete, but you can pull off practically any design with c5 that you could do without.
lisbokt replied on at Reply
lisbokt
That's a good suggestion, but not applicable in this case. :) What I did not mention is the image is dynamic and changes on every page.
elyon replied on at Reply
elyon
I might try going to the page then viewing its source from the browser. If you are in edit mode there will be a DIV around every block which will not appear when viewing the page normally, but that way you can look for specific class names or ids that you can use in CSS.

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
lisbokt replied on at Reply
lisbokt
My initial idea was to implement a series of blocks.. it seemed like the best way to use the CMS.

http://www.thegeekgroup.org/pages/about-us.php...

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.
lisbokt replied on at Reply
lisbokt
I fixed this after pondering on some of the suggestions given, and realised I could make it much more straight forward.

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.
elyon replied on at Reply
elyon
Awesome! Those all sound like great ideas. While it's a good idea to stick with generic sections like a sidebar and main content, I definitely think there is a place for having a separate header, navigation or footer area depending upon the design.