Центр пользователя  |  Ваши сообщения  |  FAQ
Форум поддержки phpBB » phpBB 3.0.x » Стили phpBB 3.0.x » Решение проблем со стилями

Округление углов "prosilver" в Opera.

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

Сообщение 11 сен 2009, 21:41

С самого выхода phpBB3 наблюдаю такой сдвиг графики для округления углов "prosilver" в Опере:
Изображение

Мелочь конечно, но мне она надоела и я двинул в поиск.
По теме ничего конкретного не нашел, однако узнал,
что в Опере есть проблемы с негативным значением "margin" и поэтому лучше работать с "position: relative;".
Дальше было дело техники.

Открыл "./styles/prosilver/theme/common.css" и переписал эти строки:

Код: выделить все
span.corners-top {
   background-image: none;
   background-position: 0 0;
   margin: 0 -5px;
}

span.corners-top span {
   background-image: none;
   background-position: 100% 0;
}

span.corners-bottom {
   background-image: none;
   background-position: 0 100%;
   margin: 0 -5px;
   clear: both;
}

span.corners-bottom span {
   background-image: none;
   background-position: 100% 100%;
}

.headbg span.corners-bottom {
   margin-bottom: -1px;
}

.post span.corners-top, .post span.corners-bottom, .panel span.corners-top, .panel span.corners-bottom, .navbar span.corners-top, .navbar span.corners-bottom {
   margin: 0 -10px;
}

.rules span.corners-top {
   margin: 0 -10px 5px -10px;
}

.rules span.corners-bottom {
   margin: 5px -10px 0 -10px;
}


вот так:

Код: выделить все
span.corners-top {
   background-image: none;
   background-position: 0 0;
   position: relative; left: -5px; top: 0;
 }

span.corners-top span {
   background-image: none;
   background-position: 100% 0;
   position: relative; right: -10px; top: 0;
}

span.corners-bottom {
   background-image: none;
   background-position: 0 100%;
   position: relative; left: -5px; bottom: 0;
   clear: both;
}

span.corners-bottom span {
   background-image: none;
   background-position: 100% 100%;
   position: relative; right: -10px; bottom: 0;
}

.headbg span.corners-bottom {
   margin-bottom: -1px;
}

.post span.corners-top, .post span.corners-bottom, .panel span.corners-top, .panel span.corners-bottom, .navbar span.corners-top, .navbar span.corners-bottom {
   position: relative; left: -10px; right: -20px;
}
.post span.corners-top span, .post span.corners-bottom span, .panel span.corners-top span, .panel span.corners-bottom span, .navbar span.corners-top span, .navbar span.corners-bottom span {
   position: relative; right: -20px;
}


.rules span.corners-top {
   margin: 0 0 5px 0;
   position: relative; left: -10px;

}

.rules span.corners-top span {
   position: relative; right: -20px;

}

.rules span.corners-bottom {
   margin: 5px 0 0 0;
   position: relative; left: -10px;
}

.rules span.corners-bottom span {
   position: relative; right: -20px;
}


В итоге Опера показывает все корректно.

Этот способ работает так-же в браузерах:

Firefox 3
Chromium ( не Google Chrome )
Epiphany
Arora ( принцип работы как у Safari Mac.)

По другим браузерам ничего сказать немогу, за неимением оных.
Буду рад если кто нибудь отпишется по этому поводу.
Моя клавиатура автоматически заменяет слово ВЫ на ТЫ.
Поэтому я с компом и интернетом на ТЫ.
Аватар пользователя
amdaveo
Поддержка
 
Сообщений: 530
Зарегистрирован:
10 сен 2009, 13:02
Откуда:
Germany
Благодарил (а): 0 раз.
Поблагодарили: 1 раз.

Сообщение 11 сен 2009, 22:03

Углы не округляются только если в настройках браузера включить подгонку страниц по ширине, но так как это не особо полезная вещь и по умолчанию выключена, то проблем не должно возникать.
Но возможно указанный вариант более предпочтителен.
http://skladchina.com - форум для совместной покупки дисков и других инфопродуктов
Web-programmist
Поддержка
 
