Перейти к публикации

Вопрос

Доброго вечер народ! Хотел бы спросить, как мне баннер с двумя кнопочками адаптировать?

Наковырял вручную код и css(скопипастен код, сделал под себя), вроде гуд работает, осталось только адаптировать нормально, сколько сам ковырял, так и не догнал как сделать...

Сам css:

#LI_1 {
    background-position: 50% 50%;
    bottom: 0px;
    box-sizing: border-box;
    color: rgb(20, 20, 20);
    height: 300px;
    left: 0px;
    overflow-wrap: break-word;
    position: relative;
    right: 0px;
    text-decoration: none solid rgb(20, 20, 20);
    text-size-adjust: 100%;
    top: 0px;
    width: 1320px;
    column-rule-color: rgb(20, 20, 20);
    perspective-origin: 590.016px 150.961px;
    transform-origin: 590.016px 150.973px;
    caret-color: rgb(20, 20, 20);
    background: rgb(224, 224, 224) url("http://blackrussia.pw/uploads/set_resources_21/50201377_-1300--301.png") repeat scroll 50% 50% / cover padding-box border-box;
    border-top: 0.984375px solid rgb(223, 223, 223);
    border-right: 0.984375px solid rgb(216, 216, 216);
    border-bottom: 0.984375px solid rgb(203, 203, 203);
    border-left: 0.984375px solid rgb(216, 216, 216);
    border-radius: 15px 15px 15px 15px;
    font: normal normal 400 normal 14px / 19.6px "Segoe UI", "Helvetica Neue", Helvetica, Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", sans-serif;
    list-style: none outside none;
    margin: auto;
    outline: rgb(20, 20, 20) none 0px;
    padding: 299.977px 0px 0px;
}/*#LI_1*/

#LI_1:after {
    clear: both;
    color: rgb(20, 20, 20);
    display: table;
    height: 0px;
    overflow-wrap: break-word;
    text-decoration: none solid rgb(20, 20, 20);
    text-size-adjust: 100%;
    width: 0px;
    column-rule-color: rgb(20, 20, 20);
    perspective-origin: 0px 0px;
    transform-origin: 0px 0px;
    caret-color: rgb(20, 20, 20);
    border: 0px none rgb(20, 20, 20);
    border-radius: 0 0 0 0;
    font: normal normal 400 normal 14px / 19.6px "Segoe UI", "Helvetica Neue", Helvetica, Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", sans-serif;
    list-style: none outside none;
    outline: rgb(20, 20, 20) none 0px;
}/*#LI_1:after*/

#LI_1:before {
    color: rgb(20, 20, 20);
    display: table;
    height: 0px;
    overflow-wrap: break-word;
    text-decoration: none solid rgb(20, 20, 20);
    text-size-adjust: 100%;
    width: 0px;
    column-rule-color: rgb(20, 20, 20);
    perspective-origin: 0px 0px;
    transform-origin: 0px 0px;
    caret-color: rgb(20, 20, 20);
    border: 0px none rgb(20, 20, 20);
    border-radius: 0 0 0 0;
    font: normal normal 400 normal 14px / 19.6px "Segoe UI", "Helvetica Neue", Helvetica, Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", sans-serif;
    list-style: none outside none;
    outline: rgb(20, 20, 20) none 0px;
}/*#LI_1:before*/

#DIV_2 {
    box-sizing: border-box;
    color: rgb(20, 20, 20);
    height: 19.9688px;
    overflow-wrap: break-word;
    text-align: left;
    text-decoration: none solid rgb(20, 20, 20);
    text-size-adjust: 100%;
    width: 1178.06px;
    column-rule-color: rgb(20, 20, 20);
    perspective-origin: 589.031px 9.98438px;
    transform-origin: 589.031px 9.98438px;
    caret-color: rgb(20, 20, 20);
    border: 0px none rgb(20, 20, 20);
    border-radius: 0 0 0 0;
    font: normal normal 400 normal 14px / 19.6px "Segoe UI", "Helvetica Neue", Helvetica, Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", sans-serif;
    list-style: none outside none;
    outline: rgb(20, 20, 20) none 0px;
    padding: 10px;
}/*#DIV_2*/

