marizza40

position: absolute; и position: relative; для мобильной версии сайта

Recommended Posts

Добрый день! Жаль что у вас тут темы не удаляются, потому что когда писала, нашла у себя ошибку, а сейчас тему удалить не могу. Но сейчас не об этом. 

Есть не анимированный слайдер

<div class="slider">
    
    <div class="slider_site">
          <img src="/images/slider_1.jpg" alt="DSC0604-min.jpg" border="0" class="img_slider"/>
       </div>
       <div class="slider_line">
          </div>
        <div class="txt_left">
            <h1 class="slider_h">АВТОМАТИЗАЦИЯ<br> КНС</h1>
            <div class="button"> 
    <a href="#" class="button_a">Подробнее</a>   
            </div><!--/.button-->
        </div>
    <div class="slider_site">
          <img src="/images/slider_2.jpg" alt="DSC0604-min.jpg" border="0" class="img_slider"/>
       </div>
       <div class="slider_line_two">
          </div>
        <div class="txt_left">
            <h1 class="slider_h_two">НАСОСНЫЕ СТАНЦИИ</h1>
            <div class="button"> 
    <a href="#" class="button_a_one">Подробнее</a>   
            </div><!--/.button-->
        </div>
    
</div>

Весь текст идет поверх картинки. На компьютере смотрится хорошо, но при уменьшении экрана браузера все начинает плыть. Как грамотно настроить, чтобы текст и кнопка при уменьшении экрана не выглядели коряво? 

CSS:

/*slider*/
.slider{
    display: flex;
    font-family: 'Roboto', sans-serif;
}
.slider_h{
    position: absolute;
    color: #fff;
    top: 32%;
    left: 7%;
    font-size: 86px;
    line-height: 85px;
    text-align: right;
}
.slider_h_two{
    position: absolute;
    color: #fff;
    top: 32%;
    left: 52%;
    font-size: 86px;
    line-height: 85px;
}
.slider_site{
    width: 100%;
}
.img_slider{
    width: 100%;
    position: relative;
}
.slider_line{
    width: 170px;
    height: 3px;
    background: #0192dc;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
    top: 32%;
    left: 42%;
}
.slider_line_two{
    width: 170px;
    height: 3px;
    background: #0192dc;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
    top: 32%;
    left: 57%;
}

/*button*/
.button_a{
    vertical-align: top;
    padding: 8px 30px;
    border: 2px solid #0092db;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    margin: 20px auto;
    transition: 0.1s linear;
    position: absolute;
    top: 59%;
    left: 39%;
}

.button_a:hover{
    color: #0092db;
    text-decoration: none;
}

.button_a_one{
    vertical-align: top;
    padding: 8px 30px;
    border: 2px solid #0092db;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    margin: 20px auto;
    transition: 0.1s linear;
    position: absolute;
    top: 59%;
    left: 52%;
}
.button_a_one:hover{
    color: #0092db;
    text-decoration: none;
}

 

Share this post


Link to post
Share on other sites

Делайте пример в песочнице. 

Вариантов масса, от удаления текста, до размещения его по центру, под слайдером и т.п. 

Share this post


Link to post
Share on other sites
2 минуты назад, npofopr сказал:

Делайте пример в песочнице. 

Вариантов масса, от удаления текста, до размещения его по центру, под слайдером и т.п. 

Сейчас как раз делаю в песочнице. Мне необходимо разместить текст + линия + кнопка именно на картинке. 

Share this post


Link to post
Share on other sites

