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


Пользователь месяца
BLIK BLIK 1-й за Февраль
Очков активности: 1228 0 тем, 63 сообщения, 13 баллов репутации
ТОП самых активных за этот месяц
  • Фотография Андрей WPMasterKZ
    #1

    Андрей WPMasterKZ (wpmaster.kz)
    Очков активности: 1728 Вне конкурса за определение пользователя месяца

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

    ShowPrint (ShowPrint.ru)
    Очков активности: 957 1 тема, 55 сообщений, 11 баллов репутации

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

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

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

    Megoydagi
    Очков активности: 337.5 8 тем, 51 сообщение, 3 балла репутации

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

    maxnik (konovalovpavel.ru)
    Очков активности: 306 2 темы, 62 сообщения, 3 балла репутации

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

    pozitron123
    Очков активности: 202.5 5 тем, 30 сообщений, 3 балла репутации

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

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

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

    WGN (worldgamenews.com)
    Очков активности: 123 0 тем, 41 сообщение, 2 балла репутации

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

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

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

    ediksing (online-zarabotai.ru)
    Очков активности: 57 2 темы, 32 сообщения, 1 балл репутации

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


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

#1 master-vek

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

Отправлено 16 October 2017 - 11:46

Здравствуйте уважаемые знатоки.

 

Решил сверстать  адаптивную страничку  под услуги как и советовали  хорошие люди на форуме, вместо простой табличной вёрстки.

 

Всё происходит на блоках div.  И остался последний нюанс - при зафиксированном родительском div под эгидой  .robo {max-width:900px;  border:solid 1px red;},

хочу разместить  текст внутри на тегах <p></p> и отодвинуть его на 10 px  от левой стороны блока.

 

Последнее решение .robo {-moz-box-sizing: border-box; /* Для Firefox */  
                                               box-sizing: border-box; /* Ширина блока с полями */
                                                padding: 10px;}

 

Не реагирует, проблема остаётся.  Внимание!  блок ROBO  строго фиксированных размеров.   А при чтении страницы на малоформатных экранах текст слева прилипает к бордеру боди без отступа, как хотелось в медиа запросе.

В интернете советов много, но что то  не срабатывает.

 

Спасибо всем за отклик.
 


 

Да, надо сказать, внутри этого блока есть ещё один блок под картинки. От них отступ просто решил через ALIGN от картинки.  Но картинка кончилась по высоте, а текст  ниже прилип  слева к бордеру основного блока.  Может задать ширину текста  в %  от ширины внутри блока??

 

  • 0

#2 TimurR

TimurR
  • Пользователь PRO
  • 1047 сообщений
  • Репутация: 258

Отправлено 17 October 2017 - 23:54

@master-vek, нужно почитать вам о позиционировании. Сейчас могу сказать, что делать, но вдруг будет прилипать текст с другой стороны, что опять бежать на форум спрашивать почему так?

И так, зубрим: позиционирование


  • 1

#3 master-vek

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

Отправлено 18 October 2017 - 11:56

@TimurR

 

Спасибо за рекомендацию. Посмотрел сайт.  Много полезной информации.  Зубрить не буду.  Если что понадобится, всегда зайду на сайт и  буду искать. С позиционированием и потоками я знаком, но в HTML5  не вникал.

 

А моя проблема с отступами  в блоке, оказывается решилась просто. Достаточно было прописать класс блока  в моём случае

 .robo {max-width:900px;  border:solid 1px red; margin:0 auto; padding:0px 10px;}    и отступы появились как  и должно быть.  Так я их и прописал ранее, но  недосмотрел по своей вине  и собрал в папку для загрузки на хостинг копию стилей несколько другую, и за это поплатился четырьмя днями  недоумения.  Мало того, написал здесь тему и отвлёк коллег, в том числе и Вас,  от своих дел.  Приношу Всем извинения.

 

Но, всё таки, я не знал, что в блоке с текстом, добавление полей, бордеров, отступов   идёт только от текста наружу.


  • 0

#4 ShowPrint

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