Сообщений: 502
Зарегистрирован:
19 июл 2009, 00:00
Благодарил (а): 0 раз.
Поблагодарили: 0 раз.

Сообщение 11 сен 2009, 22:19

Web-programmist писал(а):Углы не округляются только если в настройках браузера включить подгонку страниц по ширине, но так как это не особо полезная вещь и по умолчанию выключена, то проблем не должно возникать.
Но возможно указанный вариант более предпочтителен.


Истина. У меня эта "не особо полезная вещь" включена. :)
(Не люблю горизонтального скрола)
А по поводу предпочтительности и хотелось бы выяснить,
будет ли это работать и в других браузерах, или стоит вернуться к margin-ам.
Моя клавиатура автоматически заменяет слово ВЫ на ТЫ.
Поэтому я с компом и интернетом на ТЫ.
Аватар пользователя
amdaveo
Поддержка
 
Сообщений: 530
Зарегистрирован:
10 сен 2009, 13:02
Откуда:
Germany
Благодарил (а): 0 раз.
Поблагодарили: 1 раз.

Сообщение 11 сен 2009, 23:02

Горизонтального скролла и не будет, так как сейчас в моде "резиновый" дизайн и тем более разрешение у большинства отлично от 800*600. Я этой функцией не пользуюсь и никогда неудобства не испытывал.

По поводу работы на других браузерах: по идее должно работать, но удостовериться можно только протестировав.
http://skladchina.com - форум для совместной покупки дисков и других инфопродуктов
Web-programmist
Поддержка
 
Сообщений: 502
Зарегистрирован:
19 июл 2009, 00:00
Благодарил (а): 0 раз.
Поблагодарили: 0 раз.

Сообщение 11 сен 2009, 23:24

Да с сайтами как таковыми проблем мало, а вот с изображениями на сайтах бывают. ;)
Моя клавиатура автоматически заменяет слово ВЫ на ТЫ.
Поэтому я с компом и интернетом на ТЫ.
Аватар пользователя
amdaveo
Поддержка
 
Сообщений: 530
Зарегистрирован:
10 сен 2009, 13:02
Откуда:
Germany
Благодарил (а): 0 раз.
Поблагодарили: 1 раз.

Сообщение 12 сен 2009, 01:09

Для таких случаев есть кнопка в правом нижнем углу (в 10й версии оперы)
http://skladchina.com - форум для совместной покупки дисков и других инфопродуктов
Web-programmist
Поддержка
 
Сообщений: 502
Зарегистрирован:
19 июл 2009, 00:00
Благодарил (а): 0 раз.
Поблагодарили: 0 раз.

Сообщение 12 сен 2009, 07:32

Для тестирования в разгных браузерах, с разными ос и разным разрешением - http://browsershots.org
Семь бед - один RESET
Ребята! Давайте жить дружно!
A.R.T.
Разработчик модов
 
Сообщений: 1087
Зарегистрирован:
03 фев 2009, 23:59
Откуда:
Город над вольной Невой
Благодарил (а): 0 раз.
Поблагодарили: 1 раз.

Сообщение 12 сен 2009, 18:10

A.R.T. писал(а):Для тестирования в разгных браузерах, с разными ос и разным разрешением - http://browsershots.org

Ooo как-то не задумывался о подобном сервисе !
Спасибо за наводку.

Web-programmist писал(а):Для таких случаев есть кнопка в правом нижнем углу (в 10й версии оперы)

Ну дык она у меня и включена по дефолту. :)
Моя клавиатура автоматически заменяет слово ВЫ на ТЫ.
Поэтому я с компом и интернетом на ТЫ.
Аватар пользователя
amdaveo
Поддержка
 
Сообщений: 530
Зарегистрирован:
10 сен 2009, 13:02
Откуда:
Germany
Благодарил (а): 0 раз.
Поблагодарили: 1 раз.


Вернуться в Решение проблем со стилями

Кто сейчас на форуме

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 1

Форум поддержки phpBB
2008 - 2017 © BB3x.ru - русская поддержка форума phpBB3
Создано на основе phpBB® Forum Software © phpBB Group
+ 17 предустановленных модов
+ SEO-оптимизация форума
+ авторизация через соц. сети
+ защита от спама