#DIV_2:after {
    color: rgb(20, 20, 20);
    overflow-wrap: break-word;
    text-align: left;
    text-decoration: none solid rgb(20, 20, 20);
    text-size-adjust: 100%;
    column-rule-color: rgb(20, 20, 20);
    caret-color: rgb(20, 20, 20);
    border: 0px none rgb(20, 20, 20);
    border-radius: 0 0 0 0;
    font: normal normal 400 normal 14px / 19.6px "Segoe UI", "Helvetica Neue", Helvetica, Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", sans-serif;
    list-style: none outside none;
    outline: rgb(20, 20, 20) none 0px;
}/*#DIV_2:after*/

#DIV_2:before {
    color: rgb(20, 20, 20);
    overflow-wrap: break-word;
    text-align: left;
    text-decoration: none solid rgb(20, 20, 20);
    text-size-adjust: 100%;
    column-rule-color: rgb(20, 20, 20);
    caret-color: rgb(20, 20, 20);
    border: 0px none rgb(20, 20, 20);
    border-radius: 0 0 0 0;
    font: normal normal 400 normal 14px / 19.6px "Segoe UI", "Helvetica Neue", Helvetica, Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", sans-serif;
    list-style: none outside none;
    outline: rgb(20, 20, 20) none 0px;
}/*#DIV_2:before*/

#A_3 {
    bottom: 5px;
    box-sizing: border-box;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    color: #ffffff;
    display: block;
    height: 40px;
    left: 9.98438px;
    letter-spacing: -1px;
    overflow-wrap: break-word;
    position: absolute;
    right: 903.094px;
    text-align: center;
    text-decoration: none solid rgb(37, 119, 177);
    text-size-adjust: 100%;
    top: 215.016px;
    width: 235px;
    column-rule-color: rgb(37, 119, 177);
    perspective-origin: 124.992px 19.9922px;
    transform-origin: 124.992px 19.9922px;
    caret-color: rgb(37, 119, 177);
    background: linear-gradient(to right, #ff5858, #f09819, #ff5858);
    border: 0px none rgb(37, 119, 177);
    border-radius: 10px 10px 10px 10px;
    font: normal normal 700 normal 20px / 40px Cuprum;
    list-style: none outside none;
    margin: 0px 0px 40px 200px;
    outline: rgb(37, 119, 177) none 0px;
    transition: all 0.5s ease 0s;
}/*#A_3*/

#A_3:after {
    color: rgb(37, 119, 177);
    letter-spacing: -1px;
    overflow-wrap: break-word;
    text-align: center;
    text-decoration: none solid rgb(37, 119, 177);
    text-size-adjust: 100%;
    column-rule-color: rgb(37, 119, 177);
    caret-color: rgb(37, 119, 177);
    border: 0px none rgb(37, 119, 177);
    border-radius: 0 0 0 0;
    font: normal normal 700 normal 20px / 40px "Segoe UI", "Helvetica Neue", Helvetica, Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", sans-serif;
    list-style: none outside none;
    outline: rgb(37, 119, 177) none 0px;
}/*#A_3:after*/

#A_3:before {
    color: rgb(37, 119, 177);
    letter-spacing: -1px;
    overflow-wrap: break-word;
    text-align: center;
    text-decoration: none solid rgb(37, 119, 177);
    text-size-adjust: 100%;
    column-rule-color: rgb(37, 119, 177);
    caret-color: rgb(37, 119, 177);
    border: 0px none rgb(37, 119, 177);
    border-radius: 0 0 0 0;
    font: normal normal 700 normal 20px / 40px "Segoe UI", "Helvetica Neue", Helvetica, Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", sans-serif;
    list-style: none outside none;
    outline: rgb(37, 119, 177) none 0px;
}/*#A_3:before*/

