Cell Problem

[Rich]

Hello,
This problem has to do with the modules that are installed when VBCMPS is iinstalled. I believe the problem is my coding or the cells.
I have been trying to work with some cells that will surround the blocks. The code is working fine, except it pushes blocks away. So, the blocks won't stay in line and it tosses my homepage into a spin. I was trying to hardcode it because I don't know any other way to do it.

I opened each block and added this code to it:


<table align="center"><td valign="top">
<div align="center">
<table border="0" cellpadding="0" cellspacing="0"><tr>
<td>
<img border="0" src="http://www.iguanacenter.com/images/blockimg/aeditsideleft.jpg" width="20" height="35"></td>
<td background="http://www.iguanacenter.com/images/blockimg/aeditsidemiddle.jpg"></td>
<td>
<img border="0" src="http://www.iguanacenter.com/images/blockimg/aeditsideright.jpg" width="20" height="35"></td>
</tr><tr>
<td background="http://www.iguanacenter.com/images/blockimg/asideleft.jpg"></td>
<td>

<!--Start Text Here-->

Whatever is written in place of this text is surrounded by the cells. I got that working. But something is wrong because it throws all the blocks into a spin. What is coded wrong that would cause that? I would like for all of the blocks that I make in the future to also work with this code.

<!-- /End Text Here-->

</td>
<td background="http://www.iguanacenter.com/images/blockimg/asideright.jpg"></td>
</tr><tr>
<td>
<img border="0" src="http://www.iguanacenter.com/images/blockimg/aeditsideleftbottom.jpg" width="20" height="35"></td>
<td background="http://www.iguanacenter.com/images/blockimg/aeditsidemiddlebottom.jpg"></td>
<td>
<img border="0" src="http://www.iguanacenter.com/images/blockimg/aeditsiderightbottom.jpg" width="20" height="35"></td>
</tr></table>
</div><br /><br />

</td>

This is my first run with cells. I thought I had done everything right. It looked great on my pc. lol Once I added this code to the blocks, some got covered by other blocks, some stayed in place and started a new line, etc. How could I make this code work so that if added to each block, they would all remain uniform?

Thanks to anyone that has a better knowledge of this than me.

[Jolten]

Same post made at vb.org. You're missing a couple tags.



<table align="center">
<tr>
<td valign="top">

<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<img border="0" src="http://www.iguanacenter.com/images/blockimg/aeditsideleft.jpg" width="20" height="35"></td>
<td background="http://www.iguanacenter.com/images/blockimg/aeditsidemiddle.jpg"></td>
<td>
<img border="0" src="http://www.iguanacenter.com/images/blockimg/aeditsideright.jpg" width="20" height="35"></td>
</tr>
<tr>
<td background="http://www.iguanacenter.com/images/blockimg/asideleft.jpg"></td>
<td>

<!--Start Text Here-->
sad
ssssssssasdasd
<!-- /End Text Here-->

</td>
<td background="http://www.iguanacenter.com/images/blockimg/asideright.jpg"></td>
</tr>
<tr>
<td>
<img border="0" src="http://www.iguanacenter.com/images/blockimg/aeditsideleftbottom.jpg" width="20" height="35"></td>
<td background="http://www.iguanacenter.com/images/blockimg/aeditsidemiddlebottom.jpg"></td>
<td>
<img border="0" src="http://www.iguanacenter.com/images/blockimg/aeditsiderightbottom.jpg" width="20" height="35"></td>
</tr>
</table>
<br /><br />

</td>
</tr>
</table>

[Rich]

Hello,
I have used that code and I am recieving a new error. The tags that were missing corrected the issue with distortion relevant to other blocks. Now the blocks don't auto-resize like they originally did. So now I have some blocks that look correct, and others that don't.

I posted a full response at vb.org. To see what I mean, have a look:

http://www.iguanacenter.com

Notice the size issues with the blocks now? Plus the left side spacing from the center blockk is different from the right side spacing.

[Jolten]

it's just a matter of sorting out widths on some table cells. And coding the html to wrap the elements properly. Here's a page that has everything set correctly, view source and you can see how I set it up.

