Виджеты (HTML-код) добавление меню с помощью таблицы

  • Автор
    Записи
  • #1480

    studiosikh
    Участник

    Пытаюсь добавить в колонку с виджетами 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;
    И ещё одна проблема, при изменении размеров окна всё содержимое колонки как положено меняет свой размер, всё кроме этой таблицы.

    Какие изменения нужно внести в код, чтобы решить эти проблемы?
    Или, если возможно, подскажите альтернативный вариант решения задачи.

    Вопрос касается блога studiosikh.wordpress.com.

    #1588

    isuppu
    Участник

    А если как-то так?

    #1589

    isuppu
    Участник

    Внутри ul, разумеется. Почему-то выше его «съело».

    #1590

    isuppu
    Участник

    #1591

    isuppu
    Участник

    Что-то не получается здесь весь код выложить. Оставляю временный пост для Вас http://isuppu.wordpress.com/2013/02/04/code/

    #1593

    studiosikh
    Участник

    Спасибо большое что взялись мне помочь.
    Я попробовала Ваш код, но проблемы остались те же((
    Кнопочки всё равно слипаются когда попадают в виджеты.
    И проблема с уменьшением размера окна осталась (аватарка и баннеры уменьшаются а кнопочки нет)
    Может есть ещё какой-нибудь способ?

    #1594

    isuppu
    Участник

    Специально пробовал этот код в виджете — вроде все нормально (и расстояния между «кнопками» и корректное изменение размера). Вот так выглядит результат.

    #1595

    studiosikh
    Участник

    Ничего не понимаю…
    Тогда почему у меня получается так? (см. внизу колонки с виджетами)

    #1596

    isuppu
    Участник

    Протестировал на Вашей теме, дело оказалось именно в ней. Проблему с растояниями между «кнопками» можно решить так: либо использовать между двумя блоками li тег p (но тогда расстояние получается фиксированного размера и может не соответствовать Вашим задачам); либо использовать еще один блок li, который позволит Вам выбрать произвольное значение.

    <li style="list-style-type:none;height:4px;"></li>

    #1597

    isuppu
    Участник

    И да, с масштабированием в любом случае все в порядке. Вот реализация в Вашей теме. Возможно, я как-то превратно понимаю Ваши слова «аватарка и баннеры уменьшаются а кнопочки нет».

    #1599

    studiosikh
    Участник

    Вы навели меня на мысль.
    Дело было в фиксированной ширине, от этого кнопочки и не уменьшались. Если исправить код на:

    то всё становится на свои места. А если добавить (background-repeat:no-repeat;) то получится правильная ширина картинки. Правда в этом случае текст немного съезжает в бок.
    Возможно ли заставить текст быть всё время в центре картинки?
    Или лучше переделать весь блок с виджетами под новый размер?

    #1600

    isuppu
    Участник

    Текст и остается по центру. Это ширина растягивается, чем разваливает компоновку. Посмотрите на примере. Оба варианта кода последовательно применены и в виджете и в посте. Наглядно видно, что происходит с шириной при постепенном изменении размера окна. А после перехода разметки к одной колонке об варианта «кнопок» (и в виджете и в посте) становятся одинаковыми.

    #1601

    studiosikh
    Участник

    Понятно. Текст позиционируетя по центру блока, а не по центру картинки.
    Если задать фиксированную ширину как в верхнем примере, то при постепенном изменении размера окна кнопочки будут выезжать из композиции.
    Думаю проще переделать весь блок под вариант без фиксированной ширины.

    Спасибо за помощь.

    #1602

    isuppu
    Участник

    Пожалуйста.

The topic ‘Виджеты (HTML-код) добавление меню с помощью таблицы’ is closed to new replies.