Jump to content
  • 0

Помогите доделать простенький код

Ollin

Asked by Ollin,

 Share

Question

Ollin Explorer

Ollin

Posted
Posted

Приветствую всех! Помогите доделать страницу! Собрал с иннета коды и слепил их в html, получился фон и две картинки, дальше не пойму как. Первым делом нужно чтобы фоновая картинка растягивалась под любой экран. У меня получился плавно появляющийся контент, и хочу чтобы фон так же плавно появлялся. И все это дело должно грузиться по очереди - фон, картинка 1, картинка 2. Если не сложно, покажите как это делается, Может тут работы на 5 мин а я уже 2 дня над этим... Я в этом полный ноль, вот код:

 

<html>
<head>
<title>Заголовок</title>
</head>
<style>body.fade{opacity: 0;}body.appear
{opacity: 1;transition: opacity 5s;}</style>
<body style="background: url(images/05WM.jpg);">
<div><p><img src="images/4936c055.jpg" border="0"
style="position: absolute; left: 20px; top: 20px;"</p>
<p><img src="images/4936c055.jpg" border="0"
style="position: absolute; right: 20px; bottom: 20px;"</p>
</div>
<script>document.body.className = 'fade';</script>
<script>setTimeout(function()
{document.body.className = 'appear';}, 0);</script>
</body>
</html>

Link to comment
Share on other sites

31 answers to this question

Recommended Posts

  • 0
Switch74 Rising Star

Switch74

Posted
Posted

фон делаете картинкой img
после берете первый $(img).first() и проверяете загрузился ли он через .load(),

как только загрузится плавно показываете и переходите к следующему .next()

и так далее :)

 

ах, да.... все это на jquery на js будет чуток подругому

Link to comment
Share on other sites
  • 0
Ollin Explorer

Ollin

Posted
  • Author
Posted

фон делаете картинкой img

после берете первый $(img).first() и проверяете загрузился ли он через .load(),

как только загрузится плавно показываете и переходите к следующему .next()

и так далее :)

ах, да.... все это на jquery на js будет чуток подругому

Но я не знаю куда это все тыкать. Как сделать фон картинкой img?, куда влепить эти "first", "load", "next"?, и что в скобках писать?
Link to comment
Share on other sites
  • 0
Switch74 Rising Star

Switch74

Posted
Posted

Если так - это запущенный случай.

Прилично придется почитать. Ключевые слова я дал - все можно легко найти в интернете.
Иначе пробовать искать библиотеки, которые реализуют данный функционал.

 

Фон сделать не через background:url(images/05WM.jpg); а <img src="images/05WM.jpg"> с position:absolute; и растянуть на весь экран как вам нужно.

После вылавливаете первый img и после его загрузки показываете его и переходите к следующему $('img').first().load(function(){$(this).show().next('img')});
сделать все это лучше функцией

function showIMG(img){  $(img).load(function(){    $(this).show();    if($(this).next('img').length)      showIMG($(this).next('img'))  });}

Первый раз вызвать функцию так showIMG($('img').first())

 

Вкратце что-то вроде

Link to comment
Share on other sites
  • 0
Igor Schnaider Contributor

Igor Schnaider

Posted
Posted
function showIMG(img){
    $(img).load(function(){
        $(this).show();
        if($(this).next('img').length)
            showIMG($(this).next('img'))
    });
}

 

А если какая-то картинка загрузится к тому моменту, пока предыдущие не загрузились, onload ведь не сработает?

Link to comment
Share on other sites
  • 0
Switch74 Rising Star

Switch74

Posted
Posted

А вы их скройте через css: img{display:none;}, но вам возможно больше подойдет img{visibility:hidden;}

а load() отработает в любом случае, даже если она уже загружена

http://www.mkyong.com/wp-content/uploads/jQuery/jQuery-check-if-image-loaded.html

вот статейка, может поможет

Link to comment
Share on other sites
  • 0
Igor Schnaider Contributor

Igor Schnaider

Posted
Posted (edited)

Вы предлагаете вариант, когда только после предыдущего изображения (загруженного и показанного, соответственно) вешается обработчик onload на следующее. Но если следующее к тому моменту уже загрузилось, onload не сработает.

 

upd: например, вот так

 

А display: none/block тут не поможет, это не фоновые картинки загружаются.

Edited by Igor Schnaider
Link to comment
Share on other sites
  • 0
