Сложная резиновая верстка — прошу комментариев к реализации

Коллеги, пришлось за ночь изобрести нечто, чего доселе не приходилось делать. Задача: верстка резиновая, без таблиц, лого по центру, пункты меню — по 3 справа и слева от лого, тянутся вправо и влево, меняются расстояния между ними. Вот работающий пример. Также я решил попробовать на лету масштабировать шрифт.
Подключены jQuery 1.9.1, Modernizr, normalize.
Все считается исходя из ширины основного враппера
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .css.geshi_code {font-family:monospace;} .css.geshi_code .imp {font-weight: bold; color: red;} .css.geshi_code .kw1 {color: #000000; font-weight: bold;} .css.geshi_code .kw2 {color: #993333;} .css.geshi_code .co1 {color: #a1a100;} .css.geshi_code .co2 {color: #ff0000; font-style: italic;} .css.geshi_code .coMULTI {color: #808080; font-style: italic;} .css.geshi_code .es0 {color: #000099; font-weight: bold;} .css.geshi_code .br0 {color: #00AA00;} .css.geshi_code .sy0 {color: #00AA00;} .css.geshi_code .st0 {color: #ff0000;} .css.geshi_code .nu0 {color: #cc66cc;} .css.geshi_code .re0 {color: #cc00cc;} .css.geshi_code .re1 {color: #6666ff;} .css.geshi_code .re2 {color: #3333ff;} .css.geshi_code .re3 {color: #933;} .css.geshi_code span.xtra { display:block; }

width: 80%;
min-width: 960px;
max-width: 1800px;
 

Между пунктами меню добавлены в качестве распорок.
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .javascript.geshi_code {font-family:monospace;} .javascript.geshi_code .imp {font-weight: bold; color: red;} .javascript.geshi_code .kw1 {color: #000066; font-weight: bold;} .javascript.geshi_code .kw2 {color: #003366; font-weight: bold;} .javascript.geshi_code .kw3 {color: #000066;} .javascript.geshi_code .co1 {color: #006600; font-style: italic;} .javascript.geshi_code .co2 {color: #009966; font-style: italic;} .javascript.geshi_code .coMULTI {color: #006600; font-style: italic;} .javascript.geshi_code .es0 {color: #000099; font-weight: bold;} .javascript.geshi_code .br0 {color: #009900;} .javascript.geshi_code .sy0 {color: #339933;} .javascript.geshi_code .st0 {color: #3366CC;} .javascript.geshi_code .nu0 {color: #CC0000;} .javascript.geshi_code .me1 {color: #660066;} .javascript.geshi_code span.xtra { display:block; }

jQuery(document).ready(function ($){
    /*при иницализации окна*/
    var calcWidth = $('#main-wrap').width();    /*считываем ширину враппера*/
    $('.top-nav-spacer').css('width', (calcWidth / 96 - 3)|0);    /*добавляем ширину распорки*/
    $('.top-nav-spacer').css('padding-left', (1 / calcWidth * 700)|0);    /*добавляем распорке паддинг для более тонкой настройки ширины*/
  $('.top-nav-link').css('font-size', (calcWidth / 96 + 1.7)|0);    /*изменяем размер шрифта*/
  $('.title').css('margin-top', (calcWidth / 960 + 1)|0);    /*изменяем оступ лого по высоте для подгонки по нижней линии шрифта*/
 
    /*то же самое, но при изменении размера окна*/
  $(window).on('resize', function (){
 
    var calcWidth = $('#main-wrap').width();
    $('.top-nav-spacer').css('width', (calcWidth / 96 - 3)|0);
    $('.top-nav-spacer').css('padding-left', (1 / calcWidth * 700)|0);
  $('.top-nav-link').css('font-size', (calcWidth / 96 + 1.7)|0);
  $('.title').css('margin-top', (calcWidth / 960 + 1)|0);
    console.log('resize');
 
  });

});
 

Прошу ваших комментариев, так как писалось всю ночь после трудного дня, бегом и на коленке. Буду благодарен за предложения и указания на ошибки.

1 ответов


Нужно было делать на CSS, было бы более надежным. Вот представь что будет если у юзера будет отключен JavaScript? Такие задачи можно было бы легко реализовать и на CSS, а JavaScript уже применять в случае крайней необходимости.