Give in to my inner OCD and make the tune list a DIV with CSS, not a table.

This commit is contained in:
Jim Hague 2013-02-22 23:20:06 +00:00
parent 36bd2926b5
commit 9b21ea9c95
4 changed files with 35 additions and 17 deletions

View File

@ -1,4 +1,4 @@
</table>
</div>
</div>
</body>
</html>

View File

@ -37,4 +37,4 @@
<div class="grid_12 dottes-body">
<h1>The tunes</h1>
<table class="dottes-tune-table">
<div class="dottes-tune-list">

View File

@ -1,4 +1,9 @@
<tr>
<td><a class="dottes-tune-link" href="@TUNE@.html">@TITLE@</a></td>
<td><img class="dottes-tune-table-image" src="firstline-@TUNE@.png" alt="@TITLE@ first line"></td>
</tr>
<div class="dottes-tune-list-item">
<div class="dottes-tune-list-item-link">
<a class="dottes-tune-link" href="@TUNE@.html">@TITLE@</a>
</div>
<div class="dottes-tune-list-item-image">
<img class="dottes-tune-table-image" src="firstline-@TUNE@.png"
alt="@TITLE@ first line">
</div>
</div>

View File

@ -126,17 +126,7 @@ a.dottes-tune-link
{
font-size: 20px;
position: relative;
top: 10px;
}
table.dottes-tune-table
{
margin: 10px;
}
table.dottes-tune-table td
{
vertical-align: middle;
top: 12px;
}
ul.tune-type-list
@ -168,3 +158,26 @@ ul.tune-data-list li
display: inline;
margin: 10px;
}
div.dottes-tune-list
{
display: table;
margin: 10px;
}
div.dottes-tune-list-item
{
display: table-row;
}
div.dottes-tune-list-item-link
{
display: table-cell;
vertical-align: middle;
}
div.dottes-tune-list-item-image
{
display: table-cell;
vertical-align: middle;
}