Псевдоэлемент :after

[Temiks]

Здравствуйте. Возник один вопрос: можно ли сделать через один див подобное c использованием псевдоэлементов :before или :after?

Код можно править тут

--

Дополнение: получается изначально диву задана ширина в 100%, после чего его ширина изменяется до 100рх и центрируется по центру.

Edited August 28, 2014 by Temiks

[darknebel]

Здравствуйте. Возник один вопрос: можно ли сделать через один див подобное c использованием псевдоэлементов :before или :after?

Код можно править тут

--

Дополнение: получается изначально диву задана ширина в 100%, после чего его ширина изменяется до 100рх и центрируется по центру.

Если я правильно понял, то как-то так http://jsfiddle.net/t34nqzdz/5/

Edited August 28, 2014 by darknebel

[Temiks]

Если я правильно понял, то как-то так http://jsfiddle.net/...iks/t34nqzdz/1/

Вы, наверное, не сохранили код, потому что открывается изначальная ссылка

[hypnocolor]

Не совсем понятно, зачем в данном случае ограничиваться только одним элементом. Да, можно воспользоваться предложенным вариантом, но в таком случае будет жёсткое ограничение на контент зелёной области — только текст и ничего более. Поэтому в данном случае ограничение одним элементом избыточно, на мой взгляд. Больше минусов от него.

Edited August 28, 2014 by hypnocolor

[Temiks]

Не совсем понятно, зачем в данном случае ограничиваться только одним элементом

хотел код

<div class="wrap" >    <div class="content" >         <p>content block</p>    </div></div>

заменить на

<div class="wrap" >     <p>content block</p></div>

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

Нет, такое не подходит, в контенте будут размещены разные блоки, с разным позиционированием. Так что тогда вернусь к изначальному коду

[hypnocolor]

Рома Комаров недавно высказался, и я склонен с ним согласиться:

 

Maintainability is so much more important than “clean HTML”. HTML is not data. Do not use “smart” CSS where you can write dumb HTML.

Edited August 28, 2014 by hypnocolor

[Temiks]

Do not use “smart” CSS where you can write dumb HTML.

Хорошо, прислушаюсь к его мнению.

Но по правде говоря, мы же сейчас не используем тег <br>, а используем вместо него, например, span у которого стили прописаны display: block

Edited August 28, 2014 by Temiks

[hypnocolor]

Хорошо, прислушаюсь к его мнению.

Но по правде говоря, мы же сейчас не используем тег <br>, а используем вместо него, например, span у которого стили прописаны display: block

 

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

Edited August 28, 2014 by hypnocolor

[Temiks]

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

Я не совсем корректно перевел. Спасибо за разъяснение

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

Edited August 28, 2014 by Temiks

[hypnocolor]

Вообще, то же самое, что в исходном варианте прописано у .green, можно прописать для параграфа, тогда .green вообще можно убрать, оставив только параграф — вот и минус один тег.

Edited August 28, 2014 by hypnocolor

[Temiks]

Вообще, то же самое, что в исходном варианте прописано у .green, можно прописать для параграфа, тогда .green вообще можно убрать, оставив только параграф — вот и минус один тег.

Это был просто пример, на самом же деле там может быть не только параграф, могут быть другие теги(блоки) и тогда нужно будет прописывать каждому классу стиль через группировку, к примеру

.block1, .block2, block3 {width: 100px;margin: auto;}

Еще думал про такое: хотя нет, это не подойдет под все случаи.

body {text-align: center;}

Edited August 28, 2014 by Temiks

[hypnocolor]

Можно же сделать общий класс (ширина в 100 точек, расположить посередине) и давать его каждому блоку, а для дополнительного оформления каждому блоку свои дополнительные классы придумать.

[Temiks]

Можно же сделать общий класс

Верно, но думаю лучше все же сделать через два дива   Это удобно, когда несколько элементов, а если их в дальнейшем будет 100, то это кошмар..

[SelenIT]

Теоретически, в новых браузерах можно извернуться как-то так. Практически, я согласен с Комаровым и hypnocolor-ом (и не только): не стоит борьба с этой несчастной оберткой таких контринтуитивных подвыподвертов в стилях.

 

Я бы сказал, что у внешнего контейнера (структурного «строительного блока» страницы) и внутренней обертки (общий контейнер содержащейся там информации) даже есть своя отдельная семантика . Во многих случаях можно заменить внутренний div на section и разграничить визуальную и логическую обертки еще более явно.

[Temiks]

Теоретически, в новых браузерах можно извернуться как-то так.

Спасибо, интересное решение!

Если я правильно понял, то как-то так http://jsfiddle.net/t34nqzdz/5/

Нет, этот способ не подходит, т.к под значением text имел ввиду не слово text, а различный контент..

Хороший способ предложил SelenIT, только вот ie9 не поддерживает фон , но в ie10 уже все отлично

[SelenIT]

Фон — полбеды, его как раз можно «костыльнуть» псевдиком (одним, абс-но позиционированным). У calc() пока еще серьезные проблемы в мобильном царстве...