quick postbit hints please

[stardotstar]

Hi guys,

I am struggling to get my postbit to do exactly what I want it to and am wrangling custom user profile fields mapped to images. What I want to be able to do is create a block based on their selections (or lack thereof)

The attachment shows four images on the right two columns of two rows. They are 120x90 and 120x30 per column so each column is 120x120. I will change these values as I get closer to my idea fit for the graphics but in the mean time I want to be able to get rid of the gutter between the columns.

When playing around I have been having much confusion about how rows and columns work in the postbit and I am far from comfortable with the html that implements it.

Here is what puts what I have:

$template_hook[postbit_userinfo_left]
<td width="100%">
<!-- / helis and modes start -->
<if condition="$post[field10]"><img src="images/helicopters/$post[field10].gif"></if>
<if condition="$post[field7]"><img src="images/modes/$post[field7].gif"></if>
<!-- / helis and modes end -->
</td>
<td width="100%">
<!-- / motors start -->
<div>
<if condition="$post[field11]"><img src="images/motors/$post[field11].gif"></if>
</div>
<!-- / motors end -->
<!-- / radios start -->
<div>
<if condition="$post[field9]"><img src="images/radios/$post[field9].gif"></if>
</div>
<!-- / radios end -->
</td>
<td width="100%">

Note that I have a div between motors and radios but I have to remove it for helis and modes or the layout falls apart - I have no idea why (I am really groping around in the dark )

Do I call a different table type or set the tdclass, border or something within that code?
When they are hard up against each other I can form the graphics so that they weld and use blanks to ensure that the layout works if the user has not selected.

Thanks for help guys.
Will

[blind-eddie]

Try this. I also added width & height to control images user adds. Image will always be that size. 150 is default on my board for avatars, thus allowing images to look correctly.
Change those to fit your needs.


Below is your code, rewritten

$template_hook[postbit_userinfo_left]
<!-- / helis and modes start -->
<td class="alt1" valign="center" nowrap="nowrap">
<if condition="$post[field10]"><img src="images/helicopters/$post[field10].gif" width="150" height="150"></if>
</td>
<td class="alt1" valign="center" nowrap="nowrap">
<if condition="$post[field7]"><img src="images/modes/$post[field7].gif" width="150" height="150"></if>
</td>
<!-- / helis and modes end -->
<!-- / motors start -->
<td class="alt1" valign="center" nowrap="nowrap">
<if condition="$post[field11]"><img src="images/motors/$post[field11].gif" width="150" height="150"></if>
</td>
<!-- / motors end -->
<!-- / radios start -->
<td class="alt1" valign="center" nowrap="nowrap">
<if condition="$post[field9]"><img src="images/radios/$post[field9].gif" width="150" height="150"></if>
</td>
<!-- / radios end -->

[stardotstar]

Hi, thank you for such a prompt response and taking the time to mod my code!
This puts all the four images next to each other scaled to 150 (or 120 or whatever) still with the small gap between them.
What I want to do is the same as my attachment above but hard up against each other...

Understanding the way the td classes work and the nowrap may be key to my getting the hang of this.

Thanks again!
Will

[Lynne]

Have you looked at your css for the image tag? It could be that there is padding added to it via the css. If you have firefox, I'd strongly recommend getting an add-on like firebug which will allow you to inspect an element and show you all the css associated with it.

[stardotstar]

Great Lynne, adding that now! Thanks for the tip - then I manually override the CSS padding in the img tag?

Will


UPDATE - Wow FireBug is awesome - I can see myself learning heaps now that I have a bit more direct feedback and interpretation of the source!

This is what I think is causing the behavior that I have:

<table width="100%" cellspacing="4" cellpadding="0" border="0">
<tbody>
<tr>
<td class="alt2">
</td>
<td nowrap="nowrap">
</td>
<td width="100%"> </td>
<td width="100%">
<img src="images/helicopters/RJXHobby.gif"/>
<img src="images/modes/Mode-1.gif"/>

I notice the cellspacing ="4" and will try to override this in the template.

Thanks Lynne.
Will


Update 2: I seem to be able to use FireBug to get it to remove the cellspacing and cellpadding values and get the gap removed but only from the whole table - what I assume the postbit is in fact - a single table with a style of spacing and padding applied to rows and columns. How would I wrap special no spacing and padding around only the two columns and rows in question?

