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

Коллеги, пришлось за ночь изобрести нечто, чего доселе не приходилось делать. Задача: верстка резиновая, без таблиц, лого по центру, пункты меню — по 3 справа и слева от лого, тянутся вправо и влево, меняются расстояния между ними. Вот работающий пример. Также я решил попробовать на лету масштабировать шрифт, иначе на высоких разрешениях меню становится совсем уже мелким.

Подключены jQuery 1.9.1, Modernizr, normalize.

Все считается исходя из ширины основного враппера
width: 80%;
min-width: 960px;
max-width: 1800px;

Между пунктами меню добавлены
в качестве распорок.
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');
  
  });

});

Прошу ваших комментариев, так как писалось всю ночь после трудного дня, бегом и на коленке. Буду благодарен за предложения и указания на ошибки.
  • Вопрос задан
  • 6952 просмотра
Пригласить эксперта
Ответы на вопрос 5
Makito
@Makito
front-end developer
ИМХО: На самом деле требование «не на таблицах» означает как правило НЕ использование таблицы для создания основного обертывающего элемента (wrapper), но например использование таблицы для верстки такой шапки как у вас или сложного меню считается вполне приемлемым. Не стоит параноидально бояться таблиц, просто нужно их использовать с толком.
Ответ написан
Aingis
@Aingis
Всё гениальное — просто.
Так и не понял, что вы хотите и на кой чёрт вам скрипт на Джей-квери. Изменять размер шрифта и добавлять отступы можно и через media-выражения в ключевых точках.
Ответ написан
@egorinsk
Если лого фиксированного размера, то это же элементарно делается средствами CSS: делаем 2 блока (float left и right) шириной 50%, в них блок с margin-right/margin-left, равной размеру логотипа, получаем зону слева от логотипа и справа. Их делим на 3 части с помощью float: left, width 33% и text-align: center.

Шрифт можно менять через media query.

Яваскрипт, и тем более тяжелый 200-килобайтовый фреймворк (который наверняка превратит изменение размера окна в слайдшоу на реальном сайте) для такой относительно простой задачи не требуется.
Ответ написан
все проще чем вы думаете, сам недавно делал почти 1в1 вашу верстку
вам поможет 2 вот таких штуки по бокам css-live.ru/articles-css/ravnomernoe-vyravnivanie-blokov-po-shirine.html
я правильно вас понял?
Ответ написан
parmactep
@parmactep

А что вам мешает использовать display:inline-block с text-align:justify?

Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы