Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.67/9: Рейтинг темы: голосов - 9, средняя оценка - 4.67
15 / 8 / 2
Регистрация: 19.10.2012
Сообщений: 131
1

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

07.11.2014, 00:34. Просмотров 1734. Ответов 18
Метки нет (Все метки)


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

Вот написал такой кусок:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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>
но почему-то слои не вкладываются в самый наружный слой Что здесь не так?
Плз, ткните носом.
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
07.11.2014, 00:34
Ответы с готовыми решениями:

Слой в IE
&lt;style type=&quot;text/css&quot;&gt; .center { width: 1000px; padding: 10px; margin: 0 auto;...

Скрывающийся слой
Ребята, такой вопрос, вот скрывающийся слой, при нажатии на кнопку новое окно, вылезет новое окно,...

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

двойной слой
Не ругайтесь, громка. я как бы только начинаю осваивать web-программирование. покажите пожалуйста...

__________________
Помогаю в написании студенческих работ здесь.
18
86 / 86 / 30
Регистрация: 12.08.2014
Сообщений: 1,111
07.11.2014, 02:48 2
что значит наружный слой? Не совсем понятно , что Вы имеете ввиду.
Если Вы хотите разместить блоки вряд, задайте первому блоку
Цитата Сообщение от flashing Посмотреть сообщение
<div style="left: 60px;" class="prts"> <!-- id="bizprt" -->
свойства
HTML5
1
float:left;
.
1
15 / 8 / 2
Регистрация: 19.10.2012
Сообщений: 131
07.11.2014, 11:00  [ТС] 3
Спасибо за ответ!

Я имею в виду, что слой
HTML5
1
<div style="position: relative; padding: 4px;" class="bord">
должен быть внешним по отношению к остальным; у слоев, вложенных в него, установлено position: absolute.
И вот они сейчас не вложены и вся структура ломается.
Не пойму почему не вложены - вроде написано правильно?
0
Эксперт HTML/CSS
2953 / 2539 / 1065
Регистрация: 15.12.2012
Сообщений: 9,512
Записей в блоге: 10
07.11.2014, 11:14 4
Из-за position:absolute и ломается... При данном свойстве они будут выпадать из потока и располагаться отдельно от родительского блока... Либо выложите css - либо сделайте дедовским способом(задайте блокам border:1px solid) и посмотрите на их расположение относительно родительского...
1
15 / 8 / 2
Регистрация: 19.10.2012
Сообщений: 131
08.11.2014, 00:16  [ТС] 5
Прочитал на сайте 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;}
Сделал и "дедовским" способом - с видимым бордером у родителя, убедился, что расставляет не так, как мне надо
0
Эксперт HTML/CSS
2953 / 2539 / 1065
Регистрация: 15.12.2012
Сообщений: 9,512
Записей в блоге: 10
08.11.2014, 00:31 6
Вы хотя бы скрин приложите, как хотите расставить элементы, а там будет видно...
0
15 / 8 / 2
Регистрация: 19.10.2012
Сообщений: 131
08.11.2014, 10:05  [ТС] 7
Цитата Сообщение от 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" служит для отладки - красный бордер вокруг элемента

есть еще некоторые отличия в стилях при одном и другом вариантах, но это я уже подгоняю вручную марджинами, топами и проч.
0
0 / 0 / 0
Регистрация: 08.11.2014
Сообщений: 6
08.11.2014, 10:20 8
а можно эти же картинки, только с кодом страницы - вместе ?
и обведи или стрелочкой покажи что там не так
0
Эксперт HTML/CSS
2953 / 2539 / 1065
Регистрация: 15.12.2012
Сообщений: 9,512
Записей в блоге: 10
08.11.2014, 13:58 9
Ну что я могу сказать... Вот Вам небольшой кусочек кода, написанный, исходя из первого скрина... Может он Вам поможет сориентироваться... А 2 вариант никуда не годиться - совсем...
1
Вложения
Тип файла: rar index.rar (367 байт, 2 просмотров)
0 / 0 / 0
Регистрация: 08.11.2014
Сообщений: 6
08.11.2014, 14:51 10
надо ссылку на сайт, index.rar не надо =)
0
15 / 8 / 2
Регистрация: 19.10.2012
Сообщений: 131
08.11.2014, 15:28  [ТС] 11
Цитата Сообщение от ТЕТРА Посмотреть сообщение
надо ссылку на сайт, index.rar не надо =)
http://imls.impartner.info/#prft
это внизу страницы
0
Эксперт HTML/CSS
2953 / 2539 / 1065
Регистрация: 15.12.2012
Сообщений: 9,512
Записей в блоге: 10
08.11.2014, 15:35 12
Цитата Сообщение от ТЕТРА Посмотреть сообщение
надо ссылку на сайт, index.rar не надо =)
flashing, он это не Вам написал... Типа ирония... Абсолютное позиционирование - это зло... Пример позиционирования блоков я приложил с архивом... Можете даже испытать, заменив свой код на мой и увидите разницу...
0
15 / 8 / 2
Регистрация: 19.10.2012
Сообщений: 131
08.11.2014, 18:17  [ТС] 13
Цитата Сообщение от Fedor92 Посмотреть сообщение
Пример позиционирования блоков я приложил с архивом... Можете даже испытать, заменив свой код на мой и увидите разницу...
Ну, сделал без абсолюта. Fedor92, Спа-си-ба!!!
Когда дивам прописаны float-ы - между ними влазит следующий абзац, пришлось внешнему контейнеру дать высоту.
Получилось. Смотрите, ссылка та же. Хвалите (типа шучу)

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

Кстати, базово ориентируюсь на Хром, а в Опере надписи уползают Как это предотвратить?
Вот код:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<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;}
0
Эксперт HTML/CSS
2953 / 2539 / 1065
Регистрация: 15.12.2012
Сообщений: 9,512
Записей в блоге: 10
08.11.2014, 18:29 14
Любую вёрстку лучше всего делать с float... Всё абсолютное позиционирование можно заменить - это дело времени... Почему я сказал, что position:absolute - это зло... Просто откройте сайт в ie и помасштабируйте страницу увидите всё сами...
1
15 / 8 / 2
Регистрация: 19.10.2012
Сообщений: 131
08.11.2014, 18:39  [ТС] 15
Чего-то "вложение" не вложилось - картинка
пробую повторить...

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

Ну, а по поводу того, в Опере цифры уползают - что посоветуете?
0
Эксперт HTML/CSS
2953 / 2539 / 1065
Регистрация: 15.12.2012
Сообщений: 9,512
Записей в блоге: 10
08.11.2014, 19:11 17
По секрету.... Они уползают не только в Опере... С цифрами всё посложней есть много вариантов реализации... Можно опять же использовать float и с помощью margin спозиционировать... Можно сделать более сложную конструкцию, порезав весь рисунок на мелкие элементы и из них собрать мозаику... Наиболее простой вариант открыть фотошоп там влепить цифры и вставить картинкой... Но последний вариант в пользу бедных...
0
15 / 8 / 2
Регистрация: 19.10.2012
Сообщений: 131
09.11.2014, 19:44  [ТС] 18
Посмотрел в Файерфоксе - вроде нормально.
Делать надписи в графике не подходит - эти цифры скоро должы меняться.
Как в CSS исправить это "оперное" смещение? Это возможно без скриптов?
0
Эксперт HTML/CSS
2953 / 2539 / 1065
Регистрация: 15.12.2012
Сообщений: 9,512
Записей в блоге: 10
09.11.2014, 19:56 19
Цитата Сообщение от flashing Посмотреть сообщение
Как в CSS исправить это "оперное" смещение? Это возможно без скриптов?
Это возможно при правильной вёрстке... На мой взгляд для Вас идеальный вариант порезать картинку и собрать её из блоков, естественно с указанием необходимых цифр...
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
09.11.2014, 19:56

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь или здесь.

Не виден слой
Короче, нужно срочно сварганить сайт. Нашел готовый шаблон с картинкой и менюхой на флэше....

Внешний слой матрицы
Дана целочисленная прямоугольная матрица размера m×n, заполненная случайными числами. Осуществить...

Слой поверх котролов
Всем привет. Делаю форму регистрации. Блоки выглядят как стеклянные. Хочу сделать так, что бы...

Как вывести слой?
Как вывести слой с div.php на text.html??? Что я делаю не так??? div.php $code = &quot;&lt;div...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
19
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.