Помогите сделать макет

[igmar]

http://codepen.io/anon/pen/dYLMEx

 

Сделал такие 3 колонки.

Но я этого не понимаю. Везде написано, что padding - это внутреннее расстояние блока до контента, значит оно не должно увеличивать размер блока. А блок увеличивается от padding, поэтому приходится величиной margin сдвигать средний блок, чтобы он не наезжал на соседний. В данном случае пришлось еще относительным left сдвинуть блок от левого sidebar. Уже приходится все высчитывать.

[Нарек]

Везде написано, что padding - это внутреннее расстояние блока до контента, значит оно не должно увеличивать размер блока.

Для этого есть box-sizing 

[Great Rash]

Но я этого не понимаю. Везде написано, что padding - это внутреннее расстояние блока до контента, значит оно не должно увеличивать размер блока.

 

Так, вот мы и выявили первую проблему. Рассмотрим блочную модель CSS:

 

Как видно из картинки, блок состоит из нескольких областей:

1) область контента - content

2) отступы - padding

3) границы блока (рамка) - border

4) поля - margin

Когда вы пишете в CSS width: 25%;, то вы задаёте ширину только для первой области (content), чтобы получить ширину блока с отступами нужно прибавить к ширине величину padding. Пример. Получается, что у зелёного блока ширина 25% + 5px (слева) + 5px (справа) = 25% + 10px

 

Кстати, ваше решение с position: relative; left: 10px; очень оригинальное, респект

 

Теперь совсем сложное задание: предположим, что у нас есть форум (как этот), типичное сообщение на форуме состоит из аватара юзера и собственно текста. Но вот беда, юзеры, подонки, не хотят загружать аватары одного размера и всё время грузят какие попало картинки. Наша задача сверстать вот такой макет:

 

Требования: левая колонка может содержать картинку любого размера и её ширина должна зависеть от размеров картинки. Правая колонка занимает всё остальное место.

[Great Rash]

Товарищам, которые хотят попрактиковаться в JS... Есть таблица, нужно написать скрипт сортировки по имени, фамилии, возрасту и семейному положению (по колонкам короче). Так же нужно написать пагинацию, при условии, что количество элементов, отображаемых на странице можно менять (при помощи селекта).

[Нарек]

Да.. Мне рано)

[igmar]

Пока могу сделать только таблицами. Пускай будет, чтоб сам не забыл.

 

http://codepen.io/anon/pen/megXRg

[Анна]

Товарищам, которые хотят попрактиковаться в JS... Есть таблица, нужно написать скрипт сортировки по имени, фамилии, возрасту и семейному положению (по колонкам короче). Так же нужно написать пагинацию, при условии, что количество элементов, отображаемых на странице можно менять (при помощи селекта).

и мне рановато, но я попробую пока только сортировку, вопрос:

я как-то раньше не задумывалась, но, что сортировка происходит на стороне клиента? Точнее, я думаю, если сортировка небольшая, то она на стороне клиента, а если большая, то на стороне сервера?

[igmar]

Сделал с разным размером картинок в левой колонке.

 

http://codepen.io/anon/pen/RWOMaW

[Igor Schnaider]

Товарищам, которые хотят попрактиковаться в JS... Есть таблица, нужно написать скрипт сортировки по имени, фамилии, возрасту и семейному положению (по колонкам короче). Так же нужно написать пагинацию, при условии, что количество элементов, отображаемых на странице можно менять (при помощи селекта).

У меня вот что вышло.

Update: fixed (неправильная сортировка строк была)

Edited November 22, 2015 by Igor Schnaider

[Нарек]

Имена не сортирует нормально:-)

[Igor Schnaider]

Имена не сортирует нормально:-)

Посмотрел, по-моему правильно все. Не могу найти где.

[andrey7287]

http://codepen.io/Andrey7287/pen/QjPVMo

[Нарек]

Посмотрел, по-моему правильно все. Не могу найти где.

http://joxi.ru/5mdkoQ3iNLKgr1 

http://joxi.ru/52a1yRZt8qW520

[Igor Schnaider]

 

Посмотрел, по-моему правильно все. Не могу найти где.

http://joxi.ru/5mdkoQ3iNLKgr1

http://joxi.ru/52a1yRZt8qW520

 

Спасибо

:-)

Самое что интересное, в FF (!) нормально работает.

(Поздно вечером делал, не протестировал в других браузерах - не обратил внимание на ошибку.)

// Проверка для строкиif (a.cells[0].textContent > b.cells[0].textContent) {    return 1;} else {    return -1;}// А было такreturn a.cells[0].textContent > b.cells[0].textContent; // 0 or 1

Edited November 22, 2015 by Igor Schnaider

[Great Rash]