Switch74 Rising Star

Switch74

Posted
Posted
Ах, да... забыл один нюанс:
function showIMG(img){  var src = $(img).attr('src');  $(img).attr({'src':''});  $(img).attr({'src':src}).load(function(){    $(this).show();    if($(this).next('img').length)      showIMG($(this).next('img'))  });}

http://codepen.io/anon/pen/yejmzg?editors=1011

Link to comment
Share on other sites
  • 0
Ollin Explorer

Ollin

Posted
  • Author
Posted

Фон сделать не через background:url(images/05WM.jpg); а <img src="images/05WM.jpg"> с position:absolute; и растянуть на весь экран как вам нужно.

С фоном почти разобрался, он теперь тоже плавно появляется и растягивается, но присутствует белая рамка толщиной 3 мм, а так же появилась вертикальная полоса прокрутки и тоже на 3 мм двигается. Где я ошибся?

<body><img src="images/05WM.jpg"; position: absolute; width="100%"; height="100%";>
Link to comment
Share on other sites
  • 0
Ollin Explorer

Ollin

Posted
  • Author
Posted

1. было бы не плохо увидеть саму картинку, а то не всегда требуется width и height указывать

Для теста брал две картинки с разным разрешением, и обе они одинаково отображаються в браузере. Не знаю как сюда картинку добавить, нет тут такой кнопки чтобы загрузить с моего ПК. А "overflow: hidden;" куда вставить, или вместо чего?

Link to comment
Share on other sites
  • 0
Switch74 Rising Star

Switch74

Posted
Posted

картинки можно выложить на http://saveimg.ru/, а здесь ссылки на них написать

<style>html,body{height:100%;}.background{position:absolute;z-index:0;width:100%;height:100%;overflow:hidden;}</style><div class="background"><img src=""></div>

если фон нужен фиксированный, то position:fixed;

Link to comment
Share on other sites
  • 0
sergeys Explorer

sergeys

Posted
Posted

Здравствуйте, помогите кто нибудь разобраться с этим кодом ОБРАТНАЯ СВЯЗЬ ......КОД МЕНЯ ПОЛНОСТЬЮ УСТРАИВАЕТ Я ЕГО САМ ДОРАБОТАЛ И ОН ОЧЕНЬ ДАЖЕ НОРМАЛЬНО ВЫГЛЯДИТ ....ЕДИНСТВЕННОЕ ЧТО МЕНЯ НЕ УСТРАИВАЕТ НЕ ОТПРАВЛЯЮТСЯ ФАЙЛЫ ......Очень прошу кто разбирается посмотреть и доработать код HTML ОБРАТНОЙ СВЯЗИ........С уважением Сергей...............

 

Вот ссылка на сайт   http://vvv.tilmash.com/index.php?option=com_content&view=article&id=48&Itemid=59

 

А ВОТ САМ КОД

 

