Обратиться с вопросом

Адаптивный футер и битва с логотипом

07.03.2016

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

Довольно быстро я выправил блоки в хедере так же, как и в футере. Личный кабинет и телефон сделал отдельными дивами, но в одной группе. Принялся за логотип и название и.. обломался.

С текстом получилось сразу, а вот изображение постоянно скакало. Я уже все облазил, в поисках адекватного решения с размером картинки под разные разрешения экрана. Все в упор советуют javaScript, а я его еще не умею, и не верю, что это единственное решение.

Моя прекрасная Д. как всегда помогла своим советом, и загадка была решена. Результат на видео:

Итоговый хедер такой:

.header {

width:100%;

height:7%;

background-color: #2F4F4F;

/*background: url(’images/d_header_bg.jpg’);*/

position:fixed; /*Зафиксировал хедер*/

left:0px;

top:0px;

display: inline-block;

vertical-align: middle;

text-align: center;

font-size: 4vw;

font-size: 4vh;

font-size: 3vmin;

color: #ffffff;

}

.top_logo {

max-width:25%;

margin: 0.2% 0% 0% 6.5%;

float:left;

}

.top_logo_batt img {

position: absolute;

left: 2%;

top: 28%;

width:5%;

min-width: 5%;

z-index: 200;

}

.top_logo_title {

float:left;

}

.top_logo_title a {

color:#FFFFFF;

text-decoration: none;

}

.header_right {

width:33%;

margin: 0.5% 2% 0% 0%;

float:right;

}

.phone {

margin-right: 3%;

max-width:35%;

float:right;

}

.phone a {

color:#FFFFFF;

text-decoration: none;

}

.personal_c {

max-width:40%;

float: right;

}

.personal_c a {

color: #ffffff;

}


Вернуться ко всем статьям

Есть вопрос или предложение ?
Заполни форму ниже

Это поле обязательно для заполнения
Введён некорректный e-mail
Текст сообщения
Это поле обязательно для заполнения