Horizontally & Vertically expanding post backgrounds / boxes

jaxon · #1 Jan 31, 2010, 12:47 PM

Hi there folks! Thanks again for all the great work and excellent community!

So, I'm hoping to put together some nice 3D content boxes for all posts. My css and html skill is limited so thanks in advance... I found this nice tutorial on creating horizontally and vertically expandable content boxes here: http://www.webdesignerwall.com/tutor...xpandable-box/

This method creates divs for the top-left, top-right, bottom-left and bottom-right and puts the relevant bg image in each. With lots of overlap in image size. This actually seems like a pretty reasonable way to code nice 3Dboxes but I really don't know quite how to integrate it.

My only attempt involved pasting this into "html inserts"

Code:

<div class="post">
  <div class="topleft">
  <div class="topright">
    <div>
       CONTENT GOES HERE
    </div>
  </div>
  </div>

  <div class="bottomleft">
  <div class="bottomright">
  </div>
  </div>
</div>

and this in the "css inserts":

Code:

.box div.topleft {
	display: block;
	background: url("images/box-bg.png") top left no-repeat white;
	padding: 2.0em 0em 0em 2.0em;
}

.box div.topright {
	display: block;
	background: url("images/box-bg.png") top right no-repeat white;
	padding: 2.0em;
	margin: -2.0em 0 0 2.0em;
}

.box div.bottomleft {
	display: block;
	height: 45px;
	margin-top: -2.0em;
	background: url("images/box-bg.png") bottom left no-repeat white;
}

.box div.bottomright {
	display: block;
	background: url("images/box-bg.png") bottom right no-repeat white;
	height: 45px;
	margin-left: 3.0em;
}

but with the image url's corrects and .box replaced with .post.

This approach should aptly demonstrate exactly how limited my coding knowledge is. It seems like the html is far from correct because it really isn't formatted anything like the .post section of css.php and the "CONTENT GOES HERE" is pretty much a dead give a way that I'm missing a couple important steps....

I would be overjoyed if someone could help me out with this or offer another solution for creating content boxes for posts and/or widgets that are expandable (vertically at the very least) AND can use images for borders, rounded corners, shadows, etc.

Thank you so much!

If flynn or juggledad chime in, I would be glad to shoot a college student sized donation either of their ways as well...