Не пойму почему слой не вкладывается в слой

@flashing · Регистрация: 19.10.2012

Приветствую многоуважаемое сообщество!

Вот написал такой кусок:

HTML5

<div style="position: relative; padding: 4px;" class="bord">
 <div style="left: 60px;" class="prts"> <!--  id="bizprt" -->
  <div class="prh">Бизнес-партнер</div><br/>
  <p>На 600 $ человек заказывает услуги ММЮС для себя и своей семьи<br/>
  + каждый, кто заказывает эту услугу, получает путевку на выбор в Турцию, Италию, Таиланд или Кипр. </br>
  Срок — 7 ночей, 8 дней. <br/>
  <div class="prh">649 $</div>
 </div>
 
 <div id="prt" style="right: 60px; float: right;" class="prts"> <!--  top: -260px; -->
  <div class="prh">Партнер</div><br/>
  <p>49 $ на личное годовое обслуживание. <br/>
  На остальные деньги 200 $ человек заказывает услуги ММЮС для себя и своей семьи.</br>
  <div class="prh">249 $</div>
 </div>
</div>

но почему-то слои не вкладываются в самый наружный слой

Что здесь не так?
Плз, ткните носом.

@paskalnikita · 07.11.2014, 02:48

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

Сообщение от flashing

свойства

HTML5

1	float:left;

.

@flashing · 07.11.2014, 11:00 **[ТС]**

Спасибо за ответ!

Я имею в виду, что слой

HTML5

1	<div style="position: relative; padding: 4px;" class="bord">

должен быть внешним по отношению к остальным; у слоев, вложенных в него, установлено position: absolute.
И вот они сейчас не вложены и вся структура ломается.
Не пойму почему не вложены - вроде написано правильно?

@Fedor92 · 07.11.2014, 11:14

Из-за position:absolute и ломается... При данном свойстве они будут выпадать из потока и располагаться отдельно от родительского блока... Либо выложите css - либо сделайте дедовским способом(задайте блокам border:1px solid) и посмотрите на их расположение относительно родительского...

@flashing · 08.11.2014, 00:16 **[ТС]**

Прочитал на сайте http://htmlbook.ru/ :
для absolute:

Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.

Вроде бы - да, так и есть, но нижеследующие элементы игнорируют этого самого родителя.
Если делаю вложенным слоям relative - расставить тоже можно, но родитель сохраняет свою высоту и получается под ним большой кусок пустого пространства

Что-то странное.

Добавлено через 4 минуты
Вот CSS вложенных div-ов с абсолютом:

CSS

1	.prts {position: absolute; border: 6px groove #8c3; border-radius: 10px; width: 35%; padding: 12px 30px;}

Сделал и "дедовским" способом - с видимым бордером у родителя, убедился, что расставляет не так, как мне надо

@Fedor92 · 08.11.2014, 00:31

Вы хотя бы скрин приложите, как хотите расставить элементы, а там будет видно...

@flashing · 08.11.2014, 10:05 **[ТС]**

Сообщение от Fedor92

Вы хотя бы скрин приложите, как хотите расставить элементы, а там будет видно...

ОК. Спасибо за "тз"!
Раньше я ни разу не ложил сюда картинки и думал, что здесь это вообще не применимо. После Вашего мессажа начал искать способ, оказалось - все ОК и картинки, и цитаты можно делать. В общем - спасибо!

Вот скрины и стили:
вар. 1
внешний див

HTML5

1	<div style="position: relative; padding: 6px; display: inline;" class="bord">

вложенный див

CSS

1	.prts {position: relative; border: 6px groove #8c3; border-radius: 10px; width: 35%; padding: 12px 30px;}

Не пойму почему слой не вкладывается в слой

Нужно - как здесь, только мешает слишком большой отступ ниже цветных рамок - до заголовка следующего раздела.

вар. 2
внешний див

HTML5

1	<div style="position: relative; padding: 6px;" class="bord">

вложенный див

CSS

1	.prts {position: absolute; border: 6px groove #8c3; border-radius: 10px; width: 35%; padding: 12px 30px;}

Все наползает одно на другое

в обоих случаях class = "bord" служит для отладки - красный бордер вокруг элемента

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

@ТЕТРА · 08.11.2014, 10:20

а можно эти же картинки, только с кодом страницы - вместе ?
и обведи или стрелочкой покажи что там не так

@Fedor92 · 08.11.2014, 13:58

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

А 2 вариант никуда не годиться - совсем...

@ТЕТРА · 08.11.2014, 14:51

надо ссылку на сайт, index.rar не надо =)

@flashing · 08.11.2014, 15:28 **[ТС]**

Сообщение от ТЕТРА

надо ссылку на сайт, index.rar не надо =)

http://imls.impartner.info/#prft
это внизу страницы

@Fedor92 · 08.11.2014, 15:35

Сообщение от ТЕТРА

надо ссылку на сайт, index.rar не надо =)

