Matt Dawdy

Мартовский кронштейн безумия на сайте


Дизайн сайта Дизайн

У меня есть небольшой сайт, который я построил для себя и своего друга, который позволит нам запустить наш крошечный маленький пул магов Madness. Функционально, он отлично работает. Но для отображения скобок это, ну, просто уродливо.

уродливый ,

Quick NCAA Bracket Пояснение на случай, если кто-либо не знает. На улице должно быть 64 команды, разделенных на 4 квадранта. Внутри каждого квадранта есть еще 4 уровня игр (16 команд до 8, до 4, от 2 до 1). После этого победители из 4-х кронштейнов играют 1 другую, затем эти победители играют друг с другом

Каждая команда «кликабельна», и для меня каждый маленький цветной квадрат должен быть в своих избранных элементах на основе id. В настоящее время это табличный дизайн (boo!), И, как вы можете видеть, настолько уродливый.

Любые идеи для этого выглядят немного лучше? Остальная часть сайта очень проста (я называю ее чистой) с серой / черной / белой, но я мог бы легко это изменить.

e100
Есть ли действительно 4 квадранта? Разумеется, это всего лишь один пул, если вы не подсели или рандомизировали, когда вы опустились до последних 4?

Kyle
На самом деле, я думаю, что таблицы здесь хорошо используются. Это явно табличные данные, и сделать это во вложенных divs будет фактическим кошмаром. Хорошая работа по выбору правильного элемента для правильной работы :) Что касается «уделения внимания», то градиентов, везде! : D

e100
Моя точка выше может показаться тангенсом, но я пытаюсь выработать, если вам нужны 4 цвета, и почему вы начинаете с левого и правого краев и работаете в направлении центра, а не в классическом прогрессировании слева направо.

Matt Dawdy
e100 - да, есть 4 квадранта. Смотрите этот поиск изображений: google.com/.... Это ежегодный турнир многих колледжей и университетов в Соединенных Штатах (я думаю, только в США ...) с 64 командами (ну, теперь 68, но 8 команд играют на день раньше и сокращают поле до стандартных 64 команд .) Однако мой макет фактически не нужно разделить на квадранты. Вот как это обычно делается.

JFW
Прекрасный дизайн. :)

Ответы


lawndartcatcher

Пара возможных предложений:

-Вы можете разрешить пользователям масштабировать его вверх или вниз, чтобы они просматривали только один раунд (или пару раундов, или половину команд и т. Д.)? Немного легче прокручивать вверх и вниз в браузере, чем прокручивать влево-вправо, поэтому, если вам нужно прокрутить вниз немного, большинство пользователей, вероятно, не будут иметь проблемы с этим.

-Grey out побежденные команды / уровни (так что только в настоящее время активные команды имеют цвета)

-Используйте что-то вроде рамки вокруг каждой пары, так что легче понять, кто играет кто (это было бы более полезно в начале, так как есть так много больше вариантов для начала)

Не могли бы вы использовать s вместо элементов таблицы? Таким образом, вы можете просто изменить div id отдельной команды (ов) на такие вещи, как активные, неактивные (побежденные), в настоящее время играющие и т. Д. Это не должно мешать кликабельности (это слово?) Каждого элемента, но разрешить вы больше контролируете форму, размер и контур каждого элемента блока.

Кроме того, что означают каждый из цветов? Являются ли они подразделением NCAA, «принадлежащим» определенным человеком и т. Д.? Если это что-то стандартное (например, географическое или NCAA-разделение), я предполагаю, что пользователи все это поймут, но если это просто сделано, чтобы попытаться визуально разделить различные команды, вам может быть лучше создать физическую границу.

Matt Dawdy
Масштабирование: Абсолютно я мог, и это отличная идея. Когда я сделал это в прошлом году, я буквально делал окончательное тестирование, когда объявлялся кронштейн, и я быстро пошёл на интерфейс. Поэтому почему я здесь. Я просто должен был приехать сюда ТРИ МЕСЯЦА АГО! Оставшиеся команды - снова, отличный совет. Я это сделаю. Пограничные вокруг пары - не уверен, что я могу сделать это легко, но это нужно сделать.

Matt Dawdy
«Не могли бы вы использовать s вместо элементов таблицы» - я не уверен, что вы хотели сказать там. Divs? Если это так, это намного выше моего уровня навыков CSS, чтобы сделать divs таким же, как это. Любые ссылки? Что касается цветов, они были просто для разлуки. Они уродливые, как грех, и полностью размыты. Я ненавижу их. Если я разделил скобку на 5 вкладок или что-то в этом роде, я думаю, что могу избавиться от цветов.

lawndartcatcher
да, извините - divs. когда вы прикрепляете скобки в редакторе html, чтобы сайт убивал их.

lawndartcatcher
Вероятно, вы могли бы захватить заранее подготовленную структуру сетки CSS и изменить ее. Я своего рода поклонник 960.gs и их сетчатая система.

mgkrebbs

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

Смотри также