Отправлено 18 October 2017 - 15:42

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


#5 master-vek

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

Отправлено 18 October 2017 - 16:01

@ShowPrint,

 

В том то и дело, что нэ. (если элементы без float). Текст не сжимаем, даже если блок max-width="Цифра".


Сообщение отредактировал master-vek: 18 October 2017 - 16:02

  • 0

#6 ShowPrint

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

Отправлено 18 October 2017 - 16:15

В том то и дело, что нэ.
Странно...  :huh:

Набросал в песочнице (тынц) простой примерчик - всё работает...  :o

Можно "поиграть" со значениями margin/padding и всё отрабатывается...

Может я не так что-то понял?  :wacko:


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


#7 master-vek

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

Отправлено 18 October 2017 - 20:30

В песочнице всё Ок.   В моём же случае текст стоит  изначально в притык в строго фиксированном по ширине  div. И вот я, глядя на это дело понимаю, что читать на ПК мониторе  нормально и отступы от сторон  div  никого не волнуют.(бордер же будет не виден) Но, когда открываю на смартфоне, тоже понимаю, что строки начинаются чуть не с пластиковой рамки корпуса. Пытаюсь создать padding  по бокам, а оно не реагирует.  То есть оно реагирует, но ширина блока div увеличивается на эту ширину, что меня и не устраивало. Всё таки согласился в последствии увеличить ширину блока на 20pх.  И проблема решилась.

 

Попробуйте не выходя из песочницы, задать паддинг  внутри этого текстового блока:.testDiv p{ border:solid 1px blue;}  


  • 0

#8 ShowPrint

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

Отправлено 18 October 2017 - 21:36

Попробуйте не выходя из песочницы, задать паддинг  внутри этого текстового блока:.testDiv p{ border:solid 1px blue;}
 Попробовал (тынц) и что?

@master-vek, проще будет если вы там-же, в песочнице, воссоздадите фрагмент кода который "не слушается" - тогда можно будет посмотреть и определить "где собака порылась"  :)


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


#9 master-vek

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

Отправлено 18 October 2017 - 22:00

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

Согласны.


  • 0

#10 ShowPrint

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

Отправлено 19 October 2017 - 09:51

Да Вы, не волнутесь  Просто попробуйте принять психологически, что паддинг вырос от текста наружу, а не сжал текст во внутрь и появился паддинг
Мне-то чего волноваться из-за этого...  :D 

 

И "принимать психологически" нечего - тут всё "арифметически": сами же прописали свойство 

box-sizing: border-box
и потом костыли искали )))

 

Мне просто непонятно зачем усложнять себе жизнь, но мастерам виднее, чем нам любителям  :ph34r:

Я бы только в этом случае добавил ещё 

-webkit-box-sizing: border-box;

 раз уж -moz- упомянут  :unsure:


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


#11 master-vek

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

Отправлено 19 October 2017 - 12:15

@ShowPrint,

 

Спасибо за ваше участие  в предметном общении и за рекомендации. :)


  • 0

#12 master-vek

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

Отправлено 30 November 2017 - 22:49

Как говориться деваться некуда.  Сделал ещё одну страничку со спойлерами. Штук 10. Загрузил на https://validator.w3.org/nu/?doc..., а он показывает 10 ошибок  вот такого характера:

Ошибка : элемент div не разрешен как дочерний элемент span в этом контексте. (Подавление дальнейших ошибок из этого поддерева.)

Из строки 137 , колонка 45 ; к строке 137 , столбец 71

акрыть</a><div style='display: none'><p st

