Кнопка сползает за шапку?

Question

[rat_fucker]

Была обычная кнопка:

<button class="btn btn-primary" onclick="window.location.href='/user_blog_entry.php';" style="cursor: pointer;">Написать в дневник!</button>

Я решил добавил фон кнопке через css:

.btn {
background: url() no-repeat;
width: 100px;
height: 100px;
border: none;
}

Однако она вылезла за границы шапки. Что добавить, чтобы она не сползала вниз, а скейлилась в шапке, либо же росла вверх?

Comments

[Модератор]

rat_fucker дорогой пользователь, настоятельно рекомендуем еще раз обратить самое пристальное внимание на п. 3.1 регламента работы сервиса (и, в особенности, на его последний абзац). В противном случае, ваши вопросы будут удаляться по причине тег-спама, а систематические нарушения приведут к блокировке учетной записи.

Answer 1

[Александр Осадчий]

Вы же кнопке размеры задали, вот она и потянула шапку...

Если хотите кнопку поднять вверх с текущими размерами, тогда так:

.btn {
background: url() no-repeat;
width: 100px;
height: 100px;
border: none;
position: relative;
transform: translateY(-50%);
}

P.S У вас там ну очень жесткая верстка..тьма ошибок, а шапка поплыла, потому что у вас в этом классе задана высота:

div.top_menu_link_container, div.top_menu_link_container_end {
    float: left;
    height: 31px;
}

Уберите высоту, и шапка станет выше

Comments

[rat_fucker]

точно, как я не додумался до трансформ... спасибо огромное! а насчёт шапки: её размер можно уменьшить или увеличить в зависимости от размера лого (считай, телевизора) :)