ФорумРазработкаКлиентская сторонаВерстка и оформление → Область по тексту. css

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

  • Hitry

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

    Spritz 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 Группа: Джедаи

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

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

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

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

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

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

    Spritz 2 мая 2008 г. 19:42, спустя 4 дня 19 часов 9 минут

    В моём случае есть две колонки. Одна фиксированной ширины (переплёт), вторая -  нет (бумага). Высота должна быть по тексту в правой. Как реализовать так и не знаю…
    1. (164)
  • Timur

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

    Spritz 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 Группа: Кто попало

    Spritz 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 Группа: Джедаи

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

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

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

    Spritz 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 Группа: Кто попало

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

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

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

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

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

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

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