Код не смотрел, но вам нужно либо прописать тег viewport, либо познакомиться с медиа запросами

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By dron
      Всем привет. Никак не получается сверстать нормальную Pricing Table на Uikit 3. Я только вникаю в тему, поэтому, может еще не догоняю.
      Пробую сделать на uk-flex + uk-table. Постоянно какие-то косяки то с адаптивностью, то с шириной, то с высотой колонок...
      <div class="uk-flex uk-flex-center"> <div class="uk-card uk-card-default"> <table class="uk-table uk-table-divider bg1"> <thead> <tr> <th>Тестовая таблица 1</th> </tr> </thead> <tbody> <tr> <td>Поле 1</td> </tr> <tr> <td>Поле 2 пошире</td> </tr> <tr> <td>Поле 3 еще шире чем поле 1 и 2</td> </tr> <tr> <td>Тестируем поле 4, которое воообще широкое</td> </tr> <tr> <th>100008 руб</th> </tr> </tbody> </table> </div> <div class="uk-card uk-card-default uk-margin-left"> <table class="uk-table uk-table-divider bg1"> <thead> <tr> <th>Тестовая таблица 2, таблица 2, таблица 3</th> </tr> </thead> <tbody> <tr> <td>Поле 1</td> </tr> <tr> <td>Поле 2</td> </tr> <tr> <td>Поле 3</td> </tr> <tr> <td>Поле 4</td> </tr> <tr> <td>А тут есть еще поле 4</td> </tr> <tr> <td>А еще поле 6, которое шире других</td> </tr> <tr> <th>12 000 ₽</th> </tr> </tbody> </table> </div> <div class="uk-card uk-card-default uk-margin-left"> <table class="uk-table uk-table-divider bg1"> <thead> <tr> <th>А тут таблица номер 3</th> </tr> </thead> <tbody> <tr> <td>Поле 1</td> </tr> <tr> <td>Широкое поле 2 из таблицы 3</td> </tr> <tr> <td>Поле 1</td> </tr> <tr> <td>Поле 1</td> </tr> <tr> <td>Поле 1</td> </tr> <tr> <td>Поле 1</td> </tr> <tr> <th>9 000 ₽</th> </tr> </tbody> </table> </div> </div>
      И как на зло не могу ничего найти подходящего уже готового. Ни в шаблонах на Uikit, ни в документации... Кто-то верстал Pricing Table на Uikit 3? Можете помочь, показать свой код?

      Заранее спасибо!

    • By victorius
      при ширине экрана @media(max-width:768px) в самый низ страницы верстки есть слайдер внутри него есть контент с картинкой хочу поместить картинку за границы слайда сверху но картинка обрезается. как сделать чтобы было видно
      ссылка на верстку  http://frontend-er.h1n.ru/asia-spa/
       

    • By VolKTieR
      Здравствуйте.
      Имеется данный код:
      <audio id="audio">     <source src="audio/1.mp3" type="audio/mpeg"> </audio> <div class="fixedbut" id="sebut">Звук</div> <style> div.fixedbut { position: fixed;     bottom: 93%;     right: 20px;      display: block;      background: white;      border-radius: 10px;     color: black;      text-decoration: none;      padding: 6px 23px;     font-size: 17px ;     -webkit-transition: 0.33s all ease-out;      -o-transition: 0.33s all ease-out;      transition: 0.33s all ease-out;     z-index: 999; } div.fixedbut:hover {         background: grey;         color: white; } </style> <script> document.getElementById("sebut").onclick = function()     {       var myaudio = document.getElementById("audio");       if(myaudio.paused == true)       {         document.getElementById("audio").play();  }       else if (myaudio.paused == false)       {         document.getElementById("audio").pause(); }     } </script> <script>     $(document).ready(function(){       $(window).scroll(function () {         if ($(this).scrollTop() > 200)          {             $('div.fixedbut').fadeIn();        }         else          {             $('div.fixedbut').fadeOut();         }   })     }); </script>
       
      Кнопка плавающая, останавливает звук включенный другой .
      Со звуком проблем нет, но появление и исчезание кнопки при прокрутке не работает.
      Подскажите пожалуйста как сделать))
  • Member Statistics

    46,608
    Total Members
    3,128
    Most Online
    Jasur
    Newest Member
    Jasur
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.