> По поводу приведенного фрагмента - выглядит нехорошо, да. Давай пример того же, но чтобы "не хрень".
Да легко, и с удовольствием.
Не трогая пока окружающей таблицы, и не вникая в общую систему стилей.
HTML:
Code: Select all
<fieldset>
<label for="tokenize"> Поиск:</label>
<input type="text" name="search_params[query]" id="tokenize" name="blah" />
<a onclick="javascriptsubmitPage(null, 'search.php');"><img valign="top" src="./files/images/go.ru.png" /></a>
</fieldset>
<ul id="categories_list">
<li><a href="category.php?cid=10&l=ru">Addons</a></li>
<li><a href="category.php?cid=15&l=ru">CharTable</a></li>
<li><a href="category.php?cid=8&l=ru">Development</a></li>
<li><a href="category.php?cid=3&l=ru">Editor</a>
<ul>
<li><a class="body_link_small_grey" href="category.php?cid=29&l=ru">Spelling</a></li>
<li><a class="body_link_small_grey" href="category.php?cid=30&l=ru">Editor.Format</a></li>
<li><a class="body_link_small_grey" href="category.php?cid=31&l=ru">Editor.Convert</a></li>
<li><a class="body_link_small_grey" href="category.php?cid=32&l=ru">Editor.Block</a></li>
<li><a class="body_link_small_grey" href="category.php?cid=33&l=ru">Editor.AutoText</a></li>
<li><a class="body_link_small_grey" href="category.php?cid=34&l=ru">Editor.Find</a></li>
<li><a class="body_link_small_grey" href="category.php?cid=36&l=ru">Editor.Hex</a></li>
<li><a class="body_link_small_grey" href="category.php?cid=39&l=ru">Dictionaries</a></li>
<li><a class="body_link_small_grey" href="category.php?cid=41&l=ru">Colorer.Addons</a></li>
<li><a class="body_link_small_grey" href="category.php?cid=43&l=ru">S&R</a></li>
</ul>
</li>
<li><a href="category.php?cid=4&l=ru">Internet</a>
<ul>
<li><a class="body_link_small_grey" href="category.php?cid=35&l=ru">Internet.addons</a></li>
</ul>
</li>
<li><a href="category.php?cid=6&l=ru">Shell</a>
<ul>
<li><a class="body_link_small_grey" href="category.php?cid=1&l=ru">Other</a></li>
<li><a class="body_link_small_grey" href="category.php?cid=2&l=ru">Disk</a></li>
<li><a class="body_link_small_grey" href="category.php?cid=5&l=ru">Multimedia</a></li>
<li><a class="body_link_small_grey" href="category.php?cid=7&l=ru">Utils</a></li>
<li><a class="body_link_small_grey" href="category.php?cid=9&l=ru">Arc</a></li>
<li><a class="body_link_small_grey" href="category.php?cid=13&l=ru">Language</a></li>
<li><a class="body_link_small_grey" href="category.php?cid=14&l=ru">Arc.FMTmodule</a></li>
<li><a class="body_link_small_grey" href="category.php?cid=16&l=ru">Macro</a></li>
<li><a class="body_link_small_grey" href="category.php?cid=17&l=ru">Calc</a></li>
<li><a class="body_link_small_grey" href="category.php?cid=20&l=ru">Games</a></li>
<li><a class="body_link_small_grey" href="category.php?cid=21&l=ru">Network</a></li>
<li><a class="body_link_small_grey" href="category.php?cid=22&l=ru">Email</a></li>
<li><a class="body_link_small_grey" href="category.php?cid=23&l=ru">Printer</a></li>
<li><a class="body_link_small_grey" href="category.php?cid=24&l=ru">Fido</a></li>
<li><a class="body_link_small_grey" href="category.php?cid=25&l=ru">DBase</a></li>
<li><a class="body_link_small_grey" href="category.php?cid=26&l=ru">Converter</a></li>
<li><a class="body_link_small_grey" href="category.php?cid=27&l=ru">Search</a></li>
<li><a class="body_link_small_grey" href="category.php?cid=37&l=ru">Colors</a></li>
<li><a class="body_link_small_grey" href="category.php?cid=38&l=ru">Mouse</a></li>
<li><a class="body_link_small_grey" href="category.php?cid=40&l=ru">Scripts</a></li>
<li><a class="body_link_small_grey" href="category.php?cid=46&l=ru">Mobile</a></li>
<li><a class="body_link_small_grey" href="category.php?cid=47&l=ru">TC.Packers</a></li>
<li><a class="body_link_small_grey" href="category.php?cid=48&l=ru">Launcher.Addons</a></li>
<li><a class="body_link_small_grey" href="category.php?cid=49&l=ru">TC.Wlx</a></li>
</ul>
</li>
<li><a href="category.php?cid=11&l=ru">System</a>
<ul>
<li><a class="body_link_small_grey" href="category.php?cid=42&l=ru">System.Fonts</a></li>
</ul>
</li>
<li><a href="category.php?cid=18&l=ru">Viewer</a></li>
</ul>
CSS:
Code: Select all
fieldset {
border:0;
margin:0;
padding:0;
}
label {
font-weight: bold;
}
fieldset img {
}
ul {
float:left;
width: 100%;
clear:both;
}
ul, li {
list-style: none;
margin:0;
padding:0;
}
li {
color: #525556;
padding: 5px;
vertical-align: middle;
width: 31%;
min-width: 150px;
max-width: 600px;
margin:1%;
float:left;
box-sizing: border-box;
border: 1px dashed;
border-radius: 5px;
}
li > ul {
float:none;
width: auto;
clear:none;
}
li > ul li {
display: inline;
outline: none;
float:none;
margin:0;
padding:0;
border:0;
}
Цвета не подгонял. Поле поиска перевёл в fieldset, но не стилизовал вообще. По хорошему, списки надо заклассить, и работать с классами.
> Как будто я ее туда руками положил. Хотя согласен, с таблицами там не все здорово, в CSS будем переезжать активнее.
<a> не имеет атрибута valign (вообще, valign относится только к табличным элементам, даже в HTML 4.0)
PS: может, раз такое дело — перетрясти структуру категорий? Привести к единому знаменателю Editor.*, к примеру.