<style type="text/css">form.simpleForm label{display:block;}form.simpleForm label span{color:#ff0000;}form.simpleForm input.inputtext{width:370px;}form.simpleForm textarea.inputtext{width:370px;height:100px;}form.simpleForm textarea.inputtext_small{width:370px;height:50px;}
</style><p>{element label="ФИО" type="text" class="inputtext"    required="required" error="Введите ваше имя"  /}</p>


</style><p>{element label="Телефон" type="text" class="inputtext"    required="required" error="Введите ваше имя"  /}</p>


</style><p>{element label="Ваш E - mail" type="text" class="inputtext"    required="required" error="Введите ваше имя"  /}</p>


</style><p>{element label="Компания" type="text" class="inputtext"    required="required" error="Введите ваше имя"  /}</p>

</style><p>{element label="Укажите язык" type="text" class="inputtext"    required="required" error="Введите ваше имя"  /}</p>

</style><p>{element label="Перевод на...." type="text" class="inputtext"    required="required" error="Введите ваше имя"  /}</p>

<label for='uploaded_file'>Выберите файл для загрузки :</label>
  <input type="file" name="uploaded_file" id="uploaded_file" >
 
</style><p>{element label="Укажите дату сдачи перевода" type="text" class="inputtext"    required="required" error="Введите ваше имя"  /}</p><p>{element label="Ваше сообщение" type="textarea" class="inputtext"    required="required" error="Введите ваше сообщение"  /}</p>{element type="captcha" class="inputtext" width="220" height="50" label="Проверочный код" /}<p>{element  type="submit"   value="Отправить на оценку"  /}</p>

Link to comment
Share on other sites
  • 0
zboomer Explorer

zboomer

Posted
Posted
<body style="background-image: url(images/1.jpg); /* Путь к фоновому изображению */

    -moz-background-size: 100%; /* Firefox 3.6+ */

    -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */

    -o-background-size: 100%; /* Opera 9.6+ */

    background-size: 100%; /* Современные браузеры */">

    <div>

        <img src="images/1.jpg" border="0" style="position: absolute; left: 20px; top: 20px;/*Путь к изображению 1*/">

        <img src="images/2.jpg" border="0" style="position: absolute; right: 20px; bottom: 20px;/*Путь к изображению 2*/">

        </div>

<script>document.body.className = 'fade';</script>

<script>setTimeout(function()

{document.body.className = 'appear';}, 0);</script>

</body>

Я сам совсем еще зеленый в этом деле, но вот так вот фон будет заполнен полностью... Появляется он правда сразу.

Link to comment
Share on other sites
  • 0
Ollin Explorer

Ollin

Posted
  • Author
Posted 
<style>html,body{height:100%;}.background{position:absolute;z-index:0;width:100%;height:100%;overflow:hidden;}</style><div class="background"><img src=""></div>

Пока я разбираюсь как сюда ссылку на фото выложить, посмотрите правильно ли я вставил код, потому что фон теперь не растягивается и появились две полосы прокрутки:

<html><head><title>Заголовок</title></head><body><style>body.fade{opacity: 0;}body.appear{opacity: 1;transition: opacity 5s;}</style><style>html,body{height:100%;}.background{position:absolute;z-index:0;width:100%;height:100%;overflow:hidden;}</style><div class="background"><img src="images/05WM.jpg"><p><img src="images/logo.png" border="0" style="position: absolute; left: 20px; top: 20px;"</p><p><img src="images/logo.png" border="0" style="position: absolute; right: 20px; bottom: 20px;"</p></div><script>document.body.className = 'fade';</script><script>setTimeout(function(){document.body.className = 'appear';}, 0);</script></body></html>
Link to comment
Share on other sites
  • 0
Switch74 Rising Star

Switch74

Posted
Posted

1. зачем вам в фон вставлять логотип и параграфы?

2. img не требуют закрытия?

и на будущее - выкладывайте код в песочницу сами

https://jsfiddle.net/vb7n8hot/

вставьте туда ссылки на норм картинки и будем разбираться дальше, что у вас не работает

Link to comment
Share on other sites
  • 0
zboomer Explorer

zboomer

Posted
Posted (edited)

 

Появляется он правда сразу.

Наверное этот скрипт на плавное появление не работает с background.

 

Вот решение с фоном который появляется сразу а картинки появляются медленно https://jsfiddle.net/vb7n8hot/9/ , если медленное появление фона критично, то мне кажется нужно искать или думать другой скрипт. Если задать фон как картинку, то она растягивается на 100% сайта но действительно появляется отступ от края сайта 3-4px, возможно я что то не так понял, возможно это какая то особенность браузеров, вот так появляются сразу 3 элемента медленно но с отступом https://jsfiddle.net/vb7n8hot/7/ в песочнице этого отступа не видно, или его вообще нет в песочнице, хотя если создать на компьютере страницу.html со вторым кодом отступ появляется :(

хотя нет есть он в песочнице, так же в первом варианте нету ни каких полос прокрутки, во втором варианте они появляются и отступ сверху тоже виден если сравнивать два варианта.

А объяснение тут http://htmlforum.ru/index.php?showtopic=54662&page=2#entry365665, если задавать в div   width:100%; height:100%; то получается мы задаем   width:100%;+10px(по 5px справа и слева)  height:100%;+10px(по 5px сверху и снизу)от сюда и отступы "непонятные" и появление скрола

Edited by zboomer
Link to comment
Share on other sites
  • 0
Ollin Explorer

Ollin

Posted
  • Author
Posted

 Если задать фон как картинку, то она растягивается на 100% сайта но действительно появляется отступ от края сайта 3-4px

Должен быть способ решить эту проблему с отступом 3-4px. Скрипт на background я искал, но не нашел.

Link to comment
Share on other sites
  • 0
zboomer Explorer

zboomer

Posted
Posted (edited)

 

 Если задать фон как картинку, то она растягивается на 100% сайта но действительно появляется отступ от края сайта 3-4px

Должен быть способ решить эту проблему с отступом 3-4px. Скрипт на background я искал, но не нашел.

 

https://jsfiddle.net/vb7n8hot/11/вот так вот нету отступов, но полоса прокрутки разъехалась на ширину картинки :) получается что ширина и высота блока с картинкой =100%,если вставить картинку меньше будет без разъезжаний скорее всего... вроде бы должно с max-width min-with решаться, я уже говорил я еще сам плохо понимаю что происходит  :)

Edited by zboomer
Link to comment
Share on other sites
  • 0
Ollin Explorer

Ollin

Posted
  • Author
Posted

1. зачем вам в фон вставлять логотип и параграфы?

2. img не требуют закрытия?

Не совсем понял как это логотип в фоне, но на странице должно быть 2-3 картинки. Я так понял параграфы это <p></p> - я их  убрал.

Вот так выглядит растянутый фон с отступом: https://jsfiddle.net/f677vk9u/

А так не растянутый: https://jsfiddle.net/jv23rmpv/

Link to comment
Share on other sites
  • 0
zboomer Explorer

zboomer

Posted
Posted (edited)

 

1. зачем вам в фон вставлять логотип и параграфы?

2. img не требуют закрытия?

Не совсем понял как это логотип в фоне, но на странице должно быть 2-3 картинки. Я так понял параграфы это <p></p> - я их  убрал.

Вот так выглядит растянутый фон с отступом: https://jsfiddle.net/f677vk9u/

А так не растянутый: https://jsfiddle.net/jv23rmpv/

 

https://jsfiddle.net/f677vk9u/3/ вот так можно убрать отступы

Edited by zboomer
Link to comment
Share on other sites
  • 0
Ollin Explorer

Ollin

Posted
  • Author
Posted

https://jsfiddle.net/f677vk9u/3/ вот так можно убрать отступы

Благодарю за старания! - фон растянут, только отступы там есть с права и в низу, но если в "margin:-10px; padding:-10px;" поставить 0px, то фон растянется полностью :) 

