What is the best method to output the correct HTML from my PHP loop

Question

Hi guys, I have a problem, I have a HTML problem, I don't know if i'm using the best method, so here is my problem: Everthing is ok:http://screencast.com/t/uJmffaxE
If i have more space, here are starting the problems: http://screencast.com/t/1z1GRhOLK
Here is my code:

<div id="wrap-categories" class="clearfix">
<?php if($this->categories !== false): ?>
 <ul>
 <?php foreach($this->categories as $category):?>
  <li>
   <strong><?=$category['name']?></strong><br />
  <?php if($this->artistsHelper($category['id']) !== false): ?>
   <?php foreach($this->artistsHelper($category['id']) as $artist): ?>
    <p><?=$artist['name']?></p>
   <?php endforeach; ?> 
  <?php endif; ?>
  </li> 
 <?php endforeach; ?>
 </ul>
<?php endif; ?>

And here is how the markup looks like, when is generated:

      <div id="wrap-categories" class="clearfix">

        <ul>
          <li>
      <strong>Dj's</strong><br />
                    <p>Big fuckin'artists</p>
              <p>asddssdadsasda</p>
              <p>Gigle bossu</p>

           </li> 
          <li>

      <strong>Make up</strong><br />
                    <p>Cool</p>

           </li> 
          <li>
      <strong>Mamam</strong><br />
           </li> 
          <li>
      <strong>Tata</strong><br />

           </li> 
          <li>
      <strong>Dawaj</strong><br />
           </li> 
          <li>
      <strong>Sexy</strong><br />
           </li> 
          <li>
      <strong>Bitch</strong><br />

           </li> 
          <li>
      <strong>Armin</strong><br />
           </li> 
          <li>
      <strong>Lol</strong><br />
           </li> 
          <li>
      <strong>Gogu</strong><br />

           </li> 
          <li>
      <strong>Penal</strong><br />
           </li> 
          <li>
      <strong>Asasin</strong><br />
           </li> 
         </ul>
      </div>

The css

#wrap-categories ul li{
float:left;
margin-right:10px;
}

Any help please?!

Answer 1

i think you have to use stylesheet (css) to make that works. try to add fixed width into your list.

Answer 2

There are several issues to tackle. First, UL stands for Un-ordered List and is great if all you had was the first column of data there. I can only assume that you will need to fill out more columns of data (across the horizontal axis), so UL is the wrong parent tag. If were the correct tag, you would need to append opening and closing LI (for list item) tags.

@Jonathan Sampson's comment is correct. You will see a lot of posts here and elsewhere online saying how evil tables are, and that is true when misused for layout purposes. Based on what you have shown us, you have tabular data and that should be using a Table tag as a parent.

Update

It appears I misunderstood the nature of your data. After going back and forth, this is your solution:

<style type="text/css">

     .column
     {
          float: left;
          display: inline;
          clear: none;
          margin: 0 5px;
     }

     .column UL LI 
     {
          list-style: none;
     }


     .category
     {
         font-weight: bold;
     }
 </style>

 <div> <!-- this is an outer/wrapper/container -->
 <?php if($this->categories !== false): ?>
    <?php foreach($this->categories as $category):?>
        <div class="column">
            <ul>
                <li class="category"><?=$category['name']?></li> <!-- header data... -->
            <?php if($this->artistsHelper($category['id']) !== false): ?>
                    <?php foreach($this->artistsHelper($category['id']) as $artist): ?>
                            <li><?=$artist['name']?></li> <!-- no class info here because its just text -->
                    <?php endforeach; ?>    
            <?php endif; ?>
            </ul>
         </div>   
    <?php endforeach; ?>
    </div>

There are a few differences in what I posted here and what you started with:

• Wrap each column in a floating DIV
• Wrap each "artist" in a pair of LIs
• Wrap the whole thing in a container DIV
• Set the appearance of your header row in the style sheet

Answer 3

 <?php $x = 1?>   
 <?php if($this->categories !== false): ?>
    <?php foreach($this->categories as $category):?>
        <div class="column" <?=($x == 6) ? "style=\"clear:left\"" : false;?>>
            <ul>
                <li class="category"><?=$category['name']?></li> <!-- header data... -->
            <?php if($this->artistsHelper($category['id']) !== false): ?>
                    <?php foreach($this->artistsHelper($category['id']) as $artist): ?>
                            <li><?=$artist['name']?></li> <!-- no class info here because its just text -->
                    <?php endforeach; ?>    
            <?php endif; ?>
            </ul>
            <?php ($x == 6) ? $x = 1 : $x++;?>
         </div>   
    <?php endforeach; ?>
<?php endif; ?>