Каков наилучший метод для вывода правильного HTML из моего цикла PHP

Question

У меня проблема, у меня проблема с HTML, я не знаю, использую ли я лучший метод, поэтому вот моя проблема: Все в порядке: http://screencast.com/t/uJmffaxE
Если у меня есть больше места, здесь начинаются проблемы: http://screencast.com/t/1z1GRhOLK
Вот мой код:

<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; ?>

А вот как выглядит разметка, когда генерируется:

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

                                <ul>
                                        <li>
                        <strong>Dj's</strong><br />
                                                                                <p>Big 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>

CSS

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

Любая помощь, пожалуйста?!

Answer 1

Есть несколько вопросов для решения. Во-первых, UL расшифровывается как «Неупорядоченный список» и прекрасно, если все, что у вас было, - это первый столбец данных. Я могу только предположить, что вам нужно будет заполнить больше столбцов данных (по горизонтальной оси), поэтому UL - это неправильный родительский тег. Если был правильный тег, вам нужно добавить открывающий и закрывающий теги LI (для элемента списка).

@ Комментарий Джонатана Сэмпсона верен. Вы увидите много постов здесь и в других местах онлайн, в которых говорится о том, как злые таблицы, и это правда, если их неправильно использовать в целях верстки. Исходя из того, что вы нам показали, у вас есть табличные данные, и должен использовать тег Table в качестве родителя.

Обновление

Кажется, я неправильно понял природу ваших данных. После перехода туда и обратно это - ваше решение:

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

Есть несколько различий в том, что я написал здесь и с чего вы начали:

• Обернуть каждый столбец в плавающем DIV
• Заверните каждого «художника» в пару LI
• Заверните все это в контейнер DIV
• Установить внешний вид строки заголовка в таблице стилей

Answer 2

 <?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; ?>

Answer 3

Если я правильно понял, ваша проблема с отступом исходного кода. Это правильно? Здесь будет ваш ответ . У меня возникла эта проблема при использовании параметра Исходный код -> Формат в среде IDE Netbeans:

        <div class="for">
            <?php for ($i = 0; $i < 10; $i++): ?>
<p> <!-- this "p" without indentation will be correct rendered -->
paragraph
            </p> <!-- this one will always render wrongly -->
           <?php endfor; ?>

Но если использовать опцию Souce Code -> Format или сделать отступ самостоятельно, он будет обработан с дополнительным отступом. При использовании печати или эха это не ошибется.

Answer 4

Я думаю, вы должны использовать таблицу стилей (CSS), чтобы это работало. попробуйте добавить фиксированную ширину в ваш список.