Link to comment
Share on other sites
  • 0
zboomer Explorer

zboomer

Posted
Posted (edited)

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

Edited by zboomer
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Similar Content

    • zeiger2
      Смена background-image при работе с псевдоклассом hover
      By zeiger2
      Здравствуйте! У меня стоит задача, что при наведении на блок li строка должна поменять цвет, в том числе и картинка. Я меняю картинку с помощью 
      background-image: none;     background: url(../img/check_icon_red.png) left no-repeat;   Но теперь картинка позицианируется не там где должна, её можно поставить на место только вручную, через -100px. Нужно поставить ровно туда, где она была. Должна быть в одном ряду с другими
    • Mix9
      див уходит за границу экрана
      By Mix9
      есть див с 5 img, при уменьшении экрана див выходит за него. Я добавил overflow: auto для этого div в надежде на то, что я смогу прокручивать фотки с помощью скроллбара, однако даже с ним почему-то я не вижу часть фоток которые вышли за границу. Что с этим можно сделать? класс video повторяется 5 раз, я тут оставил только 1 
      .content{ width: 90%; background-color: #333; } .video{ margin: 0px 4px 0px 4px; width: 310; display: flex; flex-direction:column; } .video_button_text{ margin-top: 10px; display: flex; flex-direction: row; font-size: 20px; color: white; } .video_text_div{ display: inline-block; width: 250px; } .video_text{ text-align: justify-all; margin: 0px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .slidan_videos{ margin: 0px 10px 0px 20px; overflow: auto; width: auto; margin-bottom: 50px; display: flex; flex-direction: row; justify-content: space-around; } <div class="content"> <div class = slidan_videos> <div class = video> <div> <a href = 'ссылка'><img class="img" src=""картинка"></a> </div> <div class = video_button_text> <div class = avatarka_div> <a href="ссылка" target="_blank"><img class = avatarka src="картинка"></a> </div> <div class = video_text_div> <p class = video_text><a href="ссылка">текст</a></p> </div> </div> </div>
    • Марко
      Не работает селектор .class
      By Марко
      Добрый день. Начинающий программист, столкнулся с проблемой. Селектор .class не работает должным образом. Несмотря на правильное, я надеюсь, описание, на web-странице не отображается ни одно изображение. С чем может быть связано? Заранее спасибо за помощь. 



    • Kaido
      Как сделать чтобы закрывалось только одно модальное окно когда открыто несколько?
      By Kaido
      Использую готовый плагин для модальных окон(от MaxGraph). Проблема в том, что когда у меня открыто два модальных окна, для примера Форма + Политика конфендициальности, и мне нужно закрыть политику вместе с ней закрывается и другое модальное окно. В JS я не сильно разбираюсь(собственно из за этого и использую готовый плагин), можете помочь кто работал с этим плагином? Я примерно понимаю как он работает, но реализовать чтобы закрывалось только одно не получается.
       
        <div class="content"> <button class="modal-btn" data-path="first" data-animation="fadeInUp" data-speed="1500">Открыть окно 1</button> </div> <div class="modal"> <div class="modal__wrapp" data-target="first"> <div class="modal__content"> <button class="modal__close">Закрыть</button> модальное окно <button data-path="policy">Политика</button> </div> </div> <div class="modal__wrapp" data-target="policy"> <div class="modal__content"> <button class="modal__close">Закрыть</button> политика </div> </div> </div> .modal { --transition-time: 0.3s; position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1000; cursor: pointer; overflow-y: auto; overflow-x: hidden; text-align: center; opacity: 0; visibility: hidden; transition: opacity var(--transition-time), visibility var(--transition-time); } .modal__wrapp { display: none; cursor: default; width: fit-content; height: fit-content; } .modal__content{ position: absolute; left: 500px; width: 500px; height: 500px; display: flex; color: white; flex-direction: column; text-align: left; background-color: #000; } .modal__content button{ width: 200px; height: 50px; margin: 50px 0; } .modal.is-open { opacity: 1; visibility: visible; transition: opacity var(--transition-time), visibility var(--transition-time); } .modal__wrapp.modal-open { display: flex; } .disable-scroll { position: relative; overflow: hidden; height: 100vh; position: fixed; left: 0; top: 0; width: 100%; } .fade { opacity: 0; transition: opacity var(--transition-time); } .fade.animate-open { opacity: 1; transition: opacity var(--transition-time); } .fadeInUp { opacity: 0; transform: translateY(vw(-100)); transition: opacity var(--transition-time), transform var(--transition-time); } .fadeInUp.animate-open { opacity: 1; transform: translateY(0); transition: opacity var(--transition-time), transform var(--transition-time); } .modal__wrapp[data-target="policy"] .modal__content{ left: 1050px; background-color: #000; opacity: .5; } class Modal { constructor(options) { let defaultOptions = { isOpen: () => {}, isClose: () => {}, } this.options = Object.assign(defaultOptions, options); this.modal = document.querySelector('.modal'); this.speed = false; this.animation = false; this.isOpen = false; this.modalContainer = false; this.previousActiveElement = false; this.fixBlocks = document.querySelectorAll('.fix-block'); this.focusElements = [ 'a[href]', 'input', 'button', 'select', 'textarea', '[tabindex]' ]; this.events(); } events() { if (this.modal) { document.addEventListener('click', function(e){ const clickedElement = e.target.closest('[data-path]'); if (clickedElement) { let target = clickedElement.dataset.path; let animation = clickedElement.dataset.animation; if (clickedElement.classList.contains('modal-close')) { this.close(); } let speed = clickedElement.dataset.speed; this.animation = animation ? animation : 'fade'; this.speed = speed ? parseInt(speed) : 300; this.modalContainer = document.querySelector(`[data-target="${target}"]`); this.open(); return; } if (e.target.closest('.modal__close')) { this.close(); return; } }.bind(this)); window.addEventListener('keydown', function(e) { if (e.keyCode == 27) { if (this.isOpen) { this.close(); } } if (e.keyCode == 9 && this.isOpen) { this.focusCatch(e); return; } }.bind(this)); this.modal.addEventListener('click', function(e) { if (!e.target.classList.contains('modal__wrapp') && !e.target.closest('.modal__wrapp') && this.isOpen) { this.close(); } }.bind(this)); } } open() { this.previousActiveElement = document.activeElement; this.modal.style.setProperty('--transition-time', `${this.speed / 1000}s`); this.modal.classList.add('is-open'); this.disableScroll(); this.modalContainer.classList.add('modal-open'); this.modalContainer.classList.add(this.animation); setTimeout(() => { this.options.isOpen(this); this.modalContainer.classList.add('animate-open'); this.isOpen = true; this.focusTrap(); }, this.speed); } close() { if (this.modalContainer) { this.modalContainer.classList.remove('animate-open'); this.modalContainer.classList.remove(this.animation); this.modal.classList.remove('is-open'); this.modalContainer.classList.remove('modal-open'); this.enableScroll(); this.options.isClose(this); this.isOpen = false; this.focusTrap(); } } focusCatch(e) { const focusable = this.modalContainer.querySelectorAll(this.focusElements); const focusArray = Array.prototype.slice.call(focusable); const focusedIndex = focusArray.indexOf(document.activeElement); if (e.shiftKey && focusedIndex === 0) { focusArray[focusArray.length - 1].focus(); e.preventDefault(); } if (!e.shiftKey && focusedIndex === focusArray.length - 1) { focusArray[0].focus(); e.preventDefault(); } } focusTrap() { const focusable = this.modalContainer.querySelectorAll(this.focusElements); if (this.isOpen) { focusable[0].focus(); } else { this.previousActiveElement.focus(); } } disableScroll() { let pagePosition = window.scrollY; this.lockPadding(); document.body.classList.add('disable-scroll'); document.body.dataset.position = pagePosition; document.body.style.top = -pagePosition + 'px'; } enableScroll() { let pagePosition = parseInt(document.body.dataset.position, 10); this.unlockPadding(); document.body.style.top = 'auto'; document.body.classList.remove('disable-scroll'); window.scroll({ top: pagePosition, left: 0 }); document.body.removeAttribute('data-position'); } lockPadding() { let paddingOffset = window.innerWidth - document.body.offsetWidth + 'px'; this.fixBlocks.forEach((el) => { el.style.paddingRight = paddingOffset; }); document.body.style.paddingRight = paddingOffset; } unlockPadding() { this.fixBlocks.forEach((el) => { el.style.paddingRight = '0px'; }); document.body.style.paddingRight = '0px'; } } const modal = new Modal({ isOpen: (modal) => { console.log(modal); console.log('opened'); }, isClose: () => { console.log('closed'); }, });  
    • stasN1
      Background не работает
      By stasN1
      Мне нужен такой результат :

      Не понимаю почему background не применяется вокруг иконок:

       
      Сам код:
      Html:
      css:

      Html:
      <section class="finish"> <div class="container"> <h2 class="finish_header">По окончании обучения Вы сможете!</h2> <div class="finish_divider"></div> <div class="finish_wrapper"> <finish_item> <div class="finish_round"> <img src="/icons/finish/1 (1).png" alt="" class="finish_icon"> </div> <div class="finish_descr">Создать свой сайт или блог</div> </finish_item> <finish_item> <div class="finish_round"> <img src="/icons/finish/2.png" alt="" class="finish_icon"> </div> <div class="finish_descr">Создать свой сайт или блог</div> </finish_item> <finish_item> <div class="finish_round"> <img src="/icons/finish/3.png" alt="" class="finish_icon"> </div> <div class="finish_descr">Обеспечить ему медленный, но верный рост в ТОП</div> </finish_item> <finish_item> <div class="finish_round"> <img src="/icons/finish/4.png" alt="" class="finish_icon"> </div> <div class="finish_descr">Достигнуть стабильного прироста посетителей</div> </finish_item> <finish_item> <div class="finish_round"> <img src="/icons/finish/5.png" alt="" class="finish_icon"> </div> <div class="finish_descr">Достигнуть стабильного прироста посетителей</div> </finish_item> </div> </div> </section>  
      Css:
      .finish .finish_wrapper { margin-top: 41px; display: flex; justify-content: space-between; } .finish .finish_wrapper .finish_item { width: 204px; } .finish .finish_wrapper .finish_item .finish_round { width: 115px; height: 115px; background-color: #b4e2ff; border-radius: 8px; } .finish_descr { font-family: Roboto; font-size: 17px; line-height: 20px; font-weight: 300; color: #efefef; Спасибо!
       

      Уже решил, спасибо!
      У меня CSS селектор вида:
      .finish .finish_wrapper .finish_item .finish_round

      А должен быть:
      .finish .finish_wrapper finish_item .finish_round
      Т.е. без точки перед finish_item, так как это не класс, а элемент
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept