VPF::Верстка меню - Форум программистов

Itsys

Дата 18.11.2008, 16:18 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1338
Регистрация: 21.1.2008
Где: г. Москва

Репутация: 9
Всего: 34

Добрый день,

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

Код


<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>

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

Это сообщение отредактировал(а) Itsys - 18.11.2008, 16:19

webster

Дата 18.11.2008, 20:11 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 361
Регистрация: 1.1.2007

Репутация: 34
Всего: 34

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

Код


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

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

Это сообщение отредактировал(а) webster - 18.11.2008, 20:13

Itsys

Дата 18.11.2008, 21:18 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1338
Регистрация: 21.1.2008
Где: г. Москва

Репутация: 9
Всего: 34

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

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

webster

Дата 18.11.2008, 21:28 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 361
Регистрация: 1.1.2007

Репутация: 34
Всего: 34

Тогда проще его сделать картинкой и положить бэкгроундом для <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>

Это сообщение отредактировал(а) webster - 18.11.2008, 21:50

Itsys

Дата 18.11.2008, 22:34 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1338
Регистрация: 21.1.2008
Где: г. Москва

Репутация: 9
Всего: 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>

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »