Перейти к содержимому


Пользователь месяца
Ixman Ixman 1-й за Октябрь
Очков активности: 693 0 тем, 33 сообщения, 14 баллов репутации
Сайт: o5cat.ru
ТОП самых активных за этот месяц
  • Фотография yuran
    #1

    yuran (yurbol.ru)
    Очков активности: 78 0 тем, 52 сообщения, 1 балл репутации

  • Фотография ShowPrint
    #2

    ShowPrint (ShowPrint.ru)
    Очков активности: 58.5 Вне конкурса за определение пользователя месяца

  • Фотография BLIK
    #3

    BLIK
    Очков активности: 48 Вне конкурса за определение пользователя месяца

  • Фотография WGN
    #4

    WGN (worldgamenews.com)
    Очков активности: 37.5 Вне конкурса за определение пользователя месяца

  • Фотография Mandarin
    #5

    Mandarin
    Очков активности: 34.5 0 тем, 23 сообщения, 1 балл репутации

  • Фотография Ixman
    #6

    Ixman (o5cat.ru)
    Очков активности: 30 Вне конкурса за определение пользователя месяца

  • Фотография pozitron123
    #7

    pozitron123
    Очков активности: 30 2 темы, 14 сообщений, 1 балл репутации

  • Фотография Mariko
    #8

    Mariko
    Очков активности: 15 1 тема, 7 сообщений, 1 балл репутации

  • Фотография RosenRot
    #9

    RosenRot (abuzov.com)
    Очков активности: 13.5 1 тема, 6 сообщений, 1 балл репутации

  • Фотография r0mZet
    #10

    r0mZet (rz-style.ru)
    Очков активности: 12 1 тема, 5 сообщений, 1 балл репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 31.10.2018
  • Яндекс выдача: 13.11.2018
Топ 5 участников по репутации


Проблема вёрстки адаптивной страницы на divах (стр. 2)

#21 master-vek

master-vek
    Topic Starter
  • Пользователь
  • 236 сообщений
  • Репутация: 12
0

Отправлено 19 January 2018 - 01:44

Может подскажете возможное решение такого явления через HTML и CSS.

При такой вёрстке:

<div class="kontainer">
              <article>
                <p>Fusce non sodales urna. Vestibulum sagittis sit amet dolor ut faucibus.
              Phasellus lacinia id odio ullamcorper volutpat. Fusce vel tortor a nulla bibendum</p>            
              </article>                                  
        <div class="elit">
            <img src="http://kharkow.at.ua/kozyrki.jpg" alt="">
                  <section>
              <p><b>Навес у входа 1</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.  </p>
             <p><b>Навес у входа 2</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.  </p>
             <p><b>Навес у входа 3</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.  </p>
             <p><b>Навес у входа 4</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.  </p>
                     </section>
        </div>                           
    <div class="clear"></div>

И при таком CSS:

html {min-height:100%; }
body {
     background:#D9EDF7;
    font-family: Arial, Open Sans, Sans-serif;
    margin: 0px;
    padding:0px;}
article{width:95%;margin:20px auto;border:1px solid #8B0000;}
article p{margin:0px 20px 10px 20px;}    
.kontainer{width:100%;}    
.slaider {margin:0 auto;padding-top:10px;width:95%;border:1px solid #8B0000;}
.elit{margin:0px  auto;width:65%;border:1px dashed #f00;}
.elit img {
    float:left;
     height: auto;
     max-width: 100%;
     width: auto\9;
     margin-right: 25px;}
.elit section{background-color:rgba(209, 219, 220, 0.7); display: table-cell;padding:15px; border:1px solid #8B0000;max-width:470px; line-height: 1.42;}
        
.clear {clear:both;}

Оба этих блока на экране в 20d располагаются рядом по горизонту, а когда начать сужать браузер, происходит сжимание только правого блока с текстом, а картинка остаётся не сжимаемой до момента, когда уходит под низ правый текстовый блок и только потом начинает масштабироваться. В песочнице здесь

 

А хотелось бы, чтобы оба блока съезжали одновременно влево без изменения размеров до левого края, а потом через медиазапрос перебросить правый текстовый блок под низ, отменив обтекание изображения налево.

 

 


  • 0

#22 ShowPrint

ShowPrint
  • Пользователь PRO
  • 3069 сообщений
  • Репутация: 843

Отправлено 19 January 2018 - 10:43

В песочнице здесь
По коду: будьте внимательней - перед открытием тега body надо закрыть тег head (пропущено).

По песочнице - урлы картинок ставьте абсолютными путями (начиная с http) - с относительными они не видны

 

хотелось бы, чтобы оба блока съезжали одновременно влево без изменения размеров до левого края
.elit img {
    float:left;
     height: auto;
     max-width: 100%;
     width: auto\9; /* Зачем здесь \9 ????? */
     margin-right: 25px;}

В этом стиле в качестве width задайте нужную ширину процентах, например 50% (вместо "auto"), а в медиазапросе уже проставьте auto

 

В песочнице здесь


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#23 master-vek

master-vek
    Topic Starter
  • Пользователь
  • 236 сообщений
  • Репутация: 12

Отправлено 19 January 2018 - 17:48

,

В этом стиле в качестве width задайте нужную ширину процентах, например 50% (вместо "auto"), а в медиазапросе уже проставьте auto

 

Что значит опыт, ещё раз утверждаю - Вы знаете все нюансы касательно вёрстки. Я два дня пытался эту проблему разрулить, но сдался и пошёл спрашивать у Вас. Мне уже  и неудобно с вопросами. Благодарю за ценную подсказку.


  • 0

#24 ShowPrint

ShowPrint
  • Пользователь PRO
  • 3069 сообщений
  • Репутация: 843

Отправлено 19 January 2018 - 18:07

@master-vek, я только учусь, мне ещё ой как далеко до совершенства - отсюда не видно. Ручки просто шаловливые  :rolleyes:


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#25 master-vek

master-vek
    Topic Starter
  • Пользователь
  • 236 сообщений
  • Репутация: 12

Отправлено 21 January 2018 - 02:24

Ручки просто шаловливые

 

 

На основе вашей подсказки нашёл такое решение.

Решение действительно очень простое, но требует одного, если присутствует свойство FLOAT, центрирование в блоке не возможно. Поэтому прежде, чем центрировать картинку в любом блоке надо:
-Перевести её в блочный вид display:block и отменить обтекание.;
- CSS3

media screen and (max-width:900px){.elit img {float:none;display:block;margin:10px auto;padding:0px;}
.elit{margin:0px auto;width:95%;}
.elit section{display:block;padding:0px;max-width:100%;}
.elit section p{font-size: 0.843em;margin:0px 20px 10px 20px;}
article p{font-size: 0.843em;}}

И вот результат:

Прикрепленные изображения

  • Snap 2018-01-20 at 23.37.43.jpg

  • 0

#26 ShowPrint

ShowPrint
  • Пользователь PRO
  • 3069 сообщений
  • Репутация: 843

Отправлено 22 January 2018 - 10:51

нашёл такое решение
css - волшебная страна, сотворить можно очень многое.  :)
  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#27 Sosnovskij

Sosnovskij
  • Администратор
  • 4761 сообщений
  • Репутация: 712

Отправлено 22 January 2018 - 11:45

@master-vek, большая просьба оформлять код специальным bb-кодом на форуме (кнопка кавычки в редакторе).


  • 0

:excl: Требуется ЛинкБилдер (создание ссылочной массы, 1200-1600 руб в сутки). Блог — https://sosnovskij.ru/.



#28 master-vek

master-vek
    Topic Starter
  • Пользователь
  • 236 сообщений
  • Репутация: 12

Отправлено 22 January 2018 - 12:02

(кнопка кавычки в редакторе

 

Спасибо.  Никогда таким не пользовался, но буду вникать.


  • 0

#29 master-vek

master-vek
    Topic Starter
  • Пользователь
  • 236 сообщений
  • Репутация: 12

Отправлено 08 February 2018 - 18:29

Вот такая заморочка, не могу понять в чём ошибка:

<li class="nav__item">
                        <a href="#" class="nav__link link">Главная</a>
                      </li>

Исходная строка списка с классом блока  link в элементе nav__link.  Прописал правило вот это:

.link{
color:#000;
text-decoration: underline;
}
.link:hover{
color:#f44336;
}
.nav__link{
text-decoration:none;
padding: 1.33rem;
display: block;
}

и не одно не работает?


Спасибо, просто была ошибка, решено.  Желательно удалить пост, Спасибо.


  • 0

robot

robot
  • Пользователь PRO
  • 2652 сообщений
  • Репутация: 85


Похожие темы

  Название темы Автор Статистика Последнее сообщение

Оформление форума – IPBSkins.ru