Inline horizontal listing help

5 posts by 2 authors in: Forums > CMS Builder
Last Post: June 9, 2011   (RSS)

By character27 - June 8, 2011 - edited: June 8, 2011

Hi,

I tried many ways from the internet tutorials and help to make the list go horizontally not vertically : http://www.mibconsultancy.com/index.php as you can see the categories are listed vertically , here's my code of the php and CSS .

php code:

<div id="center">
<ul>
<li class="hi">
<div> <!-- STEP2: Display Records (Paste this where you want your records to be listed) -->
<?php foreach ($main_categoriesRecords as $record): ?>
<?php foreach ($record['category_title_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 elseif ($upload['isImage']): ?>
<img src="<?php echo $upload['urlPath'] ?>" width="<?php echo $upload['width'] ?>" height="<?php echo $upload['height'] ?>" alt="" /><br/>


<?php endif ?>
<?php endforeach ?>
<!-- STEP2a: /Display Uploads -->



<?php foreach ($record['category_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 elseif ($upload['isImage']): ?>
<img src="<?php echo $upload['urlPath'] ?>" width="<?php echo $upload['width'] ?>" height="<?php echo $upload['height'] ?>" alt="" /><br/>


<?php endif ?>
<?php endforeach ?>
<!-- STEP2a: /Display Uploads -->



<?php endforeach ?>

<?php if (!$main_categoriesRecords): ?>
No records were found!<br/><br/>
<?php endif ?>
<!-- /STEP2: Display Records -->
<br/>
</div></li>

</ul>
</div>

CSS code:

.hi {
height: 193px;
width: 207px;
z-index: 200;
padding-top: 40px;
float: left;
text-align: center;
list-style-type: none;
}
.hi li {

list-style-type: none;
vertical-align: top;
display: inline;
overflow: hidden;
}


Please help !!! thnx

Re: [Jason] Inline horizontal listing help

By character27 - June 8, 2011

Hey jason thnx for the help, i'm not much into programming, i tried the things i know but no luck, i attached the index and css file, can u please help me in fixing this issue :) , i removed the header coding from index file, for security reasons.

thnx alot
Regards
Attachments:

cms.zip 2K

Re: [character27] Inline horizontal listing help

By Jason - June 9, 2011

Hi,

Here is an example of how you can output your categories in columns by using a table. In this example I've set the maximum number of columns in a row to be set to 3, but you can change this by changing this line: $maxCols = 3;

<table class="hi" border="0" cellspacing="0" cellpadding="0">
<tr>

<?php
$maxCols = 3;
$columnCount = 0;
?>

<!-- STEP2: Display Records (Paste this where you want your records to be listed) -->
<?php foreach ($main_categoriesRecords as $record): ?>
<?php
$columnCount ++;

if (($columnCount % $maxCols) == 0) { echo "</tr><tr>"; }
?>


<td>
<?php foreach ($record['category_title_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 elseif ($upload['isImage']): ?>
<img src="<?php echo $upload['urlPath'] ?>" width="<?php echo $upload['width'] ?>" height="<?php echo $upload['height'] ?>" alt="" /><br/>


<?php endif ?>
<?php endforeach ?>
<!-- STEP2a: /Display Uploads -->



<?php foreach ($record['category_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 elseif ($upload['isImage']): ?>
<img src="<?php echo $upload['urlPath'] ?>" width="<?php echo $upload['width'] ?>" height="<?php echo $upload['height'] ?>" alt="" /><br/>


<?php endif ?>
<?php endforeach ?>
<!-- STEP2a: /Display Uploads -->


</td>

<?php endforeach ?>

<?php if (!$main_categoriesRecords): ?>

<tr> <td colspan = "<?php echo $maxCols;?>"> No records were found! </td></tr>

<?php endif ?>
<!-- /STEP2: Display Records -->

<br/>


</tr>
</table>

Give this a try. I can't actually test this on your data, so you may need to make some changes to this. You may also need to change your CSS to format this how you'd like it.

Hope this helps get you started.
---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

Re: [Jason] Inline horizontal listing help

By character27 - June 9, 2011

IT WORKED :) thnx alot, i will just work on css to fix some spaceing...

thnx again for the help