Jump to content

Report

  • Similar Content

    • By Алеся
      Подскажите, пожалуйста, как растянуть фоновую картинку, заключенную в div, на всю ширину вьюпорта? Сейчас она отображается посередине, по ширине макета. Указывала ширину 100%, 1200px, минимальную ширину 1200px - не работает.
      <div class="banner"> 
            <div class="container background-image">
            <div class="banner_text"></div>
            </div>
          </div>
      CSS:
      .background-image {
        background-image: url('/img/new_oranges.jpg');
        background-size: cover;
        height: 200px;
      }
    • By gumuch
      Добрый день. Нуждаюсь в помощи/совете! 
      В корне сайта (html) создал блок с позиционированием, написал в нем номер телефона и почту. На большом мониторе блок отображается нормально, а вот если зайти через смартфон то данный блок налазит на картинку и я никак не могу это изменить..., игрался с позиционированием (absolute, fixed, relativ и т.д.) но получаю на выходе либо прикрепленный блок к верхнему левому краю либо он налазит на картинку. Подскажите, что я делаю не так? 
      Сам сайт: http://2metra.com/
      Вот код который я прописал:
       
    • By мурамаса
      Добрый день, столкнулся с такой проблемой. Верстая страницу заключал изображения в тег <div> с определенным класом и в css, задаю им позицию какую хочу видеть у себя в браузере. например
      .content-bar2 { float: right; position: absolute; top: 300px; right: 50px; } Так вот когда я несколько элементов так размещаю, один над одним, то у меня в браузере все отоброжается нормально. Но открыв с другого компьтера, получилос так что одно изображение наезжает на другое, что это и с чем связано и как это вылечить. И если не сложно обьясните пожалуйста особенности position: absolute.
      Как я понимаю float и absolute вместе не работают ?
      Как я понимаю float и absolute вместе не работают ? 
      При том еще есть проблема, когда я уменьшаю окно браузера, контент как бы сжимается в непонятную хурму, друг на друга, как это исправить ?
    • By mr.relax
      Есть страница, c:
      body { 
      max-width: 1200px;
      margin: auto;
      }
      т.е. контент посередине. 

      Вопрос: есть блок <footer>, как средствами CSS сделать его "привязанным" к низу страницы так, чтобы он был одного размера с body? И соответственно менял размеры, если у body меняется. 
      Ну например: окно браузера уменьшили...

      footer {
      position: fixed;
      bottom: 0;
      }

      "привязывает" <footer> к низу, но растягивает по ширине экрана.
    • By serzh82saratov
      Всем привет! Я тут новичок, не пинайте сразу если что.
      Требуется аналог position sticky для IE (в режиме совместимости с 7).
      Надо чтобы в одну строку текст с кнопками и с пунктирной линией проходящей под ними посередине в любой ситуации прилипал к левой и правой границе окна, то есть чтобы не участвовал в горизонтальной прокрутке, но прокручивался вертикально. Также при растягивании окна, текст за которым следуют кнопки находились слева на 20%.

      То есть если сдвинуть скролл, строка с красной полоской должна остатся на месте, если растянуть окно, то красная полоса растягивается, "( Title )" немного сдвигается вправо.
      Надеюсь более менее объяснил, заранее спасибо.
      Забыл сказать, таких линий на форме 10 - 20 штук.
  • Обсуждения

    • Всем спс сам розобрался.
    • Вот хороший пример "Рандомайзер слов из списка". Тут вместо дивов с картинками инпуты, но сути дела не меняет. Кроме того работает с разным кразмером списка (код универсальный). Если в сорсе код найдешь увидишь как работает — там 3 строчки с тем же Math.random. Если будут трудности пиши тут, я оповещение увижу кину тебе код оттуда + объясню шо как. Вообще прикольно так можешь посмотреть другие страницы на сайте, потренироваться с js (для начала как раз пойдет).   Ну я вовремя конечно 
    • Пытаюсь динамически сформировать группу элементов <input type="checkbox"> Элементы создаются, но не получается задать им надпись, хотя раньше, создавая их вручную в HTML, всё получалось..   vk-groups-3.html vk-groups-1.html наладил.. vk-groups-3.html
    • Вы отучились на бухгалтера или программиста? Почему спрашиваю. Я финансист, бухгалтер. Естественно, в свое время отучился на курсах 1С, но как экономист. Поэтому могу помочь с развитием именно в этом направлении, так как опыт огромный. 
    • Всем привет.Не так давно начал изучать верстку.И кароче захотел создать слайдер на основе html css без js. Застрял булеты работают и стрелки также но только стрелки становяться видимы когда первый раз нажал на булет.До этого их никак немогу настроить.   <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <style>         .wrapper{             width: 700px;             height: 400px;             margin:0 auto;             border:5px solid green;             border-radius: 20px;             overflow: hidden;             position: relative;         }         .container{             width: 600px;             height: 300px;             border: 5px solid green;             border-radius: 20px;             margin: 20px auto;         }         .slider__items{             display: none;         }         .bullets{             display: flex;             position: absolute;             left:100px;             bottom:30px;         }         .bullets__items{             width: 50px;             height: 15px;             border:2px solid green;             border-radius: 20px;             background-color: lightgreen;             margin: 0 20px;         }             .images{             display: flex;         }         .images__items{             width: 600px;             height: 300px;             border-radius: 20px;             margin-right: 55px;         }               .arrows__prev{             background-image: url(./img/next.png);             background-size: contain;             width: 40px;             height: 40px;             position: absolute;             top:150px;             left: 2px;         }         #slide1:checked ~ .images .image1{             margin-left: 0;         }         #slide2:checked ~ .images .image2{             margin-left: -655px;         }         #slide3:checked ~ .images .image3{             margin-left: -1310px;         }         #slide4:checked ~ .images .image4{             margin-left: -1965px;         }         #slide5:checked ~ .images .image5{             margin-left: -2620px;         }         #slide1:checked ~ .arrow__next .img2,         #slide2:checked ~ .arrow__next .img3,         #slide3:checked ~ .arrow__next .img4,         #slide4:checked ~ .arrow__next .img5,         #slide5:checked ~ .arrow__next .img1{             display: block;             background-image: url(./img/next.png);             background-size: contain;             width: 40px;             height: 40px;             position: absolute;             top:150px;             right: 2px;                 }         #slide1:checked ~ .arrow__prev .img5,         #slide2:checked ~ .arrow__prev .img1,         #slide3:checked ~ .arrow__prev .img2,         #slide4:checked ~ .arrow__prev .img3,         #slide5:checked ~ .arrow__prev .img4         {             display: block;             background-image: url(./img/prev.png);             background-size: contain;             width: 40px;             height: 40px;             position: absolute;             top:150px;             left: 2px;                 }     </style> </head> <body>     <div class="wrapper">         <div class="container">             <div class="slider">                 <input type="radio" name="slider" class="slider__items" id="slide1">                 <input type="radio" name="slider" class="slider__items" id="slide2">                 <input type="radio" name="slider" class="slider__items" id="slide3">                 <input type="radio" name="slider" class="slider__items" id="slide4">                 <input type="radio" name="slider" class="slider__items" id="slide5">                                 <div class="bullets">                     <label for="slide1" class="bullets__items"></label>                     <label for="slide2" class="bullets__items"></label>                     <label for="slide3" class="bullets__items"></label>                     <label for="slide4" class="bullets__items"></label>                     <label for="slide5" class="bullets__items"></label>                 </div>                 <div class="arrow__next">                     <label for="slide1" class="arrows__item img1"></label>                     <label for="slide2" class="arrows__item img2"></label>                     <label for="slide3" class="arrows__item img3"></label>                     <label for="slide4" class="arrows__item img4"></label>                     <label for="slide5" class="arrows__item img5"></label>                 </div>                 <div class="arrow__prev">                     <label for="slide1" class="arrows__item img1"></label>                     <label for="slide2" class="arrows__item img2"></label>                     <label for="slide3" class="arrows__item img3"></label>                     <label for="slide4" class="arrows__item img4"></label>                     <label for="slide5" class="arrows__item img5"></label>                 </div>                 <div class="images">                     <img src="./img/1.jpg" alt="" class="images__items image1">                     <img src="./img/2.jpg" alt="" class="images__items image2">                     <img src="./img/3.jpg" alt="" class="images__items image3">                     <img src="./img/4.jpg" alt="" class="images__items image4">                     <img src="./img/5.jpg" alt="" class="images__items image5">                 </div>             </div>         </div>     </div> </body> </html>
×
×
  • 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