<td class="alt2" style="padding: 0px;">
<table width="100%" cellspacing="4" cellpadding="0" border="0">
<tbody>
<tr>
<td class="alt2">
<a href="member.php?u=1">
<img width="119" height="55" border="0" alt="stardotstar's Avatar" src="images/avatars/custom/avatar1_11.gif" title="stardotstar's Avatar"/>
</a>
</td>
<td nowrap="nowrap">
<div id="postmenu_1182882">
<a class="bigusername" href="member.php?u=1">
<span style="font-weight: bold; color: red;">stardotstar</span>
</a>
<script type="text/javascript">
1 vbmenu_register("postmenu_1182882", true);
</script>
</div>
<div class="smallfont" align="left" ;="">Will</div>
<div align="stylevar[center]" ;="">
<img src="images/flags/Eureka_Stockade.GIF"/>
<div>
<img alt="New South Wales" src="images/states/NSW.gif" title="New South Wales"/>
</div>
</div>
</td>
<td width="100%"> </td>
<td width="100%" cellpadding="0" cellspacing="0">
<img src="images/helicopters/X-Cell.gif"/>
<img src="images/modes/Mode-2.gif"/>
</td>
<td width="100%" cellpadding="0" cellspacing="0">
<div>
<img src="images/motors/OS.gif"/>
</div>
<div>
<img src="images/radios/JR_DSM.gif"/>
</div>
</td>
<td width="100%"> </td>
<td valign="top" nowrap="nowrap">
<div class="smallfont">
<div>Join Date: Aug 2003</div>
<div>Location: Uncertain</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div align="left"> </div>
<div> </div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>

this is what firebug shows me with the post bit highlighted.

The only way I can get the gap removed from the mode and helicopter, radio and motor image columns is by setting (in firebug)

<table width="100%" cellspacing="0" cellpadding="0" border="0">

This removes all the gaps and makes the rest of the data to tight.
I guess I need to isolate the cells in question by wrapping them in their own table data cellspacing and padding code...
Looking at this in DreamWeaver I see that the gap between cells is defined table wide as: stylevar[cellpadding] and if I change it to 0 there it applies to all elements.

In the attachment you can see the two columns selected - how would I change the padding between only these two to 0?
That is the question come down to.

[stardotstar]

Do I take it that once a table is defined its padding and cell spacing applies to all defined columns and you can't put two columns hard up against eachother on the fly...

[Lynne]

That is correct - once you define cellpadding or spacing in the table, it applies to all rows/columns in the table.

[stardotstar]

So, for what I want to do I would need to split the post bit up into two tables side by side.
Hmmm, ok, I'll work on it.

Thanks for the clarification Lynne!
Will

[Lynne]

Originally Posted by stardotstar

So, for what I want to do I would need to split the post bit up into two tables side by side.
Hmmm, ok, I'll work on it.

Thanks for the clarification Lynne!
Will

You may be able to use css to apply no padding to a particular row/column. You may want to try that. Try border-spacing:0px and padding:0px .

[stardotstar]

Thanks yet again Lynne.

This is a little (or a lot) beyond me at this moment.
I have tried to insert that into the postbit in a couple of ways but it does not have any effect.

What I have shown is this by altering some of the values that firebug exposes. Attachment 1 below is what my template builds and Attachment 2 is what I want to achieve BUT only the effect for the 4 images in the square block on the right.

This is my postbit bit:

<td width="100%">

</td>
$template_hook[postbit_userinfo_left]
<td width="100%" style="border-spacing=0 padding=0">
<!-- / helis and modes start -->

<if condition="$post[field10]"><img src="images/helicopters/$post[field10].gif"></if>

<if condition="$post[field7]"><img src="images/modes/$post[field7].gif"></if>

<!-- / helis and modes end -->
</td>




<td width="100%">
<!-- / motors start -->
<div>
<if condition="$post[field11]"><img src="images/motors/$post[field11].gif"></if>
</div>
<!-- / motors end -->
<!-- / radios start -->
<div>
<if condition="$post[field9]"><img src="images/radios/$post[field9].gif"></if>
</div>
<!-- / radios end -->
</td>
<td width="100%">

This block seems to be governed by the table setup for the entire postbit because when I use firebug to set the cellspacing to 0

<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="alt2">
</td>
<td nowrap="nowrap">
</td>
<td width="100%"> </td>
<td width="100%" style="">
<img src="images/helicopters/Compass.gif"/>
<img src="images/modes/Mode-1.gif"/>
</td>

I get the images together as in attachment 2 but it applies to the whole postbit - ie I lose the padding and spacing I want to preserve between the avatar and the username, flags etc.

I hope this makes sense!

Thanks for your suggestions.

Will