Виджеты (HTML-код) добавление меню с помощью таблицы
-
Пытаюсь добавить в колонку с виджетами HTML-код таблицы, которая будет выполнять роль меню. Смысл в том чтобы в нужном месте получились серые кнопочки с текстом, который должен накладываться сверху на саму кнопочку.
<table width="176">
<tbody>
<tr>
<td style="background: url('http://studiosikh.files.wordpress.com/2013/02/menu.png') repeat scroll 0 0 transparent; text-align: center;" height="43"><span style="color: #ffffff; position: relative; bottom: -12px;">Contacts</span></td>
</tr>
<tr>
<td style="background: url('http://studiosikh.files.wordpress.com/2013/02/menu.png') repeat scroll 0 0 transparent; text-align: center;" height="43"><span style="color: #ffffff; position: relative; bottom: -12px;">Info</span></td>
</tr>
<tr>
<td style="background: url('http://studiosikh.files.wordpress.com/2013/02/menu.png') repeat scroll 0 0 transparent; text-align: center;" height="43"><span style="color: #ffffff; position: relative; bottom: -12px;">Info</span></td>
</tr>
<tr>
<td style="background: url('http://studiosikh.files.wordpress.com/2013/02/menu.png') repeat scroll 0 0 transparent; text-align: center;" height="43"><span style="color: #ffffff; position: relative; bottom: -12px;">Info</span></td>
</tr>
</tbody>
</table>
С этим кодом возник ряд проблем. Когда таблица проверялась на странице «новая запись» всё было нормально. Но как только код был перенесен в колонку с виджетами текст сместился с центра в верх а расстояние между кнопками пропало. Чтобы вернуть текст в середину пришлось добавить position: relative; bottom: -12px; Кроме того, wordpress автоматически добавил в код это: repeat scroll 0 0 transparent;
И ещё одна проблема, при изменении размеров окна всё содержимое колонки как положено меняет свой размер, всё кроме этой таблицы.Какие изменения нужно внести в код, чтобы решить эти проблемы?
Или, если возможно, подскажите альтернативный вариант решения задачи.Вопрос касается блога (видны только вошедшим пользователям).
-
А если как-то так?
-
<li style="list-style-type: none; background: url('http://studiosikh.files.wordpress.com/2013/02/menu.png'); text-align: center; height: 43; width: 176;"><span style="color: #ffffff; position: relative; top: 10px; ">Contacts</span>
<li style="list-style-type: none; background: url('http://studiosikh.files.wordpress.com/2013/02/menu.png'); text-align: center; height: 43; width: 176;"><span style="color: #ffffff; position: relative; top: 10px; ">Contacts</span> -
-
-
<li style="list-style-type: none; background: url('http://studiosikh.files.wordpress.com/2013/02/menu.png'); text-align: center; height: 43; width: 176;"><span style="color: #ffffff; position: relative; top: 10px; ">Contacts</span>
<li style="list-style-type: none; background: url('http://studiosikh.files.wordpress.com/2013/02/menu.png'); text-align: center; height: 43; width: 176;"><span style="color: #ffffff; position: relative; top: 10px; ">Contacts</span> -
Что-то не получается здесь весь код выложить. Оставляю временный пост для Вас http://isuppu.wordpress.com/2013/02/04/code/
-
Спасибо большое что взялись мне помочь.
Я попробовала Ваш код, но проблемы остались те же((
Кнопочки всё равно слипаются когда попадают в виджеты.
И проблема с уменьшением размера окна осталась (аватарка и баннеры уменьшаются а кнопочки нет)
Может есть ещё какой-нибудь способ? -
Специально пробовал этот код в виджете — вроде все нормально (и расстояния между «кнопками» и корректное изменение размера). Вот так выглядит результат.
-
Ничего не понимаю…
Тогда почему у меня получается так? (см. внизу колонки с виджетами) -
Протестировал на Вашей теме, дело оказалось именно в ней. Проблему с растояниями между «кнопками» можно решить так: либо использовать между двумя блоками li тег p (но тогда расстояние получается фиксированного размера и может не соответствовать Вашим задачам); либо использовать еще один блок li, который позволит Вам выбрать произвольное значение.
<li style="list-style-type:none;height:4px;"></li> -
И да, с масштабированием в любом случае все в порядке. Вот реализация в Вашей теме. Возможно, я как-то превратно понимаю Ваши слова «аватарка и баннеры уменьшаются а кнопочки нет».
-
Вы навели меня на мысль.
Дело было в фиксированной ширине, от этого кнопочки и не уменьшались. Если исправить код на:<li style="list-style-type:none;background:url('http://studiosikh.files.wordpress.com/2013/02/menu.png');text-align:center;height:43px;"><span style="color:#ffffff;position:relative;top:10px;">Contacts</span>
<li style="list-style-type:none;height:4px;">
<li style="list-style-type:none;background:url('http://studiosikh.files.wordpress.com/2013/02/menu.png');text-align:center;height:43px;"><span style="color:#ffffff;position:relative;top:10px;">Contacts</span>
то всё становится на свои места. А если добавить (background-repeat:no-repeat;) то получится правильная ширина картинки. Правда в этом случае текст немного съезжает в бок.
Возможно ли заставить текст быть всё время в центре картинки?
Или лучше переделать весь блок с виджетами под новый размер? -
Текст и остается по центру. Это ширина растягивается, чем разваливает компоновку. Посмотрите на примере. Оба варианта кода последовательно применены и в виджете и в посте. Наглядно видно, что происходит с шириной при постепенном изменении размера окна. А после перехода разметки к одной колонке об варианта «кнопок» (и в виджете и в посте) становятся одинаковыми.
-
Понятно. Текст позиционируетя по центру блока, а не по центру картинки.
Если задать фиксированную ширину как в верхнем примере, то при постепенном изменении размера окна кнопочки будут выезжать из композиции.
Думаю проще переделать весь блок под вариант без фиксированной ширины.Спасибо за помощь.
-
- Форум «Виджеты (HTML-код) добавление меню с помощью таблицы» закрыт для новых ответов.
Форумы поддержки 
