Joomla 1.0 Перенос на сл. строку в кнопке

Тема в разделе "CSS, HTML, Web 2.0, верстка по web-стандартам", создана пользователем qwe88, 13.07.2010.

  1. qwe88
    Offline

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

    Регистрация:
    25.07.2008
    Сообщения:
    281
    Симпатии:
    1
    Пол:
    Мужской
    Ребят, помогите пожалуйста. Проблема в следующем: есть сайт http://wuff.ru/, слова "отдам продам", "друзья и партнеры" выходят за пределы кнопок. Как сделать так, что бы они помещались полностью в кнопках, просто в две строки?
    Код кнопок у меня такой:
    Код (CODE):
    1. ul#mainlevel-nav {
    2.     text-decoration: none;
    3.     list-style: none;
    4.     padding: 0;
    5.     margin: 0 0px;
    6.     float:left;
    7.     color:#E7A038;
    8.     }
    9. ul#mainlevel-nav li {
    10.     width:119px;
    11.     float:left;
    12.     font-size:0.9em;
    13.     height:48px;
    14.     line-height:48px;
    15.  
    16.     display:inline;
    17.     }
    18. ul#mainlevel-nav li a:link, ul#mainlevel-nav li a:visited {
    19.     font-size: 14px;
    20.     font-weight:bold;
    21.     text-align:center;
    22.     text-decoration:none;
    23.     white-space:nowrap;
    24.     display:block;
    25.     overflow:hidden;
    26.     color: #ffffff;
    27.     margin:0;
    28.     padding:0;
    29.     background: url(/templates/wulf/images/knopka.gif);
    30.     }
    31. ul#mainlevel-nav li a:hover {
    32.     white-space:nowrap;
    33.     margin:0;
    34.     padding:0;
    35.     color: #ffffff;
    36.     background-position: -119px 0;
    37.     }
     
  2.  
  3. Jkr
    Offline

    Jkr Russian Joomla! Team

    Регистрация:
    04.08.2006
    Сообщения:
    465
    Симпатии:
    27
    Пол:
    Мужской
    В текст ссылки добавить <br />, например "Отдам<br />продам". При повторном открытии пункта меню в админке (для редактирования) <br /> вроде бы пропадает и его надо вписывать по-новой.
     
  4. Jkr
    Offline

    Jkr Russian Joomla! Team

    Регистрация:
    04.08.2006
    Сообщения:
    465
    Симпатии:
    27
    Пол:
    Мужской
    Второй вариант:
    ul#mainlevel-nav li a:link, ul#mainlevel-nav li a:visited (template_css.css, строка 356)
    и
    ul#mainlevel-nav li a:hover (template_css.css, строка 369)
    убрать
    "white-space:nowrap;"

    Но тогда надо редактировать все отступы и line-height, чтобы 2 строчки правильно вписывались. На первый взгляд, в ul#mainlevel-nav li a:link, ul#mainlevel-nav li a:visited надо добавить "line-height:20px;"
     
  5. qwe88
    Offline

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

    Регистрация:
    25.07.2008
    Сообщения:
    281
    Симпатии:
    1
    Пол:
    Мужской
    Помогите, пожалуйста. Получилось пока только так http://wuff.ru/
    Код теперь имеет такой вид:
    Код (CODE):
    1. ul#mainlevel-nav {
    2.     text-decoration: none;
    3.     list-style: none;
    4.     padding: 0;
    5.     margin: 0 0px;
    6.     float:left;
    7.     color:#E7A038;
    8.     }
    9. ul#mainlevel-nav li {
    10.     width:119px;
    11.     float:left;
    12.     font-size:0.9em;
    13.     height:23px;
    14.  
    15.  
    16.  
    17.     display:inline;
    18.     }
    19. ul#mainlevel-nav li a:link, ul#mainlevel-nav li a:visited {
    20.     font-size: 14px;
    21.     font-weight:bold;
    22.     text-align:center;
    23.     text-decoration:none;
    24.  
    25.     display:block;
    26.     overflow:hidden;
    27.     color: #ffffff;
    28.     margin:0;
    29.     padding:7px;
    30.     background: url(/templates/wulf/images/knopka.gif);
    31.     }
    32. ul#mainlevel-nav li a:hover {
    33.  
    34.     margin:0;
    35.     padding:8;
    36.     color: #ffffff;
    37.     background-position: -119px 0;
    38.     }
     
  6. Jkr
    Offline

    Jkr Russian Joomla! Team

    Регистрация:
    04.08.2006
    Сообщения:
    465
    Симпатии:
    27
    Пол:
    Мужской
    ul#mainlevel-nav li a:link, ul#mainlevel-nav li a:visited (строка 357) добавить height:34px;
     
  7. qwe88
    Offline

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

    Регистрация:
    25.07.2008
    Сообщения:
    281
    Симпатии:
    1
    Пол:
    Мужской
    Замечательно!
    А можно ли еще сделать так, что бы все слова на кнопках были по центру, пока получается в две строке по центру, а в одну наверху. Можно?
     
  8. Jkr
    Offline

    Jkr Russian Joomla! Team

    Регистрация:
    04.08.2006
    Сообщения:
    465
    Симпатии:
    27
    Пол:
    Мужской
    Тогда нужно было пробовать первый метод (с <br /> в ссылке), а в стилях убрать nowrap, но оставить line-height 48px.

    Как вариант, можно хакнуть модуль меню, чтобы он автоматом добавлял <br /> вместо пробела между словами больше, например, 3 букв.
     
  9. qwe88
    Offline

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

    Регистрация:
    25.07.2008
    Сообщения:
    281
    Симпатии:
    1
    Пол:
    Мужской
    <br /> не помогает совсем, после нажатия кнопки "сохранить" все сохраняется без <br />
     
  10. doctorgrif
    Offline

    doctorgrif специалист

    Регистрация:
    14.01.2008
    Сообщения:
    1 284
    Симпатии:
    66
    Пол:
    Мужской
    применить к списку с выводом пунктов меню следующую конструкцию
    Код (CODE):
    1. white-space:pre-wrap;

    и читать спецификацию html & css
     
  11. Jkr
    Offline

    Jkr Russian Joomla! Team

    Регистрация:
    04.08.2006
    Сообщения:
    465
    Симпатии:
    27
    Пол:
    Мужской
    Вообще, если убрать no-wrap получится точь-в-точь тоже самое. Вопрос на данной стадии в том, чтобы организовать вертикальное выравнивание.

    Максимум, чего удалось добиться: выравнивание (вертикальное) есть в FF и Opera. В IE выравнивания нет, но хотя бы все не летит к чертям.

    Эффект достигнут следующим образом:

    Код (CODE):
    1. ul#mainlevel-nav {
    2.     text-decoration: none;
    3.     list-style: none;
    4.     padding: 0;
    5.     margin: 0 0px;
    6.     float:left;
    7.     color:#E7A038;
    8.     }
    9. ul#mainlevel-nav li {
    10.     width:119px;
    11.     float:left;
    12.     font-size:0.9em;
    13.     height:48px;
    14.     width:119px;
    15.     display:inline;
    16.     }
    17.    
    18. ul#mainlevel-nav li a:link, ul#mainlevel-nav li a:visited {
    19.     font-size: 14px;
    20.     font-weight:bold;
    21.     text-align:center;
    22.     text-decoration:none;
    23.     height:48px;
    24.     width:119px;
    25.     display:table-cell;
    26.     vertical-align:middle;
    27.     overflow:hidden;
    28.     color: #ffffff;
    29.     margin:0;
    30.     padding:0;
    31.     background: url(/templates/wulf/images/knopka.gif);
    32.     }
    33.    
    34. *+html .auxiliary {
    35.       display: inline-block;
    36.       vertical-align: middle;
    37.       width: 0px;
    38.       height: 100%;
    39. }
    40. *+html #mainlevel-nav li a {
    41.       display: inline-block;
    42.       vertical-align: middle;
    43. }
    44. *+html #mainlevel-nav li a, .auxiliary {
    45.       display: inline;
    46. }
    47.    
    48. ul#mainlevel-nav li a:hover {
    49.  
    50.     margin:0;
    51.     padding:8;
    52.     color: #ffffff;
    53.     background-position: -119px 0;
    54.     }


    Для получения окончательного решения нужно сделать хак модуля, отвечающего за вывод меню и после каждого </a> добавить <div class="auxiliary"> </div>. У меня нет доступа на хостинг, поэтому окончательное решение ложится на плечи топикстартера.
     

Поделиться этой страницей

Загрузка...