Помогите немного с CSS

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

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

    Damasc

    Регистр.:
    5 мар 2009
    Сообщения:
    173
    Симпатии:
    6
    Сразу хочу сказать, что совсем не понимаю в CSS и разбираться в данный момент нет времени совсем, но обязательно разберусь.
    Есть следующий CSS
    PHP:
        .ellipsis
        
    {
          
    line-height1.2em;
          
    height1.2em;
          
    white-spacenowrap;
          
    overflowhidden;
          
    text-overflowellipsis;
          
    width100%;
          -
    o-text-overflowellipsis;
        }
        .
    ellipsis *
        {
          
    displayinline;
        }
    Он скрывает текст, если тот не влезает в блок. Мне нужно в конец строки поставить полупрозрачный градиент за котором будет скрываться текст. Можно чтобы он там стоял при любом условии, даже если текст не доходит до него. Картинка уже есть, но поставить не получается ну никак.
    После того как всё выясним, эту тему можно будет удалить. Спасибо!
     
  2. zzallexx

    zzallexx

    Регистр.:
    11 июн 2008
    Сообщения:
    1.036
    Симпатии:
    699
    если правельно понял у меня так сделано
    HTML:
    li .shadow {position: absolute; height: 100px; width: 27px; background: url(../images/new-shadow.png) no-repeat 0px 0px; top: 0px; right: 0px; _background: none;}
    
    a сам html такой
    HTML:
    <li>
          <div class="shadow"></div>
            <dl>
        <dt></dt>
        <dd></dd>
      </dl></li>
    а вообще надо твой html тоже смотреть
     
    Damasc нравится это.
  3. Damasc

    Damasc

    Регистр.:
    5 мар 2009
    Сообщения:
    173
    Симпатии:
    6
    Данное решение было взято от сюда:

    http://habrahabr.ru/blogs/webdev/19933/

    Немного упрощено. Мне нужно всего навсего приделать к этому коду градиент к концу строки. Меня даже устроит если градиент там будет постоянно, а не будет появляться только тогда, когда текст упирается в границу.
     
  4. zzallexx

    zzallexx

    Регистр.:
    11 июн 2008
    Сообщения:
    1.036
    Симпатии:
    699
    а если просто бакграундом прописать рисунок не подойдет?
    HTML:
    .ellipsis 
        { 
          line-height: 1.2em; 
          height: 1.2em; 
          white-space: nowrap; 
          overflow: hidden; 
          text-overflow: ellipsis; 
          width: 100%; 
          -o-text-overflow: ellipsis;
        background: url(../images/ellipsis.png);
         background-repeat:repeat-y;
         background-position:right;
        }
     
  5. Damasc

    Damasc

    Регистр.:
    5 мар 2009
    Сообщения:
    173
    Симпатии:
    6

    Нет, так к сожалению не работает.
     
  6. LodeRunner

    LodeRunner

    Регистр.:
    10 фев 2010
    Сообщения:
    220
    Симпатии:
    12
    Автор, почему бекграундом то у тебя не получается сделать картинку png?
    Прописываешь
    background: url(путь к картинке) top right repeat-y;
    Должно работать.

    Поясню некоторые моменты твоего css кода:
    width: 100%; Это ты растягиваешь блок по ширине на весь экран.
    line-height: 1.2em; Это интерлиньяж, т.е. высота строки.
    height: 1.2em; Это высота блока.
    При этом текст будет центрироваться по высоте блока, т.к. высота блока и высота строки одинаковые.
    overflow: hidden; это свойство обрезает твой непереносной(white-space: nowrap;) текст.
     
    Damasc нравится это.
  7. Damasc

    Damasc

    Регистр.:
    5 мар 2009
    Сообщения:
    173
    Симпатии:
    6
    Да действительно, заработало.

    Только как картинку сделать поверх текста? Она у меня легла под текст.
     
  8. borman256

    borman256 Прохожие

    Правильно, у тебя в css написано background, а это означает как задний фон! Вопрос, а зачем тебе картинка поверх текста? Это не логично!
     
  9. Damasc

    Damasc

    Регистр.:
    5 мар 2009
    Сообщения:
    173
    Симпатии:
    6
    Хм, хорошо ) но как будет всё таки верно?

    Трём уже 3й день эту и никто не знает как это реализовать? )
     
  10. bork75

    bork75 Д☼брая собака )

    Регистр.:
    21 июн 2008
    Сообщения:
    1.449
    Симпатии:
    716
    Что бы изображение было поверх, нужно выводить в плавающем диве, внутри основного дива.

    PHP:
    <div class="shadow">
        <
    div style="position:absolute; top:50px; left:0px; z-index:999;">
         <
    img src="сюда вписать картинку">
        </
    div>
    </
    div>
    Из основного стиля убрать

    PHP:
    backgroundurl(../images/new-shadow.pngno-repeat 0px 0px;
     
    Damasc нравится это.
Статус темы:
Закрыта.