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: [character27] Inline horizontal listing help

By Jason - June 8, 2011

Hi,

The issue here is that each of your categories is being output inside 1 main div. In order for them to appear horizontally, you'll need to add additional formatting.

The easiest solution would be to output all of your categories inside a table. You can then set a maximum number of columns, so that once a row is filled, another row automatically starts.

For an example of doing this, take a look at this post:
http://www.interactivetools.com/forum/gforum.cgi?post=84970#84970

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: [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