Редизайн таблицы (динамическая ширина) с тегами Div - PullRequest
Новая
       13

Редизайн таблицы (динамическая ширина) с тегами Div

2 голосов
/ 05 мая 2009

Я хочу отобразить HTML-страницу, с классическим дизайном. Верхний колонтитул, нижний колонтитул, содержимое и строка справа.

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

Я также хотел бы использовать теги div вместо макета таблицы. Использование тегов div дает мне следующие преимущества (мне говорят):

  • Контент может быть обработан в ожидании «правильной» панели
  • На мобильном телефоне теги Div можно отображать друг под другом, а не рядом.

Мой тестовый / отладочный HTML выглядит так: 

<!-- Create content with DIV tags -->
<div id="head" style="background-color:aqua">This is the header</div>
<div id="body" style="float:left;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales sagittis sem, at bibendum nunc aliquet non. Maecenas condimentum, libero pharetra suscipit sodales, dui diam laoreet velit, at lacinia nisl erat sed turpis. Quisque lobortis consequat elementum. Suspendisse non interdum est. In velit felis, rhoncus tincidunt tincidunt sit amet, laoreet eu ligula. Nulla facilisi. Sed ornare facilisis pulvinar. Integer viverra arcu eu turpis dictum vitae tincidunt magna scelerisque. Nunc laoreet pulvinar odio, quis rutrum libero consectetur non. Donec molestie, felis volutpat condimentum iaculis, orci arcu feugiat sapien, accumsan scelerisque sapien orci sed urna. Curabitur et turpis sit amet diam vulputate egestas. </p>
</div>
<div id="right" style="background-color:orange; float:right; width:10em;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div id="tail" style="background-color:lime;clear:both;">This is the Footer</div>

<p>&nbsp;</p>

<!-- Create content with TABLE tag -->
<div id="t-head" style="background-color:aqua">This is the header</div>
<table cellpadding="0" cellspacing="0">
    <tr><td>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales sagittis sem, at bibendum nunc aliquet non. Maecenas condimentum, libero pharetra suscipit sodales, dui diam laoreet velit, at lacinia nisl erat sed turpis. Quisque lobortis consequat elementum. Suspendisse non interdum est. In velit felis, rhoncus tincidunt tincidunt sit amet, laoreet eu ligula. Nulla facilisi. Sed ornare facilisis pulvinar. Integer viverra arcu eu turpis dictum vitae tincidunt magna scelerisque. Nunc laoreet pulvinar odio, quis rutrum libero consectetur non. Donec molestie, felis volutpat condimentum iaculis, orci arcu feugiat sapien, accumsan scelerisque sapien orci sed urna. Curabitur et turpis sit amet diam vulputate egestas. </p>
    </td><td valign="top" style="background-color:orange; width:10em;">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </td></tr>
</table>
<div id="t-tail" style="background-color:lime;clear:both;">This is the Footer</div>

Вывод этого кода здесь:

Div vs Tables
(источник: vantslot.be )

(Текст не имеет значения, только макет, поэтому я немного его сжал).

Верхний макет использует div: Неправильно

В нижнем макете используется таблица: хорошо

Мой вопрос / проблема

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

Что мне действительно нужно, так это правая панель, отображаемая справа от содержимого, но когда браузер слишком мал (<20em), он может отображаться под ним. Это невозможно с таблицами, поэтому я предпочитаю решение div. </p>

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

Редактировать

Спасибо за все ответы, это действительно помогает мне двигаться вперед.

Я вижу, что здесь "не так". Я поместил панель вправо после панели content . Если я помещу правую панель перед панелью контента, она будет отображаться правильно (после добавления поля справа к контенту).

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

Ответы [ 5 ]

2 голосов
/ 05 мая 2009

Это позволит вашему правому столбцу фиксированной ширины поместиться на полях другого столбца и, следовательно, находиться на той же строке: 

#right
{
    float:right; 
    width:18em;
}

#body
{
    margin-right: 20em; //IE calculates padding into the width, so you need a buffer unless you set body's padding to 0
}

Теперь div тела, который по умолчанию равен 100% ширины экрана, будет плавным, а ваш правый столбец будет фиксированной ширины.

1 голос
/ 05 мая 2009

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

0 голосов
/ 15 мая 2009

Не проверено (пока), но я думаю, что нашел решение проблемы.

http://www.alistapart.com/articles/holygrail/

Это решение позволяет смешивать фиксированный и ликвидный макеты (термины, которые я узнал, задавая этот вопрос).

0 голосов
/ 05 мая 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" xml:lang="en" lang="en">
    <head>
    <title>Пример</title>
    <style type="text/css">
      html,body{
        margin:0;
        padding:0;
      }

      #header{
        height:150px;
        min-width:600px;
        background:#FFEF97
        }

      #menu{
        width:250px;
        float:right;
        background:#FFC597
        }


      #info{
        min-width:350px;
        background: red;
        }

      #footer{
        height:20px;
        min-width:600px;
        background:#B9CC8A;
        clear:both
      }

      #body{
        width: expression(((document.documentElement.clientWidth
        || document.body.clientWidth) < 600)?
        "600px" : "100%")
        }
    </style>
    </head>
    <body>
    <div id="body">
    <div id="header">HEADER</div>
    <div id="menu">MENU (side bar)</div>
    <div id="info">INFO (central pane)</div>

    <div id="footer">FOOTER</div>
    </div>
    </body>
    </html>
0 голосов
/ 05 мая 2009

Попробуйте следующий фрагмент CSS: 

display: table;
...