Adding a box... advanced help needed.

[Guest Late664]

Please visit the site I'm working on at http://www.erbainternational.com.

Now, I would like to add an addition box, with text content. I understand and have read the methods on creating boxes, but for some reason I can't seem to get it to work in my case. Here's what I'm trying to acheive...

There are currently 2 boxes to the right. Also, 2 boxes on the bottom. I would like to add another box next to the 2 on the bottom, adjusting the width so that all 3 will be uniform. Another words, the 3rd box - which will be placed in the empty space right now - will be wide enough to extend a little beyond the "main pic".

If anybody can help me with this, it'll be much appreciated. I've tried and tried, but can't seem to size and/or align the box properly. Thank you in advance!! : )

[Guest CartGarden]

If i understand that you want 3 equal with boxes under your main image:

1) adjust the width of the current two, and call your new box:

layout.css (line 16131 or so - big file!)

.latestProds,

.yourNewBoxName {

	border:1px solid #CCCCCC;

	float:left;

	height:110px;

	margin-right:10px;

	text-align:center;

	width:225px;

}

2) Create your box in the / content / index.tpl

I will guess location here (after latest Prods), and code format - hopefully you get the idea:

<div class="yourNewBoxName">

	<h2>Content Heading</h2>

	<p>Content...</p>

</div>

3) tweak that width to make everything line up, and add some custom css for ".yourNewBoxName" - left align text, etc etc... whatever of course...

I think that will work... harder to build 'in mind'.

Good luck.

[Guest Late664]

Yep, line 16131 is exactly where it was at... why in the world does the layout.css file have so many empty space???

Well, I'm pretty sure I've tried that before, but tried it again just to see.. and same thing, no success. What it ends up doing, is stack the boxes, as opposed to lining them up side by side in a row of 3. I've had a little better success with adding it to the 2 "side" boxes, but the problem with that, is that I can't adjust the size independently from the other 2 on the side.

I've also thought about changing the display setting for "latest products" from 2, to 3, but that didn't do me any good because I don't want the third box to be a products box.

There's gotta be a way.... hmmm. Thanks for your help though, I'll keep on messing around with it until either I find out how, or somebody else that have pulled it off can help me out.

[Guest CartGarden]

did you try making that width of 225px even smaller?

and what browser are you looking at?

can you try it, and upload (just so we can see what you have done?)

[Guest Late664]

Yep, I tried to adjust the width to something smaller...

I went ahead and applied the changes, and left it there for you guys to take a look at.

Currently, I have set all three boxes to 300px, since making them smaller only makes the boxes more narrow, and not have any effect on placement. Any ideas???

[Guest CartGarden]

your new box needs to appear before any of the <br clear="all"/>'s in the code.

it needs to go directly after the close of the "latestProds" div.

then reduce the width to 220px or so of these three divs...

[Guest Late664]

CartGarden, I really appreciate you helping me....

I've tried what you suggested before, but I did it again and left it there for you to see. I'm using the "killer" skin, if that makes any difference. There's gotta be something I'm doing wrong, or forgetting.

[Guest Late664]

Okay... believe it or not, the solution came to me in my dream last night. Tested it out and it worked. Now just gotta find time to finish up the site.

What I did was created a box similar to the others in Photoshop or Fireworks. Code below to place it on the site (just modify whatever's in red of course) -

<div id="anything" style="position:absolute;z-index:1;visibility:visible; left:000px;top:000px;width:000px;height:000px;">

<img name="anything" Align=Top src="/source/source/source.gif" alt="" border="000" width="000" height="000"></div>

Then use DIV CLASS for the text content!!! Yay... I was getting worried there that there wasn't gonna be a way! :o