Jump to content
  • 0

Как можно сверстать сие чудо?

DADE

Asked by DADE,

 Share

Question

DADE Explorer

DADE

Posted
Posted

Задам для начала несколько больше всего интересующих меня вопросов и покажу результат который есть на данный момент.

285j51.jpg

1 и 2 - Меня интересует как можно проще реализовать эти линии.

3 - Как лучше сделать отступ? Если брать ныне существующий код, то я думал добавить еще один table и выставить ему height, в размере нужного отступа.

Код можно посмотреть тут: Турнирная таблица.

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

например: берем 16 игроков, второй столбик соответственно уже 8. И тут вдруг мне понадобилась таблица на 32 игрока, и я просто добавляю еще 16 строк грубо говоря <table class="asd"></table>, еще 8 таки-же строк к следующему столбику и т.д, и получаю работающую таблицу, не меняя никаких размеров.

Думаю суть ясна, проще говоря: нужна динамичная таблица, с минимум изменений в коде, и без изменений в размере.

Вопросы? Ответы?

Заранее благодарю.

DADE

Link to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0
CEBEP Explorer

CEBEP

Posted
Posted (edited)

по моему тут просто вёрсткой красиво не сделать, будет реально круто есть без таблиц писать на php расчёт позиций дивов с парами, текущий вариант по моему неприемлем потому как у следующего турнирного круга пары расположены на бестолковой высоте. В таблицах, кстати, тоже можно хорошо решить проблему написав для каждой колонки свою табличку. Если в турнире участвует 2^n военов можно вообще стрелочки реализовать рисунками, в более сложных случаях говорить о чистой разметке вообще бессмысленно.

Edited by CEBEP
Link to comment
Share on other sites
  • 0
fan Explorer

fan

Posted
Posted

Я бы попробовал на ДИВах всё сделать, если кто не знает, ДИВами можно и посложней рисунок нарисовать.

Примерно так.

ДИВу контейнеру даём позитион релативе, а те что внутри, выставляем по абсолюту.

Возни много, пока поймёшь какой ДИВ как позиционируется, потом будет легче.

Идея интересная, надо будет для себя поковырять.

Link to comment
Share on other sites
  • 0
DADE Explorer

DADE

Posted
  • Author
Posted (edited)
будет реально круто есть без таблиц писать на php расчёт позиций дивов с парами

Наверно так и буду делать. Спасибо за советы, подожду еще хотя-бы пару комментариев и уже решу окончательно как буду реализовывать.

P.S: Обновил нынешний вариант. Добавил линии, поправил отступы. Что думаете?

Edited by DADE
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

А вот такая идея как тебе?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
	*{ margin: 0; padding: 0;}
	body,html { height: 100%;}
	.block {border: 1px solid #000; float: left; width: 20%; position: relative; }
	#wrap { display: inline; }
	.bottom1 { margin-top: 15%;}
	.line_top { position: absolute; right: -20px; width: 5px; height: 100%; background: #000;}
	.line { position: absolute; right: -65px; top: 50%; width: 50px; height: 5px; margin-top: -5px; background: #000;}
</style>
</head>

<body>
<div id="wrap">
	<div class="block">
		<div class="line_top"></div>
		<div class="line"></div>
		<div class="top">Игрок1</div>
		<div class="top1">Игрок2</div>
		<div class="bottom1">Игрок3</div>
		<div class="bottom">Игрок4</div>
	</div>
</div>

</body>
</html>

Link to comment
Share on other sites
  • 0
DADE Explorer

DADE

Posted
  • Author
Posted

Довольно интересный вариант, но опят-же если брать скажем 100 участников, то с размерами будет тяжеловато, НО если продумать алгоритм, то с помощью пхп я бы реализовал все как надо. Спасибо, завтра попробую.

Link to comment
Share on other sites
  • 0
fan Explorer

fan

Posted
Posted

У меня вот получилось.

Картинка здесь

Не понял почему форум отказался от gif, пришлось на обменник кинуть по быстрому.

Хочешь возьми картинку на обменнике.

У меня тоже возник вопрос о наращивании.

Link to comment
Share on other sites
  • 0
Na-na Explorer

Na-na

Posted
Posted

что то подобное верстали в результатах турнира вот этой игры http://www.terrafoot.ru/

там был жуткий замут с таблицами с 100% высотой, но самое главное что работает при любом количестве игроков и под большими нагрузками

Link to comment
Share on other sites
  • 0
Na-na Explorer

Na-na

Posted
Posted
Вооот, именно тут я и хотел посмотреть как сделана таблица, но мне почему-то казалось что это 11х11 и пробежала мысль что отказались от использования таблиц, спасибо Na-na.

там сложно разобраться как она сделана:))

мы сутки над ней сидели, когда верстали:)

Link to comment
Share on other sites
  • 0
DADE Explorer

DADE

Posted
  • Author
Posted

Все! Всем спасибо, реализовал с помощью таблиц, совместил свой вариант и взял некоторое из террафут, совместил это все с пхп и получилось то что надо, но на данный момент работают только, 4 - 8 - 16 - 32..., днем сделаю на все остальное и могу показать результат если кому-то интересно. :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept