![[info]](http://l-stat.livejournal.com/img/userinfo.gif?v=92.1){kind=small}
Есть такая штука, как «макетная сетка», направляющие линиии в дизайне сайта, к которым привязывается расположение элементов и их размеры. В тех работах, что я делаю сейчас макетная сетка есть всегда, но при этом у меня в вёрстке она виртуальная, не задаётся явно таблицами. Чтобы видеть, выровнены ли элементы по сетке я написал скрипт, который, будучи подключеным на страницу, рисует сетку:
function _columns(a)
{
document.write('<style type="text/css"> .column_ { position: fixed; ' +
'z-index: 999; top: 0; display: block; height: 100%;' +
'border-right: 1px dashed #4affff; }' +
'* html .column_ {position: absolute; } </style>');
for (var i = 0, l = a.length; i < l; i++)
document.write('<span class="column_" style="left: ' + a[i] + '%"></span>');
}
_columns([2, 10, 18, 26, 34, 42, 50, 58, 66, 74, 82, 90, 98]);При вызове скрипта в массиве задаются проценты, где рисовать линию сетки (2%, 10%, etc).
Вот пример.
Есть только одна проблема: в MSIE6-, который не понимает position: fixed, сетка рисуется до конца окна, а не до конца документа, если документ больше, чем окно, то низ не покрывается сеткой. В стандартных браузерах благодаря position: fixed всё нормально.
Буду призателен, если кто-то предложит решение для MSIE6-.
December 7 2006, 04:36:46 UTC 5 years ago
function _columns(a)
</pre>{
document.write(' .column_ { position: fixed; '+
'z-index: 999; top: 0; display: block; height: 100%;' +
'border-right: 1px dashed #4affff; }' +
'* html .column_ {position: absolute;} ');
for (var i = 0, l = a.length; i < l; i++)
document.write('');
}
function stayHigh()
{
var span = document.getElementsByTagName('SPAN');
for (var i = 0; i < span.length; i ++) {
if (span[i].className == 'column_') {
span[i].style.top = getBodyScrollTop() + 'px';
}
}
}
function getBodyScrollTop()
{
return self.pageYOffset || (document.documentElement && document.documentElement.scrollTop) || (document.body && document.body.scrollTop);
}
_columns([2, 10, 18, 26, 34, 42, 50, 58, 66, 74, 82, 90, 98]);
window.onscroll = stayHigh;
December 7 2006, 04:38:01 UTC 5 years ago
December 7 2006, 08:54:10 UTC 5 years ago
December 7 2006, 09:38:15 UTC 5 years ago
window.onscroll = stayHigh;
}
December 7 2006, 10:00:01 UTC 5 years ago
Или ты говоришь о вспомогательном средстве, с помощью которого ты нарисуешь модульную сетку, согласно которой ты будешь выравнивать элементы макета?
December 7 2006, 11:03:14 UTC 5 years ago
А сетка у вас хоть и нарисована, но она какая-то странная. Я не смог наложить на неё своим скрптом, хоть и пытался (хотел привести ваш сайт как пример). Там разные проценты при разных размерах, по крайней мере, мне так показалось.
December 7 2006, 11:06:52 UTC 5 years ago
December 7 2006, 11:11:04 UTC 5 years ago
December 7 2006, 11:36:38 UTC 5 years ago
Сейчас готовим полноценный сайт, так что скоро текущая версия тоже станет не нужна.
July 16 2008, 07:37:41 UTC 3 years ago
October 9 2008, 17:10:57 UTC 3 years ago
December 7 2006, 11:13:30 UTC 5 years ago
Про width
http://harisov.livejournal.com/48761.htDecember 7 2006, 11:34:32 UTC 5 years ago
Re: Про width
угуJuly 16 2008, 16:47:30 UTC 3 years ago
December 7 2006, 17:10:52 UTC 5 years ago