Русское сообщество fluxbb

Быстрый лёгкий надёжный форумный движок

Вы не вошли.

Объявление

Вы можете внести свой вклад в содержание сайта. Жертвователи попадут в почетную группу "Спонсоры". Поддержать сайт.

#1 2010-11-03 18:12:12

Visman
Administrator
Из Сибирь
Зарегистрирован: 2009-06-08
Сообщений: 2,236
Сайт

Стандартные стили

Возникла мысль после тестирования модов:
Нужно либо зафиксировать ширину стандартных стилей, либо ограничить ее на минимум.

Почему:
Если окно браузера узкое или разрешение экрана мелкое, то вся разметка разлазится/слипается sad

Offline

#2 2010-11-04 07:39:51

artoodetoo
Admin by chance
Зарегистрирован: 2008-09-09
Сообщений: 887
Сайт

Re: Стандартные стили

поддерживаю


There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.

Offline

#3 2010-11-04 09:07:05

Visman
Administrator
Из Сибирь
Зарегистрирован: 2009-06-08
Сообщений: 2,236
Сайт

Re: Стандартные стили

Тогда на какую ширину следует ориентироваться?
На 1024 или 1280?
Вот например статистика с моего форума
34e78ca26d79.gif

Offline

#4 2010-11-04 12:29:06

artoodetoo
Admin by chance
Зарегистрирован: 2008-09-09
Сообщений: 887
Сайт

Re: Стандартные стили

Лично я стараюсь верстать чтобы укладывалось в 1024. Например здешний Summertime сделан так, чтобы при 1024 и появившемся вертикальном скроллинге всё укладывалось без горизонтального.

Пользуюсь Developer Panel для FireFox. Там можно задать несколько тестовых размеров.


There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.

Offline

#5 2010-11-05 12:59:49

Visman
Administrator
Из Сибирь
Зарегистрирован: 2009-06-08
Сообщений: 2,236
Сайт

Re: Стандартные стили

Я так понял нам достаточно в .pun (такой например в оксиген)

.pun {
    margin: 12px 20px
    }

добавить это

    margin: 0 auto;
    width: 900px;

Offline

#6 2010-11-05 17:29:04

scalemaster
Участник
Зарегистрирован: 2009-08-10
Сообщений: 134

Re: Стандартные стили

Только вчера лепил стиль. Сделал под минимальное 768. У меня хоть и Wide 22", никогда не раскрываю браузер на всё окно. Обычно занимает полную высоту и 3/4 ширины экрана. Мессенджеры, плееры, записные книжки и панель задач справа.

Offline

#7 2010-11-05 20:04:52

Freeman
Участник
Из Санкт-Петербург
Зарегистрирован: 2010-07-31
Сообщений: 128
Сайт

Re: Стандартные стили

scalemaster пишет:

никогда не раскрываю браузер на всё окно.

+1

Offline

#8 2010-11-06 17:57:06

Visman
Administrator
Из Сибирь
Зарегистрирован: 2009-06-08
Сообщений: 2,236
Сайт

Re: Стандартные стили

Сижу сейчас и думаю, а что если мод наваять, который будет позволять юзеру выбирать себе ширину форума?
А реализация будет через подстановку во время генерации страницы в шаблом вместо
class="pun">
стиля явно
class="pun" style="margin:0 auto; padding:12px 0; width:[ШИРИНА]px;">

Offline

#9 2010-11-06 20:14:16

Freeman
Участник
Из Санкт-Петербург
Зарегистрирован: 2010-07-31
Сообщений: 128
Сайт

Re: Стандартные стили

Visman, мне кажется, что с приходом широкоформатных мониторов о пикселях надо забыть. Поскольку старые мониторы в одночасье умирать не думают (у меня самого 1280×1024), на физический размер более полагаться нельзя — слишком велика разница. Только относительные единицы — проценты или эти дурацкие em-ы.

Ещё недавно дизайны с жёстко заданной шириной называли скриншотами. smile

Offline

#10 2010-11-06 20:45:07

Visman
Administrator
Из Сибирь
Зарегистрирован: 2009-06-08
Сообщений: 2,236
Сайт

Re: Стандартные стили

Freeman, с мониторов все равно ни когда пикселы не уберут wink
Т.ч. для человека предпочтительней видеть в меню выбора именно ширину в пикселах.

Offline

#11 2010-11-06 20:49:15

Freeman
Участник
Из Санкт-Петербург
Зарегистрирован: 2010-07-31
Сообщений: 128
Сайт

Re: Стандартные стили

Visman, нифига. Вот у меня браузер не развёрнут на полный экран, и хз, сколько его ширина в попугаях. Проценты рулят!

Offline

#12 2010-11-06 20:58:34

Visman
Administrator
Из Сибирь
Зарегистрирован: 2009-06-08
Сообщений: 2,236
Сайт

Re: Стандартные стили

Freeman пишет:

Проценты рулят!

Проценты рулят от ширины окна браузера, а не от размера экрана в пикселах.
Если поставим вместо 800px 50%, то на полном экране в 1600 точек все будет верно, а вот на браузере занимающем в ширину половину экрана мы получим форум шириной 400 точек wink

Offline

#13 2010-11-06 21:01:52

Freeman
Участник
Из Санкт-Петербург
Зарегистрирован: 2010-07-31
Сообщений: 128
Сайт

Re: Стандартные стили

Более того, если пользователь попеременно работает на трёх разных компах с разными мониторами (на двух настольных и одном ноуте, например), он имеет полное право забыть/забить на конкретное разрешение данного монитора. Нехай компьютер сам считает.

Заданная ширина в профиле будет храниться или в куках? Для полной независимости от соотношения сторон монитора надо хранить пропорцию и ширину в процентах, и при переходе к другому соотношению соответствующим образом пересчитывать.

Offline

#14 2010-11-06 21:03:06

Visman
Administrator
Из Сибирь
Зарегистрирован: 2009-06-08
Сообщений: 2,236
Сайт

Re: Стандартные стили

А вообще можно использовать min-width например на 700px, тогда разрушения разметки на мелких разрешениях экрана и узких окнах браузера не будет. И форум будет использовать всю ширину окна по возможности.
Если не ошибаюсь, то для IE6 там скрипт minmax.js как раз под этот случай предусмотрен для эмуляции. Или нет?

Offline

#15 2010-11-06 21:04:42

Visman
Administrator
Из Сибирь
Зарегистрирован: 2009-06-08
Сообщений: 2,236
Сайт

Re: Стандартные стили

Данные собирался хранить в профиле, но что-то я склоняюсь к min-width.

Offline

#16 2010-11-07 09:41:06

Visman
Administrator
Из Сибирь
Зарегистрирован: 2009-06-08
Сообщений: 2,236
Сайт

Re: Стандартные стили

Выяснил, что стандартный файл minmax.js криво работает с min-width в IE6.
Т.е. он вообще не обрабатывает эту вещь.
Переписал minmax.js до такого состояния:

// minmax.js - written by Andrew Clover <[email protected]>
// Adapted for PunBB by Rickard Andersson and Paul Sullivan

