Форум Joomla! Україна

Повна версія: Заокруглені кути модулів
Ви переглядаєте спрощену версію. Переглянути повну версію з віповідним форматуванням.
Привіт усім!!

Дуже цікава тема. Думаю рано чи пізно хтось її та й відкриє, адже тема є актуальною в наш час.

В шаблоні хочу зробити модулі з заокругленими кутами. Знайшов на help.joom.ru як це робиться на дівах.

Використовую готовий шаблон і хочу його лише змінити. Після вищезгаданих інструкцій у мене модулі розтягнулись на весь екран і зовсім не схожі на модулі  Smile З css я видалив всі стилі що були вказані для left. Не можу збагнути де мені щось заважає.

Буду вдячний за продовження цієї теми. Wink
Привіт усім!

Вищезгаданим способом не вдалось зробити модулі  Smile і тому спробував інший.
В HTML шаблону прописав

Код:
<?php if(mosCountModules("left")) { ?>
          <div id="left"><?php mosLoadModules("left",-3) ?></div>
<?php }?>

відповідно і для правого модулю.

в CSS додав таке

Код:
div.module {
    width: 200px;
    background: url(../images/mod_mid.png) repeat-y;
  }

  div.module div {
    background: url(../images/mod_bot.png) bottom left no-repeat;
  }

  div.module div div {
    background: url(../images/mod_top.png) top left no-repeat;
    padding: 10px 10px 20px 10px;
  }

  div.module div div div {
    background: none;
    padding: 0;
    width: auto !important;
    width: 100%;
    margin: 0px 0px 0px 0px;
  }

  div.module div div div h3 {
  display: block;
  padding : 0px 0px 10px 0px;
  margin : 0;
  font-family      : Tahoma;
  font-size        : 14px;
  font-weight      : bold;
  color            : #F5F517;
  text-transform   : uppercase;
  text-align       : center;
  text-decoration  : underline;
  letter-spacing   : 1px;

  }

у всіх браузерах все працює на ура крім ІЕ7. У ньому верхні кути обрізаються Sad (сайт)

Хтось знає як це поправити?

З повагою, Олександр
Заміни це:

Код:
  div.module div div div {
    background: none;
    padding: 0;
    width: auto !important;
    width: 100%;
    margin: 0px 0px 0px 0px;
  }

на це:

Код:
  div.module div div div {
    background: none;
    padding: 0;
    width: 200px;
    margin: 0;
  }

Заміни це:

Код:
div.module div {
    background: url(../images/mod_bot.png) bottom left no-repeat;
  }

на це:

Код:
  div.module div {
    background-image: url(../images/mod_bot.png);
    background-position: bottom;
    background-repeat: no-repeat;
  }

і так двлі по цьому принципу.

Не всі браузери добре розуміють скорочені правила написання цсс, а також по різному сприймають деякі параметри.
Дуже дякую за пораду! Все супер! Перший варіант трохи не запасував, але за 2 великий +  Wink
Рекомендую [url=http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-borders.shtml]такий рецепт[/url=].
CSS та кросбраузерно