flashing, он это не Вам написал... Типа ирония... Абсолютное позиционирование - это зло... Пример позиционирования блоков я приложил с архивом... Можете даже испытать, заменив свой код на мой и увидите разницу...

@flashing · 08.11.2014, 18:17 **[ТС]**

Сообщение от Fedor92

Пример позиционирования блоков я приложил с архивом... Можете даже испытать, заменив свой код на мой и увидите разницу...

Ну, сделал без абсолюта. Fedor92, Спа-си-ба!!!
Когда дивам прописаны float-ы - между ними влазит следующий абзац, пришлось внешнему контейнеру дать высоту.
Получилось. Смотрите, ссылка та же. Хвалите

(типа шучу)

А вот на этой же странице, как мне быть с этим?:
Вложение 451893
тоже все на абсолютах... Круги - графика, все надписи в верстке.
Возможно ли их тоже сделать без абсолютного позиционирования?

Кстати, базово ориентируюсь на Хром, а в Опере надписи уползают

Как это предотвратить?
Вот код:

HTML5

<h3 class="hdrs">Доходы партнерского франчайзинга</h3>
<div style="position:relative;">
<img src="images/earn.jpg" width="100%" />
 
<div class="cls" style="left: 180px; top:195px;">6 человек</div> <div class="inr" style="left: 200px; color:white;">400 $</div>
<div class="cls" style="left: 280px; top:170px;">17 человек</div> <div class="inr" style="left: 290px; color:#dda;">1 000 $</div>
<div class="cls" style="left: 380px; top:195px;">34 человека</div> <div class="inr" style="left: 410px; color: white;">3 000 $</div>
<div class="cls" style="left: 560px; top:215px;">67 человек</div> <div class="inr" style="left: 570px; color: white;">6 000 $</div>
<div class="cls" style="left: 760px; top:235px;">134 человека</div> <div class="inr" style="left: 777px; color: #363;">12 500 $</div>
</br>
<p>Сегодня еще нет мобильной юридической службы, которая бы развивалась на международный рынок. Да еще и такими темпами. ММЮС — это первый бизнес, связанный с мобильной юридической службой.</p>
</div>

стили:

CSS

1	.cls{position: absolute; font-size:10pt; font-weight:bold;}

CSS

1	.inr{position: absolute; top: 95px;}

@Fedor92 · 08.11.2014, 18:29

Любую вёрстку лучше всего делать с float... Всё абсолютное позиционирование можно заменить - это дело времени... Почему я сказал, что position:absolute - это зло... Просто откройте сайт в ie и помасштабируйте страницу увидите всё сами...

@flashing · 08.11.2014, 18:39 **[ТС]**

Чего-то "вложение" не вложилось

- картинка
пробую повторить...

скрин-шот

@flashing · 08.11.2014, 18:40 **[ТС]**

Сообщение от Fedor92

Всё абсолютное позиционирование можно заменить - это дело времени.

Хорошо. Так и сделаю.
Спасибо!

Ну, а по поводу того, в Опере цифры уползают - что посоветуете?

@Fedor92 · 08.11.2014, 19:11

По секрету....

Они уползают не только в Опере... С цифрами всё посложней есть много вариантов реализации... Можно опять же использовать float и с помощью margin спозиционировать... Можно сделать более сложную конструкцию, порезав весь рисунок на мелкие элементы и из них собрать мозаику... Наиболее простой вариант открыть фотошоп там влепить цифры и вставить картинкой...

Но последний вариант в пользу бедных...

@flashing · 09.11.2014, 19:44 **[ТС]**

Посмотрел в Файерфоксе - вроде нормально.
Делать надписи в графике не подходит - эти цифры скоро должы меняться.
Как в CSS исправить это "оперное" смещение? Это возможно без скриптов?

@Fedor92 · 09.11.2014, 19:56

Сообщение от flashing

Как в CSS исправить это "оперное" смещение? Это возможно без скриптов?

Это возможно при правильной вёрстке... На мой взгляд для Вас идеальный вариант порезать картинку и собрать её из блоков, естественно с указанием необходимых цифр...

