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:
CSS code:
Please help !!! thnx
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.
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/
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 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
thnx alot
Regards
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;
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.
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/
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
thnx again for the help