Доброго времени суток!
Столкнулись с проблемой в дизайне: категории съезжают на 1 пиксель по правому/левому (в разных браузерах по-своему) краю, при увеличении масштаба - по обоим краям. Проблема сама по себе, действительно, незначительная, но общий вид форума все же портит.
1 скрин http://ssmaker.ru/a160176b.png
2 скрин http://ssmaker.ru/1369ec56.png
3 скрин http://cs313219.vk.me/v313219363/8e74/3bI2bFsKGuw.jpg
При попытке сдвинуть по параметру margin получается еще хуже:
http://ssmaker.ru/462bf544.png
Какое-то время было отчетливо видно проходящую там границу, но это, кажется, убрали.
Проблема с отображением категорий
Сообщений 1 страница 8 из 8
Поделиться1Вс, 9 Фев 2014 18:46:44
Поделиться2Вс, 9 Фев 2014 19:28:03
stupid stelsy
Неудобные скриншоты, заливайте по кнопке изображение в форме ответа
2. Нет ссылки на ресурс с проблемой, ибо гадание по картинке, таро фактически
Поделиться3Вс, 9 Фев 2014 19:40:13
Deff
О, прошу прощения, думала, что поставила ссылку.
http://cerasus.rusff.ru/
http://s9.uploads.ru/FXevN.png
http://s8.uploads.ru/sckZS.png
http://s8.uploads.ru/DYZxv.jpg
http://s8.uploads.ru/YkHjR.png
Поделиться4Вс, 9 Фев 2014 19:51:19
stupid stelsy
А какой браузер ? ибо у меня всё в норме ...
Поделиться5Вс, 9 Фев 2014 19:54:26
Deff
Гугл хром. Справа может быть незаметно, там цвет сливается. У еще пары человек вообще слева этот пиксель выезжает.
Поделиться6Вс, 9 Фев 2014 20:00:29
stupid stelsy
Замените скрипт
<!--Своя картинка в каждую категорию -->
<script type="text/javascript">
$(document).ready(function(){
myarray=new Array(
"До начала", "http://s9.uploads.ru/TXut2.png",
"Старт", "http://s9.uploads.ru/yRhMo.png",
"Для игры", "http://s8.uploads.ru/Eah3F.png",
"Игровой мир", "http://s9.uploads.ru/7j4tW.png",
"offtopic", "http://s9.uploads.ru/7j4tW.png",
"Реклама", "http://s9.uploads.ru/opfFt.png",
"Архивы", "http://s8.uploads.ru/PqSmh.png",
"Статистика форума", "http://s9.uploads.ru/HFp4W.png" //Последний элемент без запятой!
)
$("#pun-index div.category h2,#pun-index #pun-stats h2").each(function (i) {
for(q=0;q<myarray.length;q++){
var cssObj = {
"height":"100px",
"width":"851px",
"background-color": "transparent",
"background-image":"url("+myarray[q+1]+")",
"background-position":"0 50%",
"background-repeat":"no-repeat" //Последний элемент без запятой!
}
if($(this).children("span").text()==myarray[q])$(this).css(cssObj);
q++}
});
});
</script>
Красным добавки изменения
И второе, делайте фоновые картинки большим размером, дабы при изменении масштабов колесиком мыши рендило красиво,
Ограничивать в точности нужно размеры элемента, а не его фон
И второе, при центрировании, нужно ширину фоновой картинки выбирать четную(при четной же ширине элемента в который впихуем этот фон), - /ранее фон центрировался/, ибо разные браузеры по разному центрируют этот лишний пиксель
И вообще, лучше взять за правило - ширина четная, в том числе и элементов
Отредактировано Deff (Вс, 9 Фев 2014 20:04:15)
Поделиться7Вс, 9 Фев 2014 20:14:28
stupid stelsy, 0 - упустили
"background-position":"0 50%",
Отредактировано Deff (Вс, 9 Фев 2014 20:15:10)
Поделиться8Вс, 9 Фев 2014 20:50:43
Deff
Спасибо за помощь!