@Fedor92 2953 / 2539 / 1065 Регистрация: 15.12.2012 Сообщений: 9,512 Записей в блоге: 10
	07.11.2014, 11:14	4
	Из-за position:absolute и ломается... При данном свойстве они будут выпадать из потока и располагаться отдельно от родительского блока... Либо выложите css - либо сделайте дедовским способом(задайте блокам border:1px solid) и посмотрите на их расположение относительно родительского... 1

@Fedor92 2953 / 2539 / 1065 Регистрация: 15.12.2012 Сообщений: 9,512 Записей в блоге: 10
	08.11.2014, 00:31	6
	Вы хотя бы скрин приложите, как хотите расставить элементы, а там будет видно... 0

@ТЕТРА 0 / 0 / 0 Регистрация: 08.11.2014 Сообщений: 6
	08.11.2014, 10:20	8
	а можно эти же картинки, только с кодом страницы - вместе ? и обведи или стрелочкой покажи что там не так 0

@ТЕТРА 0 / 0 / 0 Регистрация: 08.11.2014 Сообщений: 6
	08.11.2014, 14:51	10
	надо ссылку на сайт, index.rar не надо =) 0

@flashing 15 / 8 / 2 Регистрация: 19.10.2012 Сообщений: 131
	08.11.2014, 15:28 [ТС]	11
	Сообщение от ТЕТРА надо ссылку на сайт, index.rar не надо =) http://imls.impartner.info/#prft это внизу страницы 0

@Fedor92 2953 / 2539 / 1065 Регистрация: 15.12.2012 Сообщений: 9,512 Записей в блоге: 10
	08.11.2014, 15:35	12
	Сообщение от ТЕТРА надо ссылку на сайт, index.rar не надо =) flashing, он это не Вам написал... Типа ирония... Абсолютное позиционирование - это зло... Пример позиционирования блоков я приложил с архивом... Можете даже испытать, заменив свой код на мой и увидите разницу... 0

@Fedor92 2953 / 2539 / 1065 Регистрация: 15.12.2012 Сообщений: 9,512 Записей в блоге: 10
	08.11.2014, 18:29	14
	Любую вёрстку лучше всего делать с float... Всё абсолютное позиционирование можно заменить - это дело времени... Почему я сказал, что position:absolute - это зло... Просто откройте сайт в ie и помасштабируйте страницу увидите всё сами... 1

@flashing 15 / 8 / 2 Регистрация: 19.10.2012 Сообщений: 131
	08.11.2014, 18:39 [ТС]	15
	Чего-то "вложение" не вложилось - картинка пробую повторить... скрин-шот 0 Миниатюры

@flashing 15 / 8 / 2 Регистрация: 19.10.2012 Сообщений: 131
	08.11.2014, 18:40 [ТС]	16
	Сообщение от Fedor92 Всё абсолютное позиционирование можно заменить - это дело времени. Хорошо. Так и сделаю. Спасибо! Ну, а по поводу того, в Опере цифры уползают - что посоветуете? 0

@Fedor92 2953 / 2539 / 1065 Регистрация: 15.12.2012 Сообщений: 9,512 Записей в блоге: 10
	08.11.2014, 19:11	17
	По секрету.... Они уползают не только в Опере... С цифрами всё посложней есть много вариантов реализации... Можно опять же использовать float и с помощью margin спозиционировать... Можно сделать более сложную конструкцию, порезав весь рисунок на мелкие элементы и из них собрать мозаику... Наиболее простой вариант открыть фотошоп там влепить цифры и вставить картинкой... Но последний вариант в пользу бедных... 0

@flashing 15 / 8 / 2 Регистрация: 19.10.2012 Сообщений: 131
	09.11.2014, 19:44 [ТС]	18
	Посмотрел в Файерфоксе - вроде нормально. Делать надписи в графике не подходит - эти цифры скоро должы меняться. Как в CSS исправить это "оперное" смещение? Это возможно без скриптов? 0

@Fedor92 2953 / 2539 / 1065 Регистрация: 15.12.2012 Сообщений: 9,512 Записей в блоге: 10
	09.11.2014, 19:56	19
	Сообщение от flashing Как в CSS исправить это "оперное" смещение? Это возможно без скриптов? Это возможно при правильной вёрстке... На мой взгляд для Вас идеальный вариант порезать картинку и собрать её из блоков, естественно с указанием необходимых цифр... 0