Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Ограниченный border-bottom


Автор: BuShaRt 31.8.2010, 12:16
Сразу уточню, что border-bottom я привел как один из часто используемых вариантов и то, что решь идет не о ширине, которые задается непосредственно первым параметром, а о длине.

Вот допустим есть некоторый блок шириной 100px, мы задаем ему border-bottom и он автоматически появляется на всю длину нижней границы блока. Но вот мне стало интересно, можно ли сделать чтоб граница имела длину 80 px и находилась по центру т.е. грубо говоря от не отрубалось по 10px слева и справа.

Автор: magelan 31.8.2010, 12:59
оно?
Код

<DIV STYLE="position: relative; top: 0; left: 0; width: 100px; background-color: #EEEEEE">
content here
<DIV ALIGN="center">
  <DIV STYLE="position: relative; top: 0; left: 0; width: 80px; height: 1px; font-size: 0; line-height: 0; border-bottom: 1px solid red"></DIV>
</DIV>
</DIV>

стили завернуть в CSS, фон - для наглядности.

Автор: bars80080 31.8.2010, 14:27
граница - это не отдельный элемент и потому не имеет собственного параметра длины, только ширина

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

Автор: BuShaRt 31.8.2010, 16:43
magelan
bars80080
Вопрос состоит в том, как у блока ее сделать меньше, а не как визуально на экране нарисовать границу под блоком. Если уж так, то можно в два дива эту задачу без проблем решить.
Если так сделать нельзя, то увы, но вдруг. 

Автор: SelenIT 2.9.2010, 00:21
Возможно, будет можно http://dev.w3.org/csswg/css4-background/ (если оно не первоапрельская шутка - http://www.w3.org/Style/CSS/Tracker/products/20 - хотя с этим W3C нынче и не такое бывает...). А пока только дополнительным элементом, насколько я в курсе.

Автор: LITEOMILL 23.1.2023, 22:27
Модератор: Сообщение скрыто.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)