Joomla 1.5 Помогите решить проблему с блоком новости!

Discussion in 'Внешний вид, шаблоны, графика' started by Drughi, Jan 26, 2011.

  1. Offline

    Drughi Недавно здесь

    Joined:
    Dec 11, 2010
    Messages:
    45
    Likes Received:
    0
    Gender:
    Male
    Посмотрите, пожалуйста! У меня на главной странице сайта есть маленькие анонсы новостей (12 блоков). И в них есть серое полупрозрачное поле.
    И сейчас возникла проблема.
    Если заголовок статьи больше 21 символа, то текст попросту не помещается и вылезает из рамки.
    Как сделать так, что б высота блока регулировалась в зависимости от длинны заголовка. Например, в заголовке 30 символов. Как сделать так, что бы по умолчанию показывался 21 символ, а при наведении мыши полупрозрачный блок увеличивался до нужных размеров, в котором и будет полный заголовок длинною в 30 символов.
    Думаю, что понятно объяснил.
    Очень прошу совета!
     
  2.  
  3. CB9T
    Offline

    CB9T Преподаватель по J! Staff Member ⇒ Профи ⇐

    Joined:
    May 21, 2010
    Messages:
    2,604
    Likes Received:
    322
    Gender:
    Male
    в принципе могу посоветовать копать в сторону правила: line-height и к примеру ограничить

    Код (CODE):
    1. <h3 class="catItemTitle-s">            
    2.        
    3.       </h3>

    и задать ширину, то что свыше будет по line-height на хорошем интервале. А про ограничение это врятли простыми средствами справишься...если только что ниже (продолжение) - visibility - display - none :O
     
  4. sergiks
    Offline

    sergiks Недавно здесь => Cпециалист <=

    Joined:
    Oct 10, 2010
    Messages:
    362
    Likes Received:
    36
    Gender:
    Male
    Задействовать dhtml: например, удобно с библиотекой jQuery или «родной» для Joomla библиотекой MooTools.
    Сценарий примерно такой:
    1. блок фикс. размера, overflow: hidden; чтобы не было видно тот текст, что не вписался по длине;
    2. JS должен «знать», какая высота нужна, чтобы вместить все. Проще сделать ее тоже фикс, если ты знаешь, что там макс. 2 (или 3) строки.
    3. по событию наведения мышки нужно плавно изменить высоту и положение блока, чтобы это выглядело, как будто он «растет» вверх.
    4. по событию ухода мышки с этого блока – вернуть высоту и положение в «свернутое» состояние.
     
  5. Offline

    Drughi Недавно здесь

    Joined:
    Dec 11, 2010
    Messages:
    45
    Likes Received:
    0
    Gender:
    Male
    Или можно хотя бы сделать так, что бы блок полностью отображался (высота пока не важна).
    Т.е. если в h3.catItemTitle-s изменить высоту с 21px на auto; текст как бы находится в блоке, а блок съезжает вниз.
    блин, наверное нифига не понятно расписал. если поймёте о чём я, то помогите пожалуйста. добавлю пару скринов
     
  6. Offline

    Drughi Недавно здесь

    Joined:
    Dec 11, 2010
    Messages:
    45
    Likes Received:
    0
    Gender:
    Male
    [​IMG]

    Итак,
    №1 - то что сейчас
    №2 - если изменить высоту с 21px на auto;
    №3 - Что бы было так.

    Есть идеи?
     
  7. Offline

    Drughi Недавно здесь

    Joined:
    Dec 11, 2010
    Messages:
    45
    Likes Received:
    0
    Gender:
    Male
    *update*
     
  8. Offline

    Drughi Недавно здесь

    Joined:
    Dec 11, 2010
    Messages:
    45
    Likes Received:
    0
    Gender:
    Male
    *update*
     

Share This Page

Loading...