ortegas

Alkoshenko, извините, что я зануда, кой думает о чистоте кода и валидности, но смотрите:

http://imglink.ru/show-image.php?id=ffa7ccd4b543f7f0a90ebb8011dd6905

Правда просто и чисто? Такой код любой пользователь сможет отредактировать. В эти блоки вставляйте что хотите, вместо div'а может и ul быть, li можно добавить перед a. Юзайте. Для бордера вот:

ul {owerflow: hidden;}

li {

border-bottom: solid 1px black;

position: relative;

bottom: -2px; }

Я просто не хочу, чтобы потом на ваш сайт говорили "Гс", и-за того, что там тонна кода, и она одно с другим в реакцию вступает.

Вместо ul, советую использовать nav и html5 DOCTYPE.

ortegas добавил 16.01.2011 в 00:33

vandamme, ваш вариант неработоспособен.. http://imglink.ru/show-image.php?id=a4074fd04bfcbe3ee5446a6745a06f48

Alkoshenko, сейчас все напишу и залью к себе на сервер, подождите.

Для полосок так:

ul {owerflow: hidden;}

li {

border-bottom: solid 1px black;

position: relative;

bottom: -2px; }

vandamme, без сброса и в 6 и в 7. Зачем применять float, если inline-block спасет. inline-block по факту делает ul инлайновым, те не переносит его, а li уже идут блочные. Единственная трабла, это то, что блоки упадут вниз, но vertical-align: top все поправит. Могу скинуть примеры в ЛС, просто зачем писать тону кода, если можно стандартными средствами реализовать.

snk001, ul элементы блочные и ширина не поможет.. Тем более ширина для всех сразу ul указана, а не для общего у вас. li с флоатом - бред, каждый раз будет применятсо флоат, тем сама переносить на одну строчку вниз. Сброс спасет, но это не кросбраузерно и не верно.

<div>

<ul>

<li><a href="#" title="Photoshop">Главная</a></li>

<li><a href="#" title="Flash">История Белоруси</a></li>

<li><a href="#" title="Статьи">Всемирная история</a></li>

<li><a href="#" title="Шаблоны сайтов">Контакты</a></li>

<li><a href="#" title="Шаблоны сайтов">О сайте</a></li>

</ul>

<ul>

<li><a href="#" title="Photoshop">Главная</a></li>

<li><a href="#" title="Flash">История Белоруси</a></li>

<li><a href="#" title="Статьи">Всемирная история</a></li>

<li><a href="#" title="Шаблоны сайтов">Контакты</a></li>

<li><a href="#" title="Шаблоны сайтов">О сайте</a></li>

</ul>

<ul>

<li><a href="#" title="Photoshop">Главная</a></li>

<li><a href="#" title="Flash">История Белоруси</a></li>

<li><a href="#" title="Статьи">Всемирная история</a></li>

<li><a href="#" title="Шаблоны сайтов">Контакты</a></li>

<li><a href="#" title="Шаблоны сайтов">О сайте</a></li>

</ul>

</div>

ul {diplay: inline-block; vertical-align: top; margin: 0 30px;}

li {display: block; padding: 4px 0;}

Так пробовал? Зачем делать лишние классы?

ortegas добавил 16.01.2011 в 00:00

vandamme, В ишаке будет трабла с флоатом.. те еще и clear: both надо писать.. Намного лучше inline-block использовать.

ul {diplay: inline-block; vertical-align: top;}

li {display: block; padding: 4px 0;}

1ncom1ng, ок, только тихо 😎

Большое спасибо. 10 человек есть, но не все могут работать и не каждый умеет быть минималистом :). Обращайтесь пожалуйста ешче! :)

Дизайн хорош. Желаю быстренько и без заморочки продать.

Диван - :).