я как-то раньше не задумывалась, но, что сортировка происходит на стороне клиента? Точнее, я думаю, если сортировка небольшая, то она на стороне клиента, а если большая, то на стороне сервера?

Если таблица небольшая, если нам не нужно перезагружать страницу, если нам не нужно лишний раз городить аякс и нагружать сервер запросами. Сейчас JS стал достаточно быстрый, чтобы не задумываться над сортировкой таблиц в пару тысяч строк, особенно если вся таблица кеширована.

 

Сделал с разным размером картинок в левой колонке.

А теперь попробуйте обойтись без display: table;

Igor Schnaider, сортировка работает неправильно У вас сортируется вся таблица, а нужно, чтобы сортировалась конкретная страница иначе пагинация теряет смысл.

 

Все, кто написал скрипт сортировки, теперь копируете ваш код вот сюда, нажимаете кнопку JSLint, и избавляетесь от предупреждений.

[andrey7287]

избавляетесь от предупреждений.

 

 

Это за гранью моего понимания.

http://codepen.io/Andrey7287/pen/QjPVMo

Edited November 23, 2015 by andrey7287

[Great Rash]

Expected ';' and saw '}' - при объявлении функции нужно завершать строку.

  var fn = function() {    // ...  };

Обратите внимание на последнюю точку с запятой.

Unexpected for - подозреваю что связана со следующей ошибкой, внутри не должно быть var. Все переменные (и итераторы в том числе) должны быть заранее объявлены.

[andrey7287]

Unexpected for - подозреваю что связана со следующей ошибкой, внутри не должно быть var. Все переменные (и итераторы в том числе) должны быть заранее объявлены.

 

 

Интересно, даже спецификация это предполагает насколько я понимаю.

The production IterationStatement : for (var VariableDeclarationListNoIn ; Expressionopt ; Expressionopt )

А ещё ему не понравилось i++ , который повсеместно используется.

 

И даже после того как я все это изменил Unexpected for.

 

PS Это слишком не однозначный валидатар, как мне показалось. Почему например отбивка в 4 пробела хорошо а таб, соответствующий 4 пробелам плох.

[Great Rash]

Интересно, даже спецификация это предполагает насколько я понимаю.

Тут дело не в спеке. JSLint - не совсем валидатор, это инструмент для соблюдения стандартов написания кода. Если вы работаете в команде на большим проектом, то крайне рекомендуется соблюдать стандарты - так всем участникам будет проще.

 

А ещё ему не понравилось i++ , который повсеместно используется.

Да, они рекомендуют юзать i += 1 вместо i++, но эта тема настолько холиварная, что даже где-то там есть опция, говорящая JSLint не обращать внимания на i++

 

PS Это слишком не однозначный валидатар, как мне показалось.

Повторюсь - это не валидатор. Такого понятия как "валидация" в программировании быть не может, потому что тут всё строго: код либо работает, либо падает с ошибкой (не компилируется в случае с компилируемыми языками).

UPD: В принципе пофиг каких стандартов кода вы будете придерживаться: будут ли это пробелы или табы, i++ или i += 1, будете ли вы писать так:

if (true) {  // then}

Или так:

if (true){  // then}

Главное эти стандарты выработать и придерживаться их. Просто т.к. вы тут хотите попрактиковаться/научиться грамотно писать скрипты, то мне подумалось, что сразу писать код, придерживаясь неких стандартов - отличная идея.

[Анна]

Мне все же рановато, пока не получается...

[andrey7287]

Просто т.к. вы тут хотите попрактиковаться/научиться грамотно писать скрипты, то мне подумалось, что сразу писать код, придерживаясь неких стандартов - отличная идея.

 

   Да, вы правы. Попробую использовать его в качестве плагина для Notepad++, настроив отступы и другие нюансы. 

 

  Спасибо за советы.

[Igor Schnaider]

Igor Schnaider, сортировка работает неправильно У вас сортируется вся таблица, а нужно, чтобы сортировалась конкретная страница иначе пагинация теряет смысл.

http://jsfiddle.net/Igor_Schnaider/81hea7tj/

[Great Rash]

Достойно, реализованы приватные и публичные методы, опции и их дефолтные значения, чистый код... Один момент: cachedTable - глобальная чтоль?

[andrey7287]

Круть   , но есть ли практический смысл писать такие скрипты для тривиальных задач, ну и для веба в целом? Когда речь не идёт о создании каких то уникальных скриптов или движков.

Edited November 24, 2015 by andrey7287

[Great Rash]

Есть.

 

1) чем "красивее" код, чем удобней его читать, тем проще его в дальнейшем поддерживать

2) код, оформленный в виде синглтона (тут правда не совсем синглтон, но почти) или просто класса удобно переносить из проекта в проект

3) подобный код довольно просто использовать как модуль в более сложной системе

 

По сути Igor Schnaider тут нам реализовал готовый UI-виджет.