Адаптивный футер и битва с логотипом
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;
}