LINUX.ORG.RU
Форум — Web-development  

Как грамотно на html сделать такую разметку?


0

1

Вот такую: 

  ________________
 |        |        |
 |        |        |
 |        |_____|
 |        |        |
 |        |        |
 |_____   |___|

Сижу чет торможу, все float'ы перепробовал, получается какой то кал. Ну как мне с помощью css разместить div'ы таким образом? Один слева и два справа?

★★

Последнее исправление: mio (всего исправлений: 3)
← [Web app]Менеджер Проектов
Хочу накалякать небольшой юзерскрипт для lor →

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

Руки у меня растут сам знаю откуда, можно не объяснять.

Реквестирую холивар «табличная верстка vs блочная верстка»

pianolender ★★★
()

petrosyan-mode=on

т.е. нужно чтобы у дивов края были рваные и распидорашенные?

anonymous
()

лучше бы в inkscape накидал или в GIMP.
Это делается просто
<div id=«left»></div>
<div id=«right»>
<div id=«inner1»></div>
<div id=«inner2»></div>
</div>

#left {float:left;}
#right {float:right;} /* тут нужно смотреть по желаемому результату - вдруг без флоата маржинами можно обойтись, если у левого фикс. размер? */
#inner1 {}
#inner2 {}

minakov ★★★★★
()
Ответ на: комментарий от pianolender 
<html>
  <head>
    <style>
    #left
    {
      float: left;
      width: 50%;
    }

    #right
    {
      width: 50%;
      float: right;
    }
    </style>
  </head>
  <body>
    <div id="left">
      1
    </div>
    <div id="right">
      <div id="div2">2</div>
      <div id="div3">3</div>
    </div>
  </body>
</html>

Линупсоеды, такие линупсоеды.

// NightmareZ

anonymous
()
Ответ на: комментарий от pianolender

А чего холиварить-то? Таблицы для данных, дивы для разметки.

jessey
()

<div class=«left half»></div>

<div class=«right half»></div>

<div class=«right half»></div>

***

.half{ width:49%; } /* надежнее */

.left{ float:left; }

.right{ float:right; }

anonymous
()
Ответ на: комментарий от pianolender

Реквестирую холивар «табличная верстка vs блочная верстка»

Скучно. Очень быстро выяснится, что вся прелесть табличной вёрстки исключительно в том, что с css свойствами float, position, clear, width и height кому-то лень разобраться один раз, чтобы потом не плодить эти холивары.

r_asian ★☆☆
()
Ответ на: комментарий от anonymous

NightmareZ лишний див же не? а если я захочу перейти к другой разметке, придется править html а не тока css так шта fail

mio ★★
() автор топика
Ответ на: комментарий от r_asian

кому-то лень разобраться один раз, чтобы …

… чтобы понять, что блочная вёрстка не всесильна и иногда нужно использовать для вёрстки и таблицы :) А _можно_ (вместо _нужно_) и в куда более широком наборе случаев :)

KRoN73 ★★★★★
()

ТС не уточнил необходимое поведение дивов, поэтому для простоты приведу пример фиксированных, растянутых на всё окно. Примеров именно резинового поведения в инете полно. Код проверил в IE8 и последних фоксе, опере и конквероре с вебкитом: 

