Во первых ставьте картинки в jpg,
Во вторых можно использовать несколько фоновых изображений на один единственный элемент с разным позиционированием
т.е по краю сверху, по краю снизу и с рамножением по вертикали(его ставим первым

Отредактировано Deff (Пн, 18 Мар 2013 17:01:51)

Попробуйте так:

Отредактировано annoj (Пн, 18 Мар 2013 18:07:14)

annoj
А так?

Попробуйте так:

<!-- Сдвиг банера -->
<style>       /* Смещаем рекламный модуль */
.title-logo-tdr a, .title-logo-tdr iframe, .title-logo-tdr object{
  position: relative!important;
  z-index:100!important;
  right:0px!important;
  left:50px!important;
  top:160px!important;
}
/* п/п рекламного модуля */
.title-logo-tdr a, .title-logo-tdr iframe, .title-logo-tdr object{ 
  filter:alpha(opacity=50)!important; 
  opacity: 0.5!important;  
  -moz-opacity: 0.5!important;  
  -khtml-opacity: 0.5!important;  
} 
.title-logo-tdr a:hover, .title-logo-tdr iframe:hover, .title-logo-tdr object:hover{ 
filter:alpha(opacity=100)!important;  
opacity: 1.0!important;  
-moz-opacity: 1.0!important;  
-khtml-opacity: 1.0!important;  
} 
</style>

Ставить НТМЛ верх.
Меняем для подгонки:
right:0px!important;
left:50px!important;
top:160px!important;

Вы имеете ввиду, что они у вас вплотную стоят?
Добавьте в стиль в эти места:#pun-navlinks a:hover, #pun-navlinks a:focus, #pun-navlinks a:active,#pun-navlinks ,#pun-navlinks a - padding: 5px 7px 6px 7px; или вставьте в НТМЛ верх:

<style>
#pun-navlinks a:hover, #pun-navlinks a:focus, #pun-navlinks a:active, #pun-navlinks , #pun-navlinks a {
  padding: 5px 7px 6px 7px;
  }
</style>

И с помощью этих значений регулируйте отступы у навигационных ссылок: padding: 5px 7px 6px 7px;
Если хотите их по центру, то добавьте в #pun-navlinks .container: text-align: center;
Или пропишите в НТМЛ верх:

<style>
#pun-navlinks .container {
  text-align: center;
}
</style>

Отредактировано kolobdur74 (Пн, 18 Мар 2013 20:17:35)

Подготовительные работы:
Увеличиваем картинку на нужную нам ширину, ширина картинки должна совпадать с шириной контейнеров. Разрезаем картинку (я это делал на своем тестовом форуме, с учетом ширины встроенного дизайна Mybb iPhone, поэтому могут быть вариации, но тут важен сам принцип), разрезать надо очень точно, чтобы ширина обоих половинок была абсолютно точная, иначе будут выступы.
Работа с половинками:
Верхняя половинка:

Берем картинку и вставляем в код:

#pun-stats h2, .punbb .main h1,.punbb .main h2, #pun-debug h2 {
  background: url(http://s3.uploads.ru/ulmNb.gif) no-repeat bottom #fff;
  }

Нижняя половинка:

Эту картинку вставляем в этот код:

.punbb .category{
  background: url(http://s2.uploads.ru/GBrLg.gif);
height: 260px;
background-position: center bottom;
  }

height: 260px; - регулируем высоту картинки, так, чтобы она вылезла вниз на нужную нам высоту.
Далее, вырезаем кусочек:

Это будет наш фон. Вставляем его в код:

#pun {
  background: url(http://s3.uploads.ru/kKQyS.gif)
  }

Собственно и все. У себя я еще отрегулировал ширину контейнера категорий, чтобы по бокам образовались бордюры, вот таким образом:

.punbb .main .container{
  width: 87%;
margin:0 auto;
background-color: transparent;
}

В итоге, вместо дизайна Mybb iPhone, получаем вот такой дизайн:

Ну и полный код, который у меня получился:

<style type="text/css">
#pun-stats h2, .punbb .main h1,.punbb .main h2, #pun-debug h2 {
  background: url(http://s3.uploads.ru/ulmNb.gif) no-repeat bottom #fff;
  }
.punbb .category{
  background: url(http://s2.uploads.ru/GBrLg.gif);
height: 260px;
background-position: center bottom;
  }
#pun {
  background: url(http://s3.uploads.ru/kKQyS.gif)
  }
.punbb .main .container{
  width: 87%;
margin:0 auto;
background-color: transparent;
  }
  </style>

С некоторыми вариациями подобное можно сделать на любом стиле..Да, и еще один момент, советую пользоваться инструментом для разработчиков встроенный в браузер - у Хрома он называется Просмотр кода элемента, вызывается через контекстное меню - правой клавишей мыши, в самом низу. В других браузерах есть аналогичная функция. Конкретно у Хрома - после нажатия на Просмотр кода элемента появляется окошко с кодом форума, при наведении на код подсвечивается элементы на самом форуме, вот таким образом:

Справа на скриншоте тот самый инструмент, слева видно как подсветился кусочек форума синим при наведении на код.

Отредактировано kolobdur74 (Чт, 21 Мар 2013 07:08:12)