Columns / details displaying after each other not under

17 posts by 4 authors in: Forums > CMS Builder
Last Post: April 28, 2009   (RSS)

By Kittybiccy - April 1, 2009 - edited: April 1, 2009

This is the page in question:
http://www.arcschoolsuk.com/CMSB/contact_arc_school.php

I want the details of each person (photo (to left) and name, tel, email etc) to display across the table, max of three people per row and then go down to a row below.

I added <?php $maxCols=3; if (@++$count % $maxCols == 0): ?> which has helped (I think) but the next detail displays below the one before and not next to. How can I solve this? This is how I want it to look: http://www.arcschoolsuk.com/html/contact_arc_school.html

Thanks for your help in advance!
Hannah

Re: [Kittybiccy] Columns / details displaying after each other not under

By gkornbluth - April 1, 2009

Hi Hannah,

Here's an approach that might help

If you want to set up sets of rows that you want to wrap, you’ll have to wrap your table inside a table. Here’s a 2 row example using the thumbnail2 image as a link to a detail page, separate Title and Subtitle fields, a hidden border for IE, and a fixed height for the image cell so that everything lines up nicely.

<table width="100%" border="0" cellpadding="5">
<tr>
<td align="center" >
<tr>
<?php foreach ($your_sectionRecords as $record): ?><?php foreach ($record['image'] as $upload): ?>
<td align="center" width="50%">
<table>
<tr>
<td height="350" valign="bottom"><a href="<?php echo $record['_link'] ?>"><img src="<?php echo $upload['thumbUrlPath2'] ?>" width="<?php echo $upload['thumbWidth2'] ?>" height="<?php echo $upload['thumbHeight2'] ?>" alt="" style="border:hidden" /></a>
</td>
<tr>
</tr>
<td ><div align="center" class="medium-title"><?php echo $record['title'] ?></div>
<div align="center" class="medium-text"><?php echo $record['sub_title'] ?></div></td></tr></table>
</td>
<?php $maxCols=2; if (@++$count % $maxCols == 0): ?></tr><tr><?php endif; ?>
<?php endforeach ?> <?php endforeach ?>
</tr>
</table>

Use your own variable names instead of $yourrecord

Best,

Jerry Kornbluth
The first CMS Builder reference book is now available on-line!







Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php

Re: [gkornbluth] Columns / details displaying after each other not under

By Kittybiccy - April 1, 2009

Thanks Jerry,

I already have that set up as a table inside a table.

This is the code I have used so that each 'person' would have the following:

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="144" align="left" valign="top"><?php foreach ($contact_usRecords as $record): ?> cell for photo
<?php foreach ($record['image'] as $upload): ?>
<?php if ($upload['hasThumbnail']): ?>
<img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" alt="" /><br/>
<?php endif ?>
<?php endforeach ?></td>

<td width="15">&nbsp;</td>spacer cell between photo and details

<td width="144" align="left" valign="top"> <strong><?php echo $record['name'] ?></strong><br/>cell for details
<?php echo $record['title'] ?><br/><br />
tel <?php echo $record['tel_no'] ?><br/>
fax <?php echo $record['fax_no'] ?><br/>
<?php $record['email'] = preg_replace("/^\s*<p>/i", "", $record['email'] ); ?>
<?php echo $record['email'] ?>
</div>
<?php endforeach; ?> </td>

<td width="15">&nbsp;</td>spacer cell between next person
<?php $maxCols=3; if (@++$count % $maxCols == 0): ?>
</tr>
<tr>

<td height="15" colspan="4">&nbsp;</td>spacer cell to split rows

</tr> <?php endif; ?>
<?php if (!$contact_usRecords): ?>
No records were found!<br/>
<?php endif ?>
</table>

I then used <?php $maxCols=3; if (@++$count % $maxCols == 0): ?> within the main table but outside floating table. Which is along the lines of what you suggest but not working, it still looks like it does in the link above. Could you or anyone else explain why and what I need to change?!

Re: [Kittybiccy] Columns / details displaying after each other not under

By ross - April 1, 2009

Hi there.

With table layouts like that, there are a bunch of things that could be causing the problem. Of course, there are also a bunch of different ways to actually get it going.

My recommendation for this would be to take one step back and design yourself a template that has everything working the way you need it. Don't use any CMS Builder code at all. Just hardcode the whole thing.

That will give you much more control over how it displays. Once you have a working template, it will be much much easier to get CMS Builder in there.

This is how I do all my projects so it's always the way I recommend.

Give it a shot and let me know how you make out. Once you have a working template, we can work together at putting CMS Builder into it.

Thanks!
-----------------------------------------------------------
Cheers,
Ross Fairbairn - Consulting
consulting@interactivetools.com

Hire me! Save time by getting our experts to help with your project.
Template changes, advanced features, full integration, whatever you
need. Whether you need one hour or fifty, get it done fast with
Priority Consulting: http://www.interactivetools.com/consulting/

Re: [ross] Columns / details displaying after each other not under

By Kittybiccy - April 1, 2009

Hi Ross,

This is my template page, built in HTML. I would use tables normally so that I could get everything lined up and even. What would you suggest?

http://www.arcschoolsuk.com/html/contact_arc_school.html

Will attach the file, if anyone can help tell me the best way to add the CMS but still keep the layout I would be reeeaally grateful!

Hannah
Attachments:

contact_arc_school.html 7K

Re: [ross] Columns / details displaying after each other not under

By gkornbluth - April 1, 2009 - edited: April 1, 2009

Try this... It's set up for 4 columns with the maxCols statement

I moved the foreach and endforeach statements and put the 2 column stuff in a nested table. It seems to work.

Best,

Jerry

<table width="10%" border="0" align="left" cellpadding="0">
<tr>
<td align="left" >
<tr>
<?php foreach ($contact_usRecords as $record): ?><?php foreach ($record['image'] as $upload): ?>
<td align="center" width="50%">


<table border="0" align="left" cellpadding="5">
<tr>
<td align="left" valign="top">

<table width="100%" border="0" cellpadding="5">
<tr>
<td align="left" valign="top"><a href="<?php echo $record['_link'] ?>"><img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" alt="" style="border:hidden" /></a></td>
<td align="left" valign="top"><div class="yourclass"><?php echo $record['title'] ?></div>
<div class="yourotherclass"><?php echo $record['name'] ?><br />
<?php echo $record['tel_no'] ?><br /><?php echo $record['fax_no'] ?><br /><?php echo $record['email'] ?></div></td>
</tr>
</table>

</td>

</tr></table>

</td>
<?php $maxCols=4; if (@++$count % $maxCols == 0): ?></tr><tr><?php endif; ?>
<?php endforeach ?> <?php endforeach ?>
</tr>
</table>
The first CMS Builder reference book is now available on-line!







Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php

Re: [gkornbluth] Columns / details displaying after each other not under

By Kittybiccy - April 2, 2009

Thankyou so much! I've adjusted the styles a bit to get them to fit but it's working! I now need to apply it to a couple of other pages but thanks for the help!

Hannah

Re: [gkornbluth] Columns / details displaying after each other not under

By Kittybiccy - April 6, 2009

I've got the columns working on the contact page - it's looking really good thanks! I'm now trying to do a similar thing with the gallery page but it's not working so well!

I set the gallery up as a multi page and generated the code for a list page. I put the code for the tables in and then put in the php for my gallery images (taking out all the code for the details that I don't need this time) but it's only displaying 1 thumbnail (I've put in 3 in the editor).

Can anyone see what I'm doing wrong here? I will be adding lightbox to the thumbnails once I get this to work!

The page in question is this one: http://www.arcschoolsuk.com/CMSB/lightbox2/gallery_arc_school2.php

Hannah

Re: [Kittybiccy] Columns / details displaying after each other not under

By Perchpole - April 6, 2009

Hi, Hannah -

Could you attach copies of your List and Detail pages, please.

Thanks,

:0)

Perch