/*@cc_on
@if (@_win32 && @_jscript_version>4)

var minmax_elements;

function minmax_bind(el) {
    var em, ms;
    var st= el.style, cs= el.currentStyle;

    if (minmax_elements==window.undefined) {
        if (!document.body || !document.body.currentStyle) return;
        minmax_elements= new Array();
        window.attachEvent('onresize', minmax_delayout);
    }

    if (cs['max-width'])
        st['maxWidth']= cs['max-width'];

    ms= cs['maxWidth'];
    if (ms && ms!='auto' && ms!='none' && ms!='0' && ms!='') {
        st.minmaxWidth= cs.width;
        minmax_elements[minmax_elements.length]= el;
        minmax_delayout();
    }

    if (cs['min-width'])
        st['minWidth']= cs['min-width'];

    ms= cs['minWidth'];
    if (ms && ms!='auto' && ms!='none' && ms!='0' && ms!='') {
        st.minmaxWidth= cs.width;
        minmax_elements[minmax_elements.length]= el;
        minmax_delayout();
    }

}

var minmax_delaying= false;
function minmax_delayout() {
    if (minmax_delaying) return;
    minmax_delaying= true;
    window.setTimeout(minmax_layout, 0);
}

function minmax_stopdelaying() {
    minmax_delaying= false;
}

function minmax_layout() {
    window.setTimeout(minmax_stopdelaying, 100);
    var i, el, st, cs, optimal, inrange;
    for (i= minmax_elements.length; i-->0;) {
        el= minmax_elements[i]; st= el.style; cs= el.currentStyle;

        st.width= st.minmaxWidth; optimal= el.offsetWidth;
        inrange= true;
        if (inrange && cs.minWidth && cs.minWidth!='0' && cs.minWidth!='auto' && cs.minWidth!='') {
            st.width= cs.minWidth;
            inrange= (el.offsetWidth<optimal);
        }
        if (inrange && cs.maxWidth && cs.maxWidth!='none' && cs.maxWidth!='auto' && cs.maxWidth!='') {
            st.width= cs.maxWidth;
            inrange= (el.offsetWidth>optimal);
        }
        if (inrange) st.width= st.minmaxWidth;
    }
}

var minmax_SCANDELAY= 500;

function minmax_scan() {
    var el;
    for (var i= 0; i<document.all.length; i++) {
        el= document.all[i];
        if (!el.minmax_bound) {
            el.minmax_bound= true;
            minmax_bind(el);
        }
    }
}

var minmax_scanner;
function minmax_stop() {
    window.clearInterval(minmax_scanner);
    minmax_scan();
}

minmax_scan();
minmax_scanner= window.setInterval(minmax_scan, minmax_SCANDELAY);
window.attachEvent('onload', minmax_stop);

@end @*/

Глюк с минимальной шириной пропал. Появление новых глюков не замечено.

Offline

#17 2010-11-07 10:09:05

Visman
Administrator
Из Сибирь
Зарегистрирован: 2009-06-08
Сообщений: 2,236
Сайт

Re: Стандартные стили

Все.
Для новых стилей ставлю

.pun {
    padding: 30px 40px;
    margin: 0 auto;
    max-width: 1100px;
    min-width: 700px;
}

Для старых стилей

.pun {
    padding: 12px 20px;
    margin: 0 auto;
    max-width: 1100px;
    min-width: 700px;
    }

В таком варианте стили будут представлены в моей сборке в дальнейшем.

Редактировался Visman (2010-11-07 10:44:13)

Offline

#18 2013-06-03 16:52:29

sadex
Участник
Зарегистрирован: 2013-06-01
Сообщений: 103
Сайт

Re: Стандартные стили

@ Visman, в новых стилях вставка

.pun {padding: 30px 40px; margin: 0 auto; max-width: 1100px; min-width: 700px;}

понравилась. Только я ставлю padding: 3px 3px; и лучше все смотрится. Для чего padding: 30px 40px; нужен?

Offline

#19 2013-06-03 16:59:53

Visman
Administrator
Из Сибирь
Зарегистрирован: 2009-06-08
Сообщений: 2,236
Сайт

Re: Стандартные стили

@sadex, да просто повелось так в новых стилях от разрабов и не стал я менять это.

Offline

#20 2013-06-03 18:08:10

sadex
Участник
Зарегистрирован: 2013-06-01
Сообщений: 103
Сайт

Re: Стандартные стили

Понятно. Значит никаких принципиальных препятствий не имеется. Дело в следующем. Многие изменяют масштаб удерживая клавишу CTRL и прокручивая колесико мыши (удобно). Так вот, при этом при большом padding, больше 20px, границы форума съезжают на несколько сантиметров от левого и правого края экрана, что плохо. А при маленьком padding, до 3px они практически остаются на месте, независимо от масштаба изображения, что очень удобно.
У меня, правда, широкоэкранный 19-дюймовый монитор. Но сейчас все новые мониторы широкоэкранные, что гораздо удобнее для просмотра web-сайтов и для программирования.

PS. На этом форуме при текущем стиле Summertime, несмотря на мой довольно широкий экран, мне постоянно приходится пользоваться горизонтальной прокруткой при чтении сообщений. Неудобно. После моей модификации стиля Oxygen могу увеличивать масштаб до большого размера текста - все умещается в окно, никакой горизонтальной прокрутки не нужно.

Редактировался sadex (2013-06-04 08:14:22)

Offline

Подвал доски

Под управлением FluxBB. Хостинг Hostens