Область по тексту. css

Hitry

Сообщения: 6 Репутация: N Группа: Кто попало
27 апреля 2008 г. 23:21
Добрый день.

На сайте есть блок для текста. Он имеет вид тетради. Левая часть - переплет. Остальное текстура бумаги. Тетрадь продливается вниз до конца текста.

В CSS было создано два класса "pereplet" и "bumaga".Вывод этих частей идет по абсолютной величине. Вывод текста происходит так

<span class="bumaga"> TEXT TEXT TEXT </span>.

Проблема: Переплет не меняет высоту в зависимости от текста (это логично). Как привязать обе части к тексту?

Так не вышло:
<span class="pereplet"> <span class="bumaga"> TEXT TEXT TEXT </span> </span>
Timur

Сообщения: 1068 Репутация: N Группа: Джедаи

27 апреля 2008 г. 23:43, спустя 22 минуты 36 секунд

Hitry, лучше бы картинкой изобразил, а непонятно толком…
Если я всё-таки правильно понял, нужно два вертикальных блока, причем левый должен зависеть от размера правого?
- для ленивых: <table> и т.п.
- http://cssing.org.ua/2004/09/10/flex-faux/ - я обычно использую псевдо-колонки (Faux Columns), самый простой способ, имхо.
Hitry

Сообщения: 6 Репутация: N Группа: Кто попало

28 апреля 2008 г. 0:33, спустя 49 минут 56 секунд

да… вообщем формулировка могла быть и такой : создать два блока одинаковой высоты. Тэйбл использовать не хочу, а за ссылку спасибо - буду разбираться.
Hitry

Сообщения: 6 Репутация: N Группа: Кто попало
2 мая 2008 г. 19:42, спустя 4 дня 19 часов 9 минут
В моём случае есть две колонки. Одна фиксированной ширины (переплёт), вторая - нет (бумага). Высота должна быть по тексту в правой. Как реализовать так и не знаю…
(164)
Timur

Сообщения: 1068 Репутация: N Группа: Джедаи
2 мая 2008 г. 23:11, спустя 3 часа 28 минут 52 секунды
Если поверх переплета ничего нет - ещё проще. Тупо делаем общий фон (по ширине - берем полосу от начала до конца), повторяем его по вертикали, и делаем соответсвующие отступы. Примерно так:
<style type="text/css"> #content { background:url(paper.jpg) #fff repeat-y; padding:15px 5px 5px 85px; /* 85px - это отступ со стороны переплета */ } </style> <div id="content"> Текст<br /> Текст<br /> Текст<br /> Текст<br /> </div>
XoxMa

Сообщения: 135 Репутация: N Группа: Кто попало
2 мая 2008 г. 23:23, спустя 11 минут 33 секунды
Так не вышло:
<span class="pereplet"> <span class="bumaga"> TEXT TEXT TEXT </span> </span>

Странно, твой способ должен работать.
Иногда делают так:
<span class="pereplet" id="bumaga">TEXT</span>
Timur

Сообщения: 1068 Репутация: N Группа: Джедаи

3 мая 2008 г. 10:51, спустя 11 часов 27 минут 53 секунды

XoxMa, ничего не понял из твоего сообщения
Hitry

Сообщения: 6 Репутация: N Группа: Кто попало
24 мая 2008 г. 18:38, спустя 21 день 7 часов 46 минут
Возникла очередная проблема…
картнинка у меня png и в IE не работает. Почитал и нашел такое решение

.Notebook { BACKGROUND: none transparent scroll repeat 0% 0%; FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://localhost/files/notebook.png,sizingMethod=crop); }

в другом css

.Notebook { display:block; position:relative; top:0px; left:0px; width:640px; min-height:460px; height:500px; background:url(notebook.png) repeat-y; }

проблема - прозрачность работает, но картинка не копируется вниз до конца страници( Как лечится? :)
Hitry

Сообщения: 6 Репутация: N Группа: Кто попало

25 мая 2008 г. 13:30, спустя 18 часов 52 минуты 8 секунд

Может я не ясно объяснил или просто никто не знает?…
Timur

Сообщения: 1068 Репутация: N Группа: Джедаи

26 мая 2008 г. 18:07, спустя 1 день 4 часа 37 минут

Не понял - у тебя фильтр и фон применены к блокам класса .Notebook, у которого отмечена высота - 460-500px. Вот картинка и растягивается на эту самую высоту. Не пойму что ты хочешь сделать.

Вообще с PNG в IE может быть много гемора, его использование может быть оправдано, только если необходима 8-битная прозрачность. Просто глядя на макет на картинке, я не вижу, что бы там была такая необходимость.

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

Область по тексту. css

Войти