Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Верстка меню

Автор: Itsys 18.11.2008, 16:18

Добрый день,

Можно ли заменить данную "табличную" верстку:

Код


<table width="300px" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td>
        <a href="#" style="border:1px solid; display:block; background-color: #FFFF00">Атласы, путеводители, энциклопедии</a></td>
        <td align="center" width="15" valign="center"><a href="#">&gt;</a></td>
    </tr>
    <tr>
        <td><a href="#" style="border:1px solid; display:block; background-color: #FFFF00">Военное дело. Военная наука. История войн</a></td>
        <td align="center" width="15" valign="center"><a href="#">&gt;</a></td>
    </tr>
</table>

на не табличную? Пробовал детлать так:

Код


<div style="float: left; margin-right:-15px; width:100%;">
   <a href="#" style="border:1px solid; margin-right:15px; display:block; background-color: #FFFF00">Атласы, путеводители, энциклопедии</a>
</div>
<a style="float: right; display:block; width: 13px;border:1px solid; ">&gt;</a>
<div style="float: left; margin-right:-15px; width:100%;">
   <a href="#" style="border:1px solid; margin-right:15px; display:block; background-color: #FFFF00">Военное дело. Военная наука. История войн</a>
</div>
<a style="float: right; display:block; width: 13px;border:1px solid;">&gt;</a>

Вполне нормально, но нижний ">" никак не удается поставить вертикально по середине....

Автор: webster 18.11.2008, 20:11

По середине вы его сможете поставить только если зададите у <a> объявленного у вас элементом уровня блока высоту и межстрочное расстояние сравнимое с ней:

Код


<a style="float: right; display:block; width: 13px;border:1px solid; height: 13px; line-height: 13px;">&gt;</a>

или же просто line-height но в значение, заведомо большее текущей высоты элемента, например line-height: 2em;

Автор: Itsys 18.11.2008, 21:18

Этому мешает 2 обстоятельства:
1. Резиновый дизайн, т.е. нельзя точно сказать сколько будет строк в каждом элементе, но даже, если зафиксировать колонку, то

2. Список берется из БД и все элементы разной длины, могут редактироваться пользователем и не угадаешь сколько строк займет элемент...

Автор: webster 18.11.2008, 21:28

Тогда проще его сделать картинкой и положить бэкгроундом для <a> с текстом. И потом, стрелка не должна указывать ровно на середину двух(трех и т.д.) строчного пункта меню, гораздо аккуратнее меню будет выглядеть если стрелка будет всегда указывать на первую строчку.

Есть и такой вариант:

Код


<div style="float: left; margin-right:-15px; width:100%; position: relative;">
   <a href="#" style="border:1px solid; margin-right:15px; display:block; background-color: #FFFF00">Военное дело. Военная наука. История войн</a>
<a style="display:block; width: 13px;border:1px solid; height: 1em; margin-top: -0.5em; position: absolute; top: 50%; left: 0px;">&gt;</a>
</div>

Автор: Itsys 18.11.2008, 22:34

Цитата(webster @ 18.11.2008, 21:28

)

Тогда проще его сделать картинкой и положить бэкгроундом для <a> с текстом

Нельзя, т.к. реакция (JS) должна быть разная на подведение к стрелке и к сылке...

Цитата(webster @ 18.11.2008, 21:28

)

Есть и такой вариант:
<div style="float: left; margin-right:-15px; width:100%; position: relative;">
<a href="#" style="border:1px solid; margin-right:15px; display:block; background-color: #FFFF00">Военное дело. Военная наука. История войн</a>
<a style="display:block; width: 13px;border:1px solid; height: 1em; margin-top: -0.5em; position: absolute; top: 50%; left: 0px;">></a>
</div>

В этом случае стрелка уезжает влево....

Вот так будет правильно:

Код


<div style="float: left; margin-right:-15px; width:100%; position: relative;">
   <a href="#" style="border:1px solid; margin-right:15px; display:block; background-color: #FFFF00">Военное дело. Военная наука. История войн</a>
<a style="display:block; width: 13px;border:1px solid; height: 1em; margin-top: -0.5em; position: absolute; top: 50%; left: 100%; margin-left:-8px">&gt;</a>
</div>