Помогите с CSS !

Тема в разделе "Веб-дизайн", создана пользователем cashfile, 13 мар 2010.

Статус темы:
Закрыта.
Модераторы: zek24
  1. cashfile

    cashfile Создатель

    Регистр.:
    1 дек 2009
    Сообщения:
    36
    Симпатии:
    0
    Всё , я уже иссяк мыслями и знаниями , 2 дня уже бьюсь.
    Нужно сделать чтобы на фоне описания товара была градиентная заливка. Условие такое что описания по высоте занимают разную величину.
    Нужно сделать так чтобы основная фоновая картинка с градиентом (фиксиров. определенной высоты) начиналась с верха описания к товару . Если описание по высоте больше размеров основной картинки фона ,то она наращивалась бы через repeat-y малым элементом ровно на величину текста .
    В php файле:
    <div class="tabs">
    <a class="tab" tab="#tab_description"><span><?php echo $tab_description;?></span></a>
    </div>
    <div id="tab_description" class="tab_page"><?php echo $description; ?>
    <div class="down"></div>
    </div>
    CSS:
    --- основная картинка фона прижата вверх блока---
    .tab_page {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin: padding;
    background: #FFFFFF url('../image/product_fon1.png') no-repeat scroll 0 top;
    float: bottom;
    margin-top: 90px;
    padding-bottom: 25px;
    min-height: 320px;
    width: 670px;
    z-index: 2;
    }
    --- картинка дополнения фона к основной---
    .tab_page .down {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin: padding;
    background: transparent url('../image/product_fon_y1.png') repeat-y scroll;
    margin-top: 272px;
    padding-bottom: 25px;
    z-index: 3;
    }
    Подскажите кто знает или хотя бы принцип скажите как !!!!
    repeat.jpg
     
  2. Ewsen

    Ewsen

    Регистр.:
    26 июл 2008
    Сообщения:
    163
    Симпатии:
    59
    Растягивающийся градиент делается несколькими способами:
    1) Можно сделать картинку с градиентом высотой, например 3000 пикселей.
    2) Можно сделать 3 блока вложенных друг в друга, где один будет прижат к топу с картинкой верхней части градиента, второй(прижат к боттом) - с нижней, а третий (он должен быть на заднем фоне) с фоном соответствующим цвету нижней части верхней картинки и верхней части нижней картинки.
    3) Можно сделать 2 блока вложенных друг в друга, где верхний верхний слой с градиентом будет прижат к топу, а нижний слой с фоном, соответствующим цвету нижней части градиента.

    Первый способ самый простой и смотрится лучше других. ИМХО в вашем случае наиболее подходящий.
    это похоже на второй способ. Но для этого отрезается тонкая полоска нижней части градиента и заливается слой в котором находиться слой с картинкой градиента прижатый к топу.
     
  3. cashfile

    cashfile Создатель

    Регистр.:
    1 дек 2009
    Сообщения:
    36
    Симпатии:
    0
    Дело в том что в 1 варианте (условие красивого дизайна) при маленьком описании (область текста занимаемая по высоте) фон будет отображаться только его верхней частью - бледной . А если описание будет большим то большая часть текста описания будет отображаться либо нормально либо в большей части на темном фоне , т.к. чтобы исключить бледность для маленьких описаний придётся общую картинку градиента делать 80% цветом закраски .

    Мне нравится идея №3. Картинки верха и низа я подобрал по оптимальным размерам для своих описаний товара. Сложность возникла в описании этой идеи в код CSS и код скрипта . Код для этой ситуации я прописал - но судя по прикрепленному изображению , что-то у меня не так.

    Кому не сложно - подскажите !!!
     
  4. Conwell

    Conwell

    Регистр.:
    23 мар 2009
    Сообщения:
    337
    Симпатии:
    177
    вот решение:
    css:
    Код:
    .tab_page {
    background: transparent url('../image/product_fon_y1.png') repeat-y bottom;
    min-height: 320px;
    width: 670px;
    z-index: 2;
    }
    .down {
    background: transparent url(../image/product_fon1.png) no-repeat scroll 0 top;
    z-index: 3;
    }
    php:
    Код:
    <div class="tabs">
    <a class="tab" tab="#tab_description"><span><?php echo $tab_description;?></span></a>
    </div>
    <div id="tab_description" class="tab_page">
    <div class="down"><?php echo $description; ?></div>
    </div>
    возможно придется поправить отступы верхние.
     
    cashfile нравится это.
  5. Ewsen

    Ewsen

    Регистр.:
    26 июл 2008
    Сообщения:
    163
    Симпатии:
    59
  6. cashfile

    cashfile Создатель

    Регистр.:
    1 дек 2009
    Сообщения:
    36
    Симпатии:
    0
    Ребята , спасибо большое - всё получилось !!!

    www.mirfredericm.ru

    .... по моему даже min-height не нужен
     
Статус темы:
Закрыта.