Click here (http://www.pixeladdiction.com/test.htm)

[Rich]

Hello,
Thank you. So I need to hardcode the widths for each block. So that means that when the blocks are moved, I have to change them again?

Prior to the blocks being encased with the border cells, they would autosize. Why is it that the code added isn't autosizing anymore? If we can figure that out, I should be able to rewrite this so I don't need to hardcode the widths as they will just enlarge as they are needed. (They were supposed to do that this whole time. lol)

[Jolten]

It does auto resize. Due to your use of a specific size image on the sides you must code those cells to remain that width. basically.. the cells containing the 20 pixel wide image need to always be 20 pixels wide or the appearance breaks. The middle cell which contains the top, content and bottom information will auto-expand to any width. If you open the page I linked to you can adjust the browser width to any width and the tables resize. I'm not certain what it is you're referring to since it all works properly here.

I have it figured out.... but I don't think you're "getting it"

[Rich]

Hello,
I think I have got it just fine. I think it may be you that have missed what I am trying to do, or perhaps me for not explaining it better. Either way, your method is only good if I were going to leave all the blocks like that or in that position. otherwise, as I move them around, I need to go in and "hardcode" the widths again to make them match.

That I could have done from the beginning. I am not interested in hardcoding widths. I want these blocks to expand and contract just as if there were no borders around them at all.

Without the borders, every block is evenly spaced. It doesn't matter where i move it, it automatically resizes itself to accomodate the spacing. i don't need to edit anything so this happens, it just does.

What I was working on is the code that I wrote corrected so that once it is written and applied to each block, it will automatically resize to look just like the cmps page does when they are not installed.

With your code, I need to set the width for each block. that means that if I move a block, I need to go in and manually set the new width.

I don't want to do that. I know this code can be written so it will do what I am asking. I just haven't figured it out yet. lol

Due to your use of a specific size image on the sides you must code those cells to remain that width. basically.. the cells containing the 20 pixel wide image need to always be 20 pixels wide or the appearance breaks.

There are 8 images that make up the cell structure plus the empty middle cell. There are 4 corners, and 4 middles. (left right top bottom) The middles were written to "fill" the cell if the length is longer or shorter. They adjust with the block. I don't see how the 20 pixel set sides have anything to do with this. The width of them is 20. The code can go as far and high as it wants and the sides will not be effected niether will the corners. That is where you lost me with your explanation. The corners are set at 20 wide, so they align with the sides. If the top and bottom need to expand to 100 pixels, they are ok. The sides are the same way. Right up through the corners, the 20 pixel set is there. They can extend upward as much as they want and at no point have I had a break in the images.

What I need to know is how I can surround the blocks with images, but they will auto expand and contract to the column they are in automatically. If these blocks were coded as default, how would they have been written in so that every block was surrounded with the cells, but they look just like the stock cmps? Perhaps that is clearer for what it is I am looking for.

I want to have one set of code that I can apply to each block, and they will all align up with each other bother vertically, and horizontally. If a block from one of the sides is moved into the middle, I want it to expand to the width of the other blocks in the middle automatically.
If a block from the center is placed on the side, I want it to line up and be the same width as the other blocks on that side.

I used the section of code you have written for the yada yada yada on the left hand side, and placed 2 left hand side modules in it. They did not line up. The navigation module and the polls module had different widths. The polls module stuck out closer to the center blocks than the navigation module did. The navigation module should have adjusted itself to remain the same width as the widest block in that column. Your code didn't do that. So I think "I got it" in regards to having to physically assign the widths. But that isn't what I am looking for. Thank you though.

I would love to hear if you know how to write the one code bit that will do what I am asking.

Basically, it seems like it needs to read the outside edge of the widest block, and then adjust to that width.

[Jolten]

Okay well I give up. I've tried. I've never had such a struggle trying to help someone. The code I provided is expandable. It's only the basic skeleton that requires some coding to ensure things look right regardless of where they are locate don the page.

I suggest you start by learning HTML since you're obviously not terribly familiar with it. I don't know what you're doing with the code I've provided but I can add blocks, move blocks delete blocks and they all retain the proper appearance.

[Rich]

Hello,
I took your code from the view source. I took the left column code actually. I didn't edit i in any way. I then used that code on 2 different blocks. Both were going to reside in the left column.

The moment I added the code and looked at the blocks, they did not line up correctly.

To make things clear, I posted that this was my FIRST time writing cells. So telling me to go learn HTML was remedial. I already stated that i was JUST LEARNING this. Your lip isn't needed when responding to people. Especially when the person lays everything out in front of you ahead of time. Maybe you should read an entire post before you get lippy with people. Thats just plain ignorant and rude.

Now, your code will work great if I were going to write up a completely custom html page. Then again, MY code worked if I was writing up a completely custom HTML page. That isn't the issue.

I am using this code on the adv_portal homepage. EACH module template is getting this code wrapped around it. Its THEN that problems arise.

If it is a width issue, then why are the modules NOT lining up with the default cell structure? WHY would i need to go into each block and customize it so that they all line up correctly?

I am not saying that I didn't appreciate your assistance, but I did not apprecaite your attitude in your final response. If I knew how to handle this 100% on my own,. I wouldn't have bothered posting.

If you can't handle people asking questions, don't waste our time with posting. I would rather have gone ignored, which seems to happen a lot on these sites, than be insulted.

[Jolten]

You simply aren't copying code correctly. Look at my link again... boxes repeated over and over and they all line up. It's got nothing to do with a custom coded page, it's basic html.

[Rich]

Hello,

The code I initially wrote worked for placing the images around the block. I omitted 2 tags that were needed unintentionally. So yesterday, I went back and tried Joltens code again. With the exception of 3 modules, that code worked. The 3 modules it didn't work on were the buddy list, which I assigned a set width too, and 2 others that I don't recall off hand. I also added the set width to them.

The set width was applied to the table that I wrapped with the cells. That corrected my problem and now everything is working.

When I copied your code, which I tried several times, I had to add the set width to almost all of the modules on my page. I didn't want to set the width on any of the modules. The 3 blocks that I did set the width on now have to have the width changed if they are transferred from one column to the next. That is what I was looking to avoid which is what I was trying to explain to you.

Since the tables already adjusted before the cell wrap was in use, they should still resize with the cell structure in use. They weren't. I had varying sizes of modules. I understood when you were explaining that I needed to set the widths. I didn't want to have to set the widths though. That means that I have to set them each time a block is moved to a new column.(Because the center column is not the same width as the outside column. So after setting the width, I would then need to adjust it if I moved the block to the center.) Right now, the site is being designed and developed. Those blocks will change numerous times before we open the site. That means numerous width changes in order to see how it will look "correctly". Thats where my problem was.

Joltens code worked perfect on every module, even allowing me to move the blocks and they retained shape and adjusted accordingly. (With the exception of 3 modules. Which I really haven't figured out why they don't expand 100% but stop prematurely.) I set their table width too 145, and they work fine now. If I were to move that module to the center, I would need to change that 145 to read something like 305 for it to be the same size as the other center modules.

I was looking for one set of code that wouldn't require me to manually adjust the widths on any of the modules. Apparently that isn't as easy to do as it first appeared. Something about the way some of the modules are coded causes the cell structure to "stop" some of the modules from expanding to 100%. That is beyond me at this point in time.

Hopefully this post shows you that I understood what you were trying to explain, but perhaps it also shows you what it was I was trying to explain.

Setting the widths is something I didn't want to do. I wanted the code to do all the work, so I only had to touch it once.

When I have time, I am going to try and locate why some of the modules stop prematurely. If I know why they stop, I might be able to correct them.

Thanks for your help.

[Jolten]

I am Jolten at vb.org. It's the same code.

[Rich]

Hello,
This was the code off of your test page:

<table align="center" width="100%">
<tr>
<td valign="top" width="20%">


<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%">
<tr>
<td width="20"><img border="0" src="http://www.iguanacenter.com/images/blockimg/aeditsideleft.jpg" width="20" height="35"></td>
<td background="http://www.iguanacenter.com/images/blockimg/aeditsidemiddle.jpg"></td>
<td width="20"><img border="0" src="http://www.iguanacenter.com/images/blockimg/aeditsideright.jpg" width="20" height="35"></td>
</tr>
<tr>
<td background="http://www.iguanacenter.com/images/blockimg/asideleft.jpg"></td>
<td>

<!--Start Text Here-->
yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda
yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda
<!-- /End Text Here-->

</td>
<td background="http://www.iguanacenter.com/images/blockimg/asideright.jpg"></td>
</tr>
<tr>
<td width="20"><img border="0" src="http://www.iguanacenter.com/images/blockimg/aeditsideleftbottom.jpg" width="20" height="35"></td>
<td background="http://www.iguanacenter.com/images/blockimg/aeditsidemiddlebottom.jpg"></td>
<td width="20"><img border="0" src="http://www.iguanacenter.com/images/blockimg/aeditsiderightbottom.jpg" width="20" height="35"></td>
</tr>
</table>
<br />

This is the code that worked:

<table align="center">
<tr>
<td valign="top">

<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<img border="0" src="http://www.iguanacenter.com/images/blockimg/aeditsideleft.jpg" width="20" height="35"></td>
<td background="http://www.iguanacenter.com/images/blockimg/aeditsidemiddle.jpg"></td>
<td>
<img border="0" src="http://www.iguanacenter.com/images/blockimg/aeditsideright.jpg" width="20" height="35"></td>
</tr>
<tr>
<td background="http://www.iguanacenter.com/images/blockimg/asideleft.jpg"></td>
<td>

<!--Start Text Here-->
sad
ssssssssasdasd
<!-- /End Text Here-->

</td>
<td background="http://www.iguanacenter.com/images/blockimg/asideright.jpg"></td>
</tr>
<tr>
<td>
<img border="0" src="http://www.iguanacenter.com/images/blockimg/aeditsideleftbottom.jpg" width="20" height="35"></td>
<td background="http://www.iguanacenter.com/images/blockimg/aeditsidemiddlebottom.jpg"></td>
<td>
<img border="0" src="http://www.iguanacenter.com/images/blockimg/aeditsiderightbottom.jpg" width="20" height="35"></td>
</tr>
</table>
<br /><br />

</td>
</tr>
</table>

You added code to the first one, and that was the one I had problems with. The second one, from vBulletin.org, worked fine.The first set of code you see is the first codebit on your test page.

btw, thanks for the code in general. I didn't realize I ommitted the 2 tags.