Задачка интересная, чистый css

[RodgerFox]

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

И так, есть див. В нем есть заголовок и несколько параграфов.

Ширина блока, фиксированная. Высота нет!

Как только при помощи css создать еще 2 блока, и подложить их под первый и чуть чуть сдвинуть. дабы получилось что то вроде страниц.

Проблема: для доп. блоков не могу указать высоту, потому что высота главного блока, для которого повторять нужно резиновая.

Идеи:

1) использовать after, before

<div class="block">
  <h2>Заголовок</h2>
  <p>Параграф 1</p>
  <p>Параграф 2</p>
  <p>Параграф 3</p>
  <p>Параграф 4</p>
  <p>Параграф 5</p>
</div>

И использовать афтер и бифо. Пробовал 100 процентов указать, или взять высоту родителя inherit. вообще не как =\

2) Создать доп. блоки, брать высоту у родителя block, и прятать их при помощи z-index назад, под этот блок, но не получилось спрятать их за родителя. =\

<div class="block">
  <h2>Заголовок</h2>
  <p>Параграф 1</p>
  <p>Параграф 2</p>
  <p>Параграф 3</p>
  <p>Параграф 4</p>
  <p>Параграф 5</p>
  <div class="ad-block ad1"> </div>
  <div class="ad-block ad2"> </div>
</div>

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

У кого есть какие идеи?

Пример того, что хочу получить, http://ru.html.net/tutorials/css/lesson15_ex1.php только высота других блоков должна приниматься от главного.

[ShumNo]

что если просто вложить один в другой, а нижний сдвинуть? (position:relative;)

[psywalker]

что если просто вложить один в другой, а нижний сдвинуть? (position:relative;)

И тогда по идее нижний сдвинется вместе с содержащимися боксами.

Я бы так делал лучше

[RodgerFox]

что если просто вложить один в другой, а нижний сдвинуть? (position:relative;)

И тогда по идее нижний сдвинется вместе с содержащимися боксами.

Я бы так делал лучше

не понял не много вашу идею, там js? нужно без него решить задачку >.<

что если просто вложить один в другой, а нижний сдвинуть? (position:relative;)

Лол, наверное я ступил, вложил блоки друг в друга и начал двигать каждый на ровное количество и все отлично) Большое спасибо. Буду рад увидеть более адекватные способы.

Edited November 18, 2012 by RodgerFox

[psywalker]

не понял не много вашу идею, там js?

Какой js? Ты походу спишь в одном ботинке, правда)

Вот весь код:

.block {
    position: relative;
    border: 1px solid #000;
    width: 200px;
}

.block:after {
    position: absolute;
    width: 100%;
    top: 20px;
    bottom: -20px;
    right: -20px;
    border: 1px solid red;
    content: '';
}

[RodgerFox]

не понял не много вашу идею, там js?

Какой js? Ты походу спишь в одном ботинке, правда)

Вот весь код:

.block {
    position: relative;
    border: 1px solid #000;
    width: 200px;
}

.block:after {
    position: absolute;
    width: 100%;
    top: 20px;
    bottom: -20px;
    right: -20px;
    border: 1px solid red;
    content: '';
}

Я так наал делать с самого начала, но почему то не получилось. Первый способ писал. Странно почему так, тупо не отображаются не один афте или бифо. Почему так может быть? Создал и новый документ все заново, бесполезно! Куда копать?

[psywalker]

не понял не много вашу идею, там js?

Какой js? Ты походу спишь в одном ботинке, правда)

Вот весь код:

.block {
    position: relative;
    border: 1px solid #000;
    width: 200px;
}

.block:after {
    position: absolute;
    width: 100%;
    top: 20px;
    bottom: -20px;
    right: -20px;
    border: 1px solid red;
    content: '';
}

Я так наал делать с самого начала, но почему то не получилось. Первый способ писал. Странно почему так, тупо не отображаются не один афте или бифо. Почему так может быть? Создал и новый документ все заново, бесполезно! Куда копать?

Потому что ты ставил высоту псевдоэлементам в процентах, которую им неоткуда было высчитывать. А я сделал через смещения: top, bottom. Просекаешь?)

[RodgerFox]

не понял не много вашу идею, там js?

Какой js? Ты походу спишь в одном ботинке, правда)

Вот весь код:

.block {
    position: relative;
    border: 1px solid #000;
    width: 200px;
}

.block:after {
    position: absolute;
    width: 100%;
    top: 20px;
    bottom: -20px;
    right: -20px;
    border: 1px solid red;
    content: '';
}

Я так наал делать с самого начала, но почему то не получилось. Первый способ писал. Странно почему так, тупо не отображаются не один афте или бифо. Почему так может быть? Создал и новый документ все заново, бесполезно! Куда копать?

Потому что ты ставил высоту псевдоэлементам в процентах, которую им неоткуда было высчитывать. А я сделал через смещения: top, bottom. Просекаешь?)

Главный блок должен быть резиновым. Поэтому псевдоэлементы будут высотой в бордюр =\ конечно можно помагичить используя еще outline а бордюр взять ывсотой и шириной родительского элемента, но думаю не заработает =\

Edited November 18, 2012 by RodgerFox

[psywalker]

не понял не много вашу идею, там js?

Какой js? Ты походу спишь в одном ботинке, правда)

Вот весь код:

.block {
    position: relative;
    border: 1px solid #000;
    width: 200px;
}

.block:after {
    position: absolute;
    width: 100%;
    top: 20px;
    bottom: -20px;
    right: -20px;
    border: 1px solid red;
    content: '';
}

Я так наал делать с самого начала, но почему то не получилось. Первый способ писал. Странно почему так, тупо не отображаются не один афте или бифо. Почему так может быть? Создал и новый документ все заново, бесполезно! Куда копать?

Потому что ты ставил высоту псевдоэлементам в процентах, которую им неоткуда было высчитывать. А я сделал через смещения: top, bottom. Просекаешь?)

Главный блок должен быть резиновым.

А он ща какой по высоте по твоему?)

p.s. короче, если так не пашет, тогда я не понял задачу((

[RodgerFox]

не понял не много вашу идею, там js?

Какой js? Ты походу спишь в одном ботинке, правда)

Вот весь код:

.block {
    position: relative;
    border: 1px solid #000;
    width: 200px;
}

.block:after {
    position: absolute;
    width: 100%;
    top: 20px;
    bottom: -20px;
    right: -20px;
    border: 1px solid red;
    content: '';
}

Я так наал делать с самого начала, но почему то не получилось. Первый способ писал. Странно почему так, тупо не отображаются не один афте или бифо. Почему так может быть? Создал и новый документ все заново, бесполезно! Куда копать?

Потому что ты ставил высоту псевдоэлементам в процентах, которую им неоткуда было высчитывать. А я сделал через смещения: top, bottom. Просекаешь?)

Главный блок должен быть резиновым.

А он ща какой по высоте по твоему?)

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

Вставьте в блок типа этого:

<h2>Детали заказа</h2>

<time>время</time>

<p>Текстовое поле</p>

<p>Текстовое поле</p>

<p>Текстовое поле</p>

<p>Текстовое поле</p>

и уменьшите расстояние, на пример, на 3px, заполните фоном и блок и пседво, и посмотрите что за бред получится. НУ и попробовать исправить при помощи z-index.

[psywalker]

RodgerFox, Держи код на сервис) http://jsfiddle.net/ - покажи пример и опиши подробнее чё ты хочешь)

Этот вариант точно не подходит?

[RodgerFox]

RodgerFox, Держи код на сервис) http://jsfiddle.net/ - покажи пример и опиши подробнее чё ты хочешь)

Этот вариант точно не подходит?

http://jsfiddle.net/VDPsY/2/

[psywalker]

RodgerFox, Держи код на сервис) http://jsfiddle.net/ - покажи пример и опиши подробнее чё ты хочешь)

Этот вариант точно не подходит?

http://jsfiddle.net/VDPsY/2/

Ааа, ты хочешь, чтобы блоки стояли рядом что ли просто, а не находились один в другом? Но при этом высоты были, как первый, главный, верхний?

Или в твоём примере мой блок вообще не должен присутствовать?

[RodgerFox]

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

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

p.s. Включи ЛС, нашел баг на форуме. срочно!

Еще раз привет, при просмотре своего профиля заметил ссылку на вверху справа снять награду, под ссылкой пожаловаться на пользователя. Стало интересно, зашел к тебе на профиль. могу лишить любой награды. Будь осторожнее.

Edited November 18, 2012 by RodgerFox

[psywalker]

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

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

p.s. Включи ЛС, нашел баг на форуме. срочно!

Еще раз привет, при просмотре своего профиля заметил ссылку на вверху справа снять награду, под ссылкой пожаловаться на пользователя. Стало интересно, зашел к тебе на профиль. могу лишить любой награды. Будь осторожнее.

Погоди, а чем тогда мой вариант не угодил? Не, просто интересно, что именно в него нужно добавить из твоей идеи, чтобы вариант не прокатывал?

[RodgerFox]

псевдоклассы before/after должны быть под главным блоком. с фоном тем же и бордюром. если добавить фон и z-index увидишь, что все равно бордюр накладывается на основной блок. не пойму почему, но так получается. Из-за этого не вариант.

[psywalker]

псевдоклассы before/after должны быть под главным блоком. с фоном тем же и бордюром. если добавить фон и z-index увидишь, что все равно бордюр накладывается на основной блок. не пойму почему, но так получается. Из-за этого не вариант.

http://jsfiddle.net/VDPsY/9/ - ну и чё?)

[RodgerFox]

Блин... ппц. Вот и спать не хочу и работать не могу, с полудня сижу верстаю. Ппц... понял в чем фишка. я использовать 2 показателя, top/right а ты еще 3 используешь. поэтому он у тебя не сжимается... ОМГшечки... Если ты в таком хорошем расположении, подскажи плз еще одну вещь. Вот знаю как делать но не работает =D

—--\

\

/

—--/

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

:before {
   content:"";
   position: absolute;
   right: 100%;
   top: 26px;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid red;
   border-bottom: 13px solid transparent;
}

и не пашет... почему???? скравтил пример: http://jsfiddle.net/VDPsY/19/

[lexxcode]

Можно тенями странички поделать http://jsfiddle.net/alexriz/jLC74/

[RodgerFox]

Да, но это просто вообще под стиль не подходит весь) А так можно!

Всем спасибо, пора уходить. Буду очень рад, за доработку кнопки, времени в обрез... и как всегда что то упускаю. Удачи >.<

[psywalker]

типа, есть у нас прямоугольник. ссылка, кнопка, не важно.

:before {
}

Нет, важно! Нужный нам раздел спецификации. В конце раздела есть примечание по теме:

Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

"Что означает примерно: Текущая спецификация не полностью определяет взаимодействие :before и :after с замещаемыми элементами (изображениями, полями формы и т. д.). Это более детально будет определено в будущей спецификации."

Отсюда можно сделать вывод, что браузеры могут поступать так, как хотят. На данный момент генерируемый контент в замещаемых элементах поддерживает/ла только Opera. Сделал тестовый пример, что-то уже нигде ничего не пашет

Так что важно, что именно ты используешь в этом плане, ссылка или кнопку