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 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?!
<?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; ?>
i think you have to use stylesheet (css) to make that works. try to add fixed width into your list.
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:
If I understood it right your problem is with the source code indentation. Is it correct? Here will be your answer. I had this problem when I use the Source Code -> Format option from Netbeans IDE:
<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; ?>
But if use the Souce Code -> Format option or indent it by yourself it will be rendered with extra indentation. Using print or echo it dindn't go wrong.