#A_4 {
    bottom: 5px;
    box-sizing: border-box;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    color: #ffffff;
    display: block;
    height: 39.9844px;
    left: 9.98438px;
    letter-spacing: -1px;
    overflow-wrap: break-word;
    position: absolute;
    right: 728.086px;
    text-align: center;
    text-decoration: none solid rgb(37, 119, 177);
    text-size-adjust: 100%;
    top: 215.016px;
    width: 150px;
    column-rule-color: rgb(37, 119, 177);
    perspective-origin: 75px 19.9922px;
    transform-origin: 75px 19.9922px;
    caret-color: rgb(37, 119, 177);
    background: linear-gradient(to right, #ff5858, #f09819, #ff5858);
    border: 0px none rgb(37, 119, 177);
    border-radius: 10px 10px 10px 10px;
    font: normal normal 700 normal 20px / 40px Cuprum;
    list-style: none outside none;
    margin: 0px 0px 40px 490px;
    outline: rgb(37, 119, 177) none 0px;
    transition: all 0.5s ease 0s;
}/*#A_4*/

#A_4:after {
    color: rgb(37, 119, 177);
    letter-spacing: -1px;
    overflow-wrap: break-word;
    text-align: center;
    text-decoration: none solid rgb(37, 119, 177);
    text-size-adjust: 100%;
    column-rule-color: rgb(37, 119, 177);
    caret-color: rgb(37, 119, 177);
    border: 0px none rgb(37, 119, 177);
    border-radius: 0 0 0 0;
    font: normal normal 700 normal 20px / 40px "Segoe UI", "Helvetica Neue", Helvetica, Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", sans-serif;
    list-style: none outside none;
    outline: rgb(37, 119, 177) none 0px;
}/*#A_4:after*/

#A_4:before {
    color: rgb(37, 119, 177);
    letter-spacing: -1px;
    overflow-wrap: break-word;
    text-align: center;
    text-decoration: none solid rgb(37, 119, 177);
    text-size-adjust: 100%;
    column-rule-color: rgb(37, 119, 177);
    caret-color: rgb(37, 119, 177);
    border: 0px none rgb(37, 119, 177);
    border-radius: 0 0 0 0;
    font: normal normal 700 normal 20px / 40px "Segoe UI", "Helvetica Neue", Helvetica, Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", sans-serif;
    list-style: none outside none;
    outline: rgb(37, 119, 177) none 0px;
}/*#A_4:before*/

Четсно говоря, я понимаю что в этом коде много лишнего.. Может подскажете до какого момента его сократить?

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Рекомендованные сообщения

  • 0

Приветствуем вас на IPSGURU.RU

Напоминаем вам.
При создание темы загружайте скриншот на форум!

3.png


Важно знать!
В вашем названии темы должно быть указано само название проблемы, к примеру если проблема с устаревшим стилем (Помогите обновить стиль).

Нюансы после регистрации
1) Нужно указать адрес вашего форума только ваш что бы из вас не вытягивали эту информацию.
2) Нужно указать ваш хостинг где стоит форум.
3) Нужно указать версию php что стоит на хостинге для вашего форума 
 

С Уважением Команда проекта IPSGURU.RU

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

@JeyLie как выглядит это баннер, откуда рипнул?

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

@.V.I.P.В ЛС отписал

Изменено пользователем JeyLie

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

@JeyLie Который баннер в самом верху?

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

@.V.I.P. Ага, я пробовал кстати прописывать auto по ширине и 100% по высоте, и да адаптивно, только картинка баннера по середке обрезается. А хотелось бы чтобы баннер сжался пропорционально что-ли. А у них на сайте вообще интересно. При уменьшении картинки - "Добрый день" исчезает, а остальные слова растягиваются по баннеру что-ли.. Я то себе слова на картинке отрисовал...

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

@.V.I.P. Не подскажешь как ты сделал? что не так в моем css?

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

@JeyLie Подскажу, просто отходил не выложил.

CSS

