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

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

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;

}


Комментарии

Подскажите, где можно подробнее почитать о GoogleDataStudio ?

Ответить
Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке
Закрыть

Документация здесь https://datastudio.google.com/, и мы уже умеем дружить GoogleDataStudio и Планфикс

Спасибо!

Автор, пиши еще!

Ответить
Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке
Закрыть

Хороший комментарий!

Оставьте свой комментарий

Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке
Вернуться ко всем статьям

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

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