Контексты, в которых divможет использоваться элемент : Где ожидается содержание потока . Как ребенок dlэлемента. Модель контента для элемента span: Фразинг контента .   Сапм спойлер выглядит так: <p style="font:bold 10pt Verdana;">Тухнет огонёк фитиля при отпускания кнопки или спустя минуты.</p>
<span><a href="" onclick="
obj=this.parentNode.childNodes[1].style;
tmp=(obj.display!='block') ? 'block' : 'none';
obj.display=tmp;
return false;">Подробнее-открыть/закрыть</a><div style='display: none'>
<p style="color:Green;">Запальник (фитиль)не зажигается или тухнет при розжиге.
Эта неисправность присуща газовым приборам  <strong>JUNKERS,  BERETTA, TERMET </strong>.<br>
...................................................................................................................................................
Доверьте эту работу нам т. 099 ........</p>
</div></span> Вот тут я и присох.   Что понимать:элемент div не разрешен как дочерний элемент span в этом контексте?   Буду признателен за подсказку. Спасибо всем.        


  • 0

#13 ShowPrint

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

Отправлено 01 December 2017 - 11:38

Что понимать:элемент divне разрешен как дочерний элемент spanв этом контексте?
Существуют два вида элементов вёрстки - блочные и строчные. Строчные могут вкладываться внутрь блочных, блочные внутрь строчных - нет (ошибка)

 

span - строчный элемент

div - блочный элемент

 

"Дочерний" элемент - это тот, который внутри другого элемента ("родительского").

 

Почитать и разобраться можно задав в ПС поисковый запрос "строчные и блочные элементы html".

Один из материалов из выдачи по этому запросу здесь (тынц)


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


#14 master-vek

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

Отправлено 01 December 2017 - 22:37

@ShowPrint,

 

Ваша рекомендация стала решающей в решении проблемы валидации

Что понимать:элемент div не разрешен как дочерний элемент span в этом контексте?

Конечно вставить блочный элемент в строчный это не порядок. Поэтому, заменил везде все div на span и чуть не порадовался. Но, оказывается, в тексте стоит тег Р внутри спена, и снова ошибки. Потом дошло, что надо смотреть, что оборачивают выше указанные теги.  Снова поменял все спены на дивы и валидатор показал 0 ошибок.

 

Так, по вашим рекомендациям я пройду обучение по именно HTML 5. 

Спасибо.


  • 0

#15 ShowPrint

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

Отправлено 01 December 2017 - 22:44

я пройду обучение по именно HTML 5
Это не только в html5 - это любая версия html.

Просто не все запариваются над ошибками: работает - и так сойдёт, но я стараюсь делать код валидным - меньше шансов что в каких-то непопулярных браузерах поползёт вёрстка.

Да и в целом: раз поправил ошибки, два поправил - дальше они выползают всё реже и реже )))


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


#16 master-vek

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

Отправлено 01 December 2017 - 23:36

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


  • 1

#17 master-vek

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

Отправлено 31 December 2017 - 20:09

http://www.masterweb...1695-showprint/

Хоть и не время для вопросов, (когда будет у Вас время) но ваш совет будет правильным, если я спрошу это.

 

Для вёрстки страницы набрал список, через float:right для ul прижал к правой стороне. Потом li растянул по горизонту влево через float:left. Затем поменял текст ссылок на картинки и теперь вопрос - если задать margin-right: 6.5% для  ul фиксированных размеров и отступов картинок, якобы на глаз по центру экрана любого формата. Это центрирование контейнера ul правильно или есть другое решение силами CSS3? Спасибо.


  • 0

#18 ShowPrint

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

Отправлено 31 December 2017 - 21:07

@master-vek, не совсем понял

Для вёрстки страницы набрал список, через float:right для ul прижал к правой стороне. Потом li растянул по горизонту влево через float:left. Затем поменял текст ссылок на картинки и теперь вопрос - если задать margin-right: 6.5% для  ul фиксированных размеров и отступов картинок,

 

 

На даче у камина не удобняк смотреть и не очень думается, если честно.

Вернусь - подумаю, понимание мне облегчит url, или страницы, или песочницы. На крайняк - схематичный эскиз того что хотелось бы получить.


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


#19 master-vek

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

Отправлено 31 December 2017 - 21:28

понимание мне облегчит url, или страницы,

Извините за неуместные вопросы. Когда сделаю, закину на хостинг и покажу.


  • 0

#20 ShowPrint

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

Отправлено 31 December 2017 - 21:37

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


robot

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


Похожие темы

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

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