Как сделать без таблиц

Kenshi45 · February 18, 2009

Как можно реализовать такое через 3 divа?

Edited February 18, 2009 by Kenshi45

Tokolist · February 18, 2009

Это тривиальная верстка.

Что у Вас конкретно не получается?

Kenshi45 · February 18, 2009

Проблема состоит в том, чтобы сделать, чтобы внутри слоя текст был выравнен слева, а внутренний дополнительный слой справа

А еще почему-то внутри слоя если вставить фоновый рисунок, то он в ИЕ6 заходит внутрь границы и это никак не исправить.

Edited February 18, 2009 by Kenshi45

Tokolist · February 18, 2009

Для этих целей есть float и text-align

Выкладывайте, что у Вас уже получилось - подправим.

Kenshi45 · February 18, 2009

Для этих целей есть float и text-align
Выкладывайте, что у Вас уже получилось - подправим.

Вот посмотрите пожалуйста что тут не так?

http://aionzone.ru/themes/aionzone/spells.htm

по идее name должно быть слева вверху, level - справа вверху и content внизу по всей ширине слоя, в ИЕ6 так все и выглядит, а вот с другими браузерами все сьехало не пойму даже куда...

Edited February 18, 2009 by Kenshi45

Tokolist · February 18, 2009

<!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" lang="ru" xml:lang="ru" dir="ltr">
<head>
<title>Таблица способностей</title>

<style type="text/css">
/*<![CDATA[*/

* {padding: 0; margin: 0; }

div.container {
  clear: both;
  overflow: hidden;
  zoom: 1;
  width: 450px;
}

div.container div.left {
  float: left;
  width: 40px;
}

div.container div.right {
  overflow: hidden;
  zoom: 1;
  background: #eee url(http://aionzone.ru/themes/aionzone/images/forms/table-gradient-odd.png) 0 0 repeat-x;
}

div.container div.level {
  float: right;
  width: 50%;
  text-align: right;
}

div.container div.name {
  margin-right: 50%;
}

div.container div.content {
  clear: both;
}

/*]]>*/
</style>
</head>
<body>



<div class="container">
  <div class="left">
	<img src="http://aionzone.ru/themes/aionzone/images/database/sample1.png" width="40" height="40" alt="" />
  </div>
  <div class="right">
	 <div class="level">level</div>
	 <div class="name">name</div>
	 <div class="content">content</div>
  </div>
</div>

</body>
</html>

Это если я правильно понял. Плюс является обобщенным вариантом ибо истинных целей я не знаю.

Вам осталось только победить трехпиксельный баг. :rolleyes:

Kenshi45 · February 18, 2009

Спасибо, а как именно его победить?

И что такое zoom:?

Edited February 18, 2009 by Kenshi45

Tokolist · February 18, 2009

Спасибо, а как именно его победить?

В этом разделе не рекомендуется тыкать людей в поисковик.

Но прийдется :rolleyes:

И что такое zoom:?

http://msdn.microsoft.com/en-us/library/ms531189.aspx

И да! Мне кажется что в данном случае таблицы все-таки лучше, но (как я уже сказал) истинные цели мне неизвестны.

Edited February 18, 2009 by Tokolist

Kenshi45 · February 18, 2009

Но прийдется
http://msdn.microsoft.com/en-us/library/ms531189.aspx
И да! Мне кажется что в данном случае таблицы все-таки лучше, но (как я уже сказал) истинные цели мне неизвестны.

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

s0rr0w · February 18, 2009

Но прийдется
http://msdn.microsoft.com/en-us/library/ms531189.aspx
И да! Мне кажется что в данном случае таблицы все-таки лучше, но (как я уже сказал) истинные цели мне неизвестны.

http://forum.htmlbook.ru/index.php?showtopic=12667

Борьба с "мифическим" однопиксельным смещением

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

Да сколько можно повторять, НЕ БАГ ЭТО :rolleyes:

Это правильно, так должно быть во всех браузерах!

Kenshi45 · February 18, 2009

http://forum.htmlbook.ru/index.php?showtopic=12667
Борьба с "мифическим" однопиксельным смещением
Да сколько можно повторять, НЕ БАГ ЭТО
Это правильно, так должно быть во всех браузерах!

http://aionzone.ru/themes/aionzone/spells.htm

