LinuxForum.Fans
Тема

Пару вопросов о верстке простой HTML-странички...

Автор: kirillov3798 17 сообщений 1838 просмотров
03.12.2014 11:17 · отредактировано #403739

Понадобилось сверстать несколько связанных HTML страничек. Простых, без особых красивостей. Верстаю при помощи таблиц и блоков. Стили задаю через CSS. В принципе ничего сложного нет, но возникли следующие вопросы:
1. Как сделать так, чтобы в ячейке таблицы, растянутой до самого конца (таблица из двух строк занимает все пространство окна, размеры всей таблицы задаются в процентах: 100% x 100%), в случае если не помещается содержимое, появлялся скроллинг? Как-то так:

Показать

Для наглядности еще в пример приведу сайт: http://twily.info/


2. Для того, чтобы вставить HTML-страничку внутрь другой HTML-странички я использовал js (jquery):

Показать
text
<html>
  <head>
    <script src="jquery.js"></script>
    <script>
    $(function(){
      $("#includedContent").load("b.html");
    });
    </script>
  </head>
  <body>
     <div id="includedContent"></div>
  </body>
</html>

Насколько это правильно?

03.12.2014 11:23 #403741

kirillov3798, а если попробовать с iframe?

03.12.2014 11:25 #403742

Rizado, пробовал. Фреймы не подходят.

03.12.2014 12:23 · отредактировано #403752

Я бы предложил разместить ваши странички на github, чтобы можно было посмотреть, что не работает.
Но совсем недавно, наше замечательное руководство создало некоторые трудности для программистов.

А так я попробовал ваш jquery и вставил текст.
Скроллинг работает.


==================
Upd: GitHub у меня то работает, то не работает.

03.12.2014 12:26 #403754

1. overflow-y: auto

03.12.2014 14:27 #403789

1000Mhz, думаете все так просто?

03.12.2014 14:28 · отредактировано #403790
"Marley" написал:
Скроллинг работает.

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

03.12.2014 17:43 #403828
"Marley" написал:
Я бы предложил разместить ваши странички на github

Не вижу смысла, да и GitHub у меня не работает. Да и выкладывать нет смысла. Пока только идут эксперименты со скроллингом. Все безуспешно.

03.12.2014 18:05 #403832
"kirillov3798" написал:
Для наглядности еще в пример приведу сайт: http://twily.info/

А почему бы не посмотреть исходный код элемента ?
Это <div> со свойством overflow-y

03.12.2014 18:11 #403833

sun, в том-то и фишка. Смотрел, пытался. Ничего не получается. Все разъезжается.

03.12.2014 18:18 · отредактировано #403834

Вот:

Показать
HTML документ:
text
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ваша удивительная Веб-страница, созданная срд, 26 ноя 2014 г., 12:24</title>
    <link rel="stylesheet" href="template.css">
    <script src="jquery.js"></script> 
    <script> 
      $(function(){
        $("#includedContent").load("b.html"); 
      });
    </script> 
  </head>
  <body>
    <table id="t_main">
      <tr>
        <td><div id="includedContent"></div>что-то тут</td>
      </tr>
      <tr>
        <td>
          <div id="t_info">
            <table>
              <tr>
                <td>ся быстрее при последующих вызовах. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызываетрвой загрузке, и скрипт вызывается быстрее при последующих вызовах. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах
                ся быстрее при последующих вызовах. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызываетрвой загрузке, и скрипт вызывается быстрее при последующих вызовах. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах
                ся быстрее при последующих вызовах. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызываетрвой загрузке, и скрипт вызывается быстрее при последующих вызовах. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовахся быстрее при последующих вызовах. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызываетрвой загрузке, и скрипт вызывается быстрее при последующих вызовах. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах.
                ся быстрее при последующих вызовах. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызываетрвой загрузке, и скрипт вызывается быстрее при последующих вызовах. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах
                ся быстрее при последующих вызовах. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызываетрвой загрузке, и скрипт вызывается быстрее при последующих вызовах. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах
                ся быстрее при последующих вызовах. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызываетрвой загрузке, и скрипт вызывается быстрее при последующих вызовах. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах
                ся быстрее при последующих вызовах. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызываетрвой загрузке, и скрипт вызывается быстрее при последующих вызовах. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах</td>
              </tr>
            </table>
          </div>
    </td>
      </tr>
    </table>
  </body>
</html>

CSS к нему:

text
html, body {
  width: 100%; height: 100%;
}
#t_main {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#t_info {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}

03.12.2014 18:30 #403837

Высота в процентах, нда.. Уж если так нужны относительные величины, то можно взять 'em' например.

03.12.2014 18:33 · отредактировано #403839
"1000Mhz" написал:
Высота в процентах

А что не так? Мониторы разные бывают и прибивать гвоздями нельзя.

03.12.2014 18:39 #403841
"kirillov3798" написал:
А что не так?

Мне не нравится :) В частности не нравится задание и ширины и высоты элемента одновременно, и табличная верстка- в целом.

03.12.2014 21:06 · отредактировано #403870
kirillov3798 написал:
[quote="Marley"]Я бы предложил разместить ваши странички на github

Не вижу смысла, да и GitHub у меня не работает. Да и выкладывать нет смысла. Пока только идут эксперименты со скроллингом. Все безуспешно.[/quote]

Как нет смысла?
Пара кликов и весь код уже у меня. И не нужно искать jquery библиотеку самому, заполнять содержимое b.html, не говоря уже о главном html и css.

Еще пару кликов (уже после правок) и исправленный код уже у вас.

04.12.2014 00:50 #403884
"kirillov3798" написал:
появлялся скроллинг

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

"sun" написал:
Это <div> со свойством overflow-y

Как вариант. И, кстати, лучший.

"kirillov3798" написал:
чтобы вставить HTML-страничку внутрь другой HTML-странички я использовал js (jquery)

Худшее, что Вы могли придумать. Примерно приварить одну лестницу внутри другой.

04.12.2014 10:25 · отредактировано #403907
"stranger" написал:
Худшее, что Вы могли придумать. Примерно приварить одну лестницу внутри другой.

А есть какие-то другие варианты?

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

Я вот тоже подумываю от таблицы отказаться...

Войдите или зарегистрируйтесь, чтобы ответить.