forum.boolean.name

forum.boolean.name (http://forum.boolean.name/index.php)
-   JavaScript / HTML (http://forum.boolean.name/forumdisplay.php?f=136)
-   -   Как сверстать (http://forum.boolean.name/showthread.php?t=18013)

h1dd3n 23.03.2013 02:42

Как сверстать
 
Вложений: 1
"Как сверстать?" - вот в чем вопрос.
Конкретно: имеется такая вот линия (click):
Вложение 18964
Нужно чтобы она могла растягиваться на любую ширину. Сначала мне пришла "гениальная" идея:
[capleft][stretch][middle][stretch][capright]
Режем картинку на 4 части, получаем растягивающуюся на любую длину линию. Вот только после того как я ее порезал, с css у меня ничего не получилось... То есть нужно расположить 5 дивов друг за другом: capleft,middle,capright - фиксированы по ширине, а stretch растягиваются. В сумме такая конструкция должна по ширине занимать родительский див полностью. Подскажите как такое сделать) Или возможно можно сверстать как-то проще?

moka 23.03.2013 02:53

Ответ: Как сверстать
 
Фон всегда белый?

Вот замутил: http://jsfiddle.net/tRJ6w/
И потестить его Responsive'ность: http://moka.co/restest/#http://fiddl...et/tRJ6w/show/

Тут всё просто. У тебя есть основной фон - который зациклен. Затем есть лево, право и серидинка.
Есть основной элемент который имеет зацикленный фон, а в нём 3 элемента для сторон и серидинки.
Стороны отлично float'ятся к краям, а серидинку нужно центрировать, я часто использую position: absolute и left: 50% с отрицательным margin-left, чтобы было реально по серидинке.
С inline-block который можно было бы отцентровать используя text-align стараюсь не общаться, т.к. проблемы с IE большие. Да и вообще в последнее время не использовал inline-block уже очень давно.


Часовой пояс GMT +4, время: 19:17.

vBulletin® Version 3.6.5.
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Перевод: zCarot