Больше он не кажется таким уж мифическим?) (смотреть в ff)

Еслиб я знал как его убрать, то не создавал бы таких глупых постов), но я почти все способы перепробовал - результата никакого...

Edited February 18, 2009 by Kenshi45

Tokolist · February 18, 2009

http://forum.htmlbook.ru/index.php?showtopic=12667
Борьба с "мифическим" однопиксельным смещением

Ааа... Теперь понятно откуда ноги растут... Не читал данного топика.

Мое имхо: там вложенная таблица вообще не нужна.

Или такой изврат, если что...

@-moz-document url-prefix() {
  img {position: relative; top: -1px;}
}

Kenshi45 · February 18, 2009

@-moz-document url-prefix() {
  img {position: relative; top: -1px;}
}

Да, но баг появляется только в ff, а значит в остальных браузерах она стоит правильно, а мы сдвигаем ее на один пиксель, и теперь в ff она выглядит нормально, а в остальных браузерах выше, чем нужно((

Edited February 18, 2009 by Kenshi45

s0rr0w · February 18, 2009

http://aionzone.ru/themes/aionzone/spells.htm
Больше он не кажется таким уж мифическим?) (смотреть в ff)
Еслиб я знал как его убрать, то не создавал бы таких глупых постов), но я почти все способы перепробовал - результата никакого...

Вопрос, зачем его убирать? Вы думаете, кто-то будет особо возмущен наличием 1-го пикселя?

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

Вернитесь к тому посту, где я пояснял почему это нельзя считать багом, потом скопируйте себе тот проверочный код, что я приводил, и посмотрите на результат в разных браузерах.

Потом перейдите по ссылке на спецификацию, что я приводил, и посмотрите, чему равняется ширина таблицы, и как отсчитываются бордюры при border-collapse: collapse

Решение - не таблица с border-collapse: collapse (это может быть таблица, которая лежит внутри дива с бордюром и фоном), или блочная верстка.

Tokolist · February 18, 2009

а в остальных браузерах выше, чем нужно((

Серьезно? :rolleyes:

s0rr0w · February 18, 2009

Да, но баг появляется только в ff, а значит в остальных браузерах она стоит правильно,

OMG! Где вы такой логике научились? Все пошли воровать, и вы пойдете, потому что так все делают? А ничего что по закону воровать запрещено?

Kenshi45 · February 18, 2009

OMG! Где вы такой логике научились? Все пошли воровать, и вы пойдете, потому что так все делают? А ничего что по закону воровать запрещено?

Сделал через слой, в ИЕ6 не задний фон сдвигается внутрь верхнего бордера на 1 пиксель((( это из той же оперы баг?

http://aionzone.ru/themes/aionzone/spells.htm

Edited February 18, 2009 by Kenshi45

s0rr0w · February 18, 2009

Сделал через слой, в ИЕ6 не задний фон сдвигается внутрь верхнего бордера на 1 пиксель((( это из той же оперы баг?

Нет, это уже из другой. Это древний баг, которому, наверное, с десяток лет уже. Повторяется и в 7й версии.

Если div.content добавить zoom: 1, то все чудным образом вылечивается.

Kenshi45 · February 19, 2009

Вроде со всем разобрался, спасибо большое.

bezraznizi · March 5, 2009

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xm
......
......
......

<div class="container">
  <div class="left">
	<img src="http://aionzone.ru/themes/aionzone/images/database/sample1.png" width="40" height="40" alt="" />
  </div>
  <div class="right">
	 <div class="level">level</div>
	 <div class="name">name</div>
	 <div class="content">content</div>
  </div>
</div>

</body>
</html>
Это если я правильно понял. Плюс является обобщенным вариантом ибо истинных целей я не знаю.
Вам осталось только победить трехпиксельный баг.

если необходимо задать для слоёв div.level и div.name параметр height - в IE появляется эммм.."разделитьель", то ли граница какого-то из этих слоёв, то ли рамка.. белая... т.е. если в бэкграунд слоёв вставить кусочки единой картинки, разбитой на 2 куска (левый и правый) - никак не удаётся избавиться от разделителя в виде вертикальной белой полосы... как быть не знаете?

Sign In

Как сделать без таблиц

Question

Link to comment

Share on other sites

19 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information