.notices.notices--block .notice {
    margin-bottom: 5px;
}
.notices--block .notice {
    font-size: 14px;
    border-radius: 4px;
}
.welcomeSectionNY {
    position: relative;
    background: #e0e0e0 url(https://sun3-2.userapi.com/c636731/v636731701/348e8/9sY5QXA_yqo.jpg);
    height: 0;
    padding-top: 25.423%;
    background-size: cover;
    background-position: center;
}
.notice {
    position: relative;
    border-width: 1px;
    border-style: solid;
    border-top-color: #dfdfdf;
    border-right-color: #d8d8d8;
    border-bottom-color: #cbcbcb;
    border-left-color: #d8d8d8;
}
.notices {
    list-style: none;
    margin: 0;
    padding: 0;
}
.notice:after {
    clear: both;
}
.notice:before, .notice:after {
    content: " ";
    display: table;
}
.notice-content {
    padding: 10px;
}
.notices--block .notice {
    font-size: 14px;
    border-radius: 4px;
}
.sharebut:hover {
    box-shadow: 0 0 30px #fff;
    text-decoration: none;
    bottom: 15px;
    color: #2577b1;
}
.sharebut {
    color: #2577b1;
    width: 250px;
    height: 40px;
    font-size: 20px;
    background: #fff;
    border-radius: 5px;
    position: absolute;
    bottom: 5px;
    transition: 0.5s;
    text-align: center;
    line-height: 40px;
    margin-bottom: 40px;
    margin-left: 15px;
    font-weight: bold;
    letter-spacing: -1px;
}
.aboutbut:hover {
    box-shadow: 0 0 30px #fff;
    text-decoration: none;
    bottom: 15px;
    color: #2577b1;
}
.aboutbut {
    color: #2577b1;
    width: 150px;
    height: 40px;
    font-size: 20px;
    background: #fff;
    border-radius: 5px;
    position: absolute;
    bottom: 5px;
    transition: 0.5s;
    text-align: center;
    line-height: 40px;
    margin-bottom: 40px;
    margin-left: 290px;
    font-weight: bold;
    letter-spacing: -1px;
}
.sharebut:hover {
    box-shadow: 0 0 30px #fff;
    text-decoration: none;
    bottom: 15px;
    color: #2577b1;
}
@media only screen and (max-width: 650px) {
.welcomeSectionNY {
    position: relative;
    background: url(https://sun3-2.userapi.com/c636731/v636731701/348e8/9sY5QXA_yqo.jpg);
    height: 0;
    padding-top: 25.423%;
    background-size: cover;
    background-position: center;
	}
}
@media screen and (max-width: 450px) and (min-width: 300px) {
.aboutbut {
    width: 65px;
    height: 15px;
    font-size: 10px;
    line-height: 15px;
    margin-bottom: 2px;
    margin-left: 125px;
	}
}
@media screen and (max-width: 450px) and (min-width: 300px) {
.sharebut {
    width: 115px;
    height: 15px;
    font-size: 10px;
    line-height: 15px;
    margin-bottom: 2px;
    margin-left: -4px;
	}
}

HTML

<ul class="notices notices--block">
<li class="notice welcomeSectionNY">
<div class="notice-content">			
<a href="https://gtamaster.ru" class="sharebut">GTAMASTER</a>
<a href="https://gtamaster.ru" class="aboutbut">О ПРОЕКТЕ</a>
		</div>
	</li>	
		</ul>

 

  • Лайк 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

@.V.I.P. Благодарю! css как изменился..)

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

@.V.I.P. Все-таки обрубает от картинку почти по середине.. Не то выходит..

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

@JeyLie у тебя простая картинка .png

JPEG (он же JPG) — это фор­мат изоб­ра­же­ний, кото­рый исполь­зует сжа­тие с поте­рями и не под­дер­жи­вает про­зрач­но­сть. Поз­во­ляет настра­и­вать уро­вень каче­ства сохра­ня­е­мого изоб­ра­же­ния — при его снижении удаляются детали и добав­ля­ются шумы на изоб­ра­же­ние, однако раз­мер ста­но­вится более компактным.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Присоединяйтесь к обсуждению

Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.

Guest
Ответить на вопрос...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.


  • Сейчас на странице   0 пользователей

    Нет пользователей, просматривающих эту страницу.

×
×
  • Создать...