<html>
<head>
<style type="text/css">
html, head      { font-family: sans-serif; color: black }
.brave-fitter   { margin: 0; padding: 0; border: 0;
                  background-color: #fcc; width: 100%; height: 100% }
.left-half      { background-color: #eee; width:49.99%;height: 100%; float: left; overflow-x: hidden; overflow-y: auto }
.right-half     { background-color: #ddd; width:  50%; height: 100%; float: left }
.top-quarter    { background-color: #ccc; width: 100%; height: 50%; overflow-x: hidden; overflow-y: auto }
.bottom-quarter { background-color: #bbb; width: 100%; height: 50%; overflow-x: hidden; overflow-y: auto }
.vis-box        { padding: .5em }
</style>
</head>
<body>

<div class="brave-fitter">

  <div class="left-half"><div class="vis-box">left div</div></div>
  <div class="right-half">

    <div class="top-quarter"><div class="vis-box">right-top div</div></div>
    <div class="bottom-quarter"><div class="vis-box">right-bottom div</div></div>

  </div>
</div>

</body>
</html>
49.99% < 50% пришлось задать для осла.

blexey ★★★★★
()
Ответ на: комментарий от KRoN73

… чтобы понять, что блочная вёрстка не всесильна и иногда нужно использовать для вёрстки и таблицы :) А _можно_ (вместо _нужно_) и в куда более широком наборе случаев :)

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

geekless ★★
()
Ответ на: комментарий от geekless

Замечу, что табличную верстку можно сделать и на дивах

Как сделать «совмещённое» растягивание div'ов по контенту? И по высоте, и по ширине, и в пропорциях? Чтобы ширина/высота ячеек (в т.ч. объединённых) была равной?

KRoN73 ★★★★★
()
Ответ на: комментарий от mio

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

blexey ★★★★★
()
Ответ на: комментарий от KRoN73

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

r_asian ★☆☆
()
Ответ на: комментарий от KRoN73

Как сделать «совмещённое» растягивание div'ов по контенту? И по высоте, и по ширине, и в пропорциях? Чтобы ширина/высота ячеек (в т.ч. объединённых) была равной?

Извини, но я ничерта не понял в вопросе. Можно пример разметки?

geekless ★★
()
Ответ на: комментарий от geekless

Извини, но я ничерта не понял в вопросе. Можно пример разметки?

<table>
  <tr>
    <td>1111</td>
    <td>2222</td>
  </tr>
  <tr>
    <td>3333</td>
    <td>4444</td>
  </tr>
  <tr>
    <td colspan="2">5555</td>
  </tr>
</table>

Сделай на div'ах также, чтобы ширина ячеек 1111 и 3333 была одинакова, высота ячеек 1111 и 3333 тоже, а ширина 5555 была равна объединённой ширине 1111+2222 и 3333+4444. Естественно, ширина/высота не фиксированная, зависит от контента.

KRoN73 ★★★★★
()
Ответ на: комментарий от KRoN73 
.table { display:table; border-spacing: 2px; border: 1px solid grey;}
.table > * { display:table-row; }
.table > * > * { display:table-cell; border: 1px solid grey;}

Но colspan не поддерживается, да.

geekless ★★
()
Ответ на: комментарий от geekless

Но colspan не поддерживается, да.

А в дизайне явление распространённое :)

Безусловно, можно пробовать сделать вложенные структуры, но сложность будет стремительно нарастать.

Ведь для чего стремятся использовать блочную вёрстку, если по уму? Чтобы иметь _логическую_, а не _визуальную_ вёрстку, наглядную, понятную и легко перестраиваемую через стили.

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

KRoN73 ★★★★★
()
Ответ на: комментарий от KRoN73

Вот вот. С 3 дивами таки не сделать. Нужно добавить еще несколько.

И чем тогда это лучше таблицы? Вот если бы можно было это сделать не добавляя лишних дивов только с помощью css ...

mio ★★
() автор топика
Ответ на: комментарий от KRoN73

Согласен.

И практика показывает, что любая блочная разметка стремится выродиться в случай «насмерть прибитой гвоздями, с точки зрения логики ничем не лучше таблицы, при этом сложнее и капризнее». Даже если изначально она была из трех дивов, в которых сложно заблудиться.

Потому что, как и всё остальное в web, блочная вестка просто еще один способ решать не ту задачу не тем инструментом.

Тут идеальной была бы связка css + средства трансформации xml. Вместо этого xml в вебе как таковой похоронили, а css заставили пахать за двоих.

geekless ★★
()

Я вот жду не дождусь, когда в html добавят layout'ы. Пример может и не самый удачный, но тем не менее:

#include <QtGui/QApplication>
#include <QHBoxLayout>
#include <QVBoxLayout>
#include <QGroupBox>

int main(int argc, char *argv[])
  {
    QApplication a(argc, argv);

    QGroupBox* parent = new QGroupBox();
    parent->show();

    QHBoxLayout* mainLayout = new QHBoxLayout;
    parent->setLayout(mainLayout);

    QGroupBox* leftContainer = new QGroupBox;
    QGroupBox* rightContainer = new QGroupBox;

    mainLayout->addWidget(leftContainer);
    mainLayout->addWidget(rightContainer);

    QVBoxLayout* rightVerticalLayout = new QVBoxLayout;
    rightContainer->setLayout(rightVerticalLayout);

    rightVerticalLayout->addWidget(new QGroupBox);
    rightVerticalLayout->addWidget(new QGroupBox);

    return a.exec();
  }

Почему такую визуальную разметку сделать проще на ЯП, чем на html? Любой сайт можно разбить на layout'ы без труда (причем div'ы выполняют их роль), так почему бы не объявить layout'ы явно?

Html layouts using div or using table. А должно быть html layouts using layouts.

division_hell
()
Ответ на: комментарий от mio

лишний див же

фигасе, лишних 10 символов! Браузер точно выпадет с out of memory!

придется править html а не тока css так шта fail

за правку html ноне убивают?

stevejobs ★★★★☆
()
Ответ на: комментарий от KRoN73

Как сделать «совмещённое» растягивание div'ов по контенту?

сделать на флеше ;)

stevejobs ★★★★☆
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
← [Web app]Менеджер Проектов
Web-development
Хочу накалякать небольшой юзерскрипт для lor →