Kompx.com or Compmiscellanea.com

Горизонтальное выравнивание блока неизвестной ширины

Windows : Internet Explorer 5.5+ [ 1 ], Firefox 1.0+, Google Chrome, Opera 9.52+ [ 2 ], Safari 3.1+, SeaMonkey 1.0+ [ 3 ].

Linux : Firefox 1.0+, Chromium, Opera 9.52+ [ 4 ], SeaMonkey 1.0+ [ 5 ], NetSurf 3.0+.

Горизонтальное выравнивание блока неизвестной ширины, содержащего несколько строчных элементов. Блок выравнивается средствами CSS - [ Открыть страницу-пример ].

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

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

Это можно сделать разными способами и с использованием разных технологий: CSS, CSS + JavaScript, CSS + HTML (система с тегами <table></table>). Самый простой и надежный способ горизонтального выравнивания блока неизвестной ширины основан на использовании CSS.

Горизонтальное выравнивание блока неизвестной ширины:

1. Сначала, более простой случай, горизонтальное выравнивание блока с заголовком, состоящего из плавающих элементов: изображения и текст:

HTML / XHTML. Код:

<!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="ru" lang="ru">

<head>

<title>Горизонтальное выравнивание блока неизвестной ширины: 1</title>

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251" />

<link rel="stylesheet" type="text/css" href="css.css" />

</head>

<body>

<div class="box">

<span class="title-box">

<img src="snowflake.gif" width="37" height="34" alt="" class="title-imgs" />

<span class="title-text">Горизонтальное выравнивание блока неизвестной ширины</span>

<img src="snowflake.gif" width="37" height="34" alt="" class="title-imgs" />

</span>

</div>

</body>

</html>

CSS. Код:

html {height: 100%; margin: 0px;}

body {background-color: #ffffff; margin: 0px; height: 100%; text-align: center; font-family: 'Times New Roman', 'Liberation Serif', serif; font-size: 26px; color: #000066;}

.box {position: relative; left: 0px; top: 0px; height: auto; width: auto; text-align: center; border: solid #cccccc 1px;}

.title-box {position: relative; left: 0px; top: 0px; height: auto; width: auto; margin: auto; display: table; display: inline-block;}

.title-imgs {float: left;}

.title-text {float: left;}

Горизонтальное выравнивание блока неизвестной ширины: [ Результат ].

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

HTML / XHTML. Страница 1. Код:

<!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="ru" lang="ru">

<head>

<title>Горизонтальное выравнивание блока неизвестной ширины: 2. Страница 1</title>

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251" />

<link rel="stylesheet" type="text/css" href="cssfull.css" />

</head>

<body>

<div class="all">

<div class="content">

<div class="box">

<span class="title-box">

<img src="snowflake.gif" width="37" height="34" alt="" class="title-imgs" />

<span class="title-text"><a href="gorizontalnoe-vyravnivanie-bloka-neizvestnoj-shiriny.htm" class="title-textlink">Горизонтальное выравнивание блока неизвестной ширины</a></span>

<img src="snowflake.gif" width="37" height="34" alt="" class="title-imgs" />

</span>

</div>

<div class="content-text">

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

</div>

<div class="pagination-box">

<span class="pagination-box-all">

<span class="pagination-box-text">Страница:</span>

<span class="pagination-box-numbers-links-visited">1</span>

<span class="pagination-box-numbers"><a href="gorizontalnoe-vyravnivanie-bloka-neizvestnoj-shiriny-itogovyj-rezultat-2.htm" class="pagination-box-numberslinks">2</a></span>

<span class="pagination-box-numbers"><a href="gorizontalnoe-vyravnivanie-bloka-neizvestnoj-shiriny-itogovyj-rezultat-3.htm" class="pagination-box-numberslinks">3</a></span>

</span>

</div>

</div>

</div>

</body>

</html>

HTML / XHTML. Страница 2. Код:

<!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="ru" lang="ru">

<head>

<title>Горизонтальное выравнивание блока неизвестной ширины: 2. Страница 2</title>

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251" />

<link rel="stylesheet" type="text/css" href="cssfull.css" />

</head>

<body>

<div class="all">

<div class="content">

<div class="box">

<span class="title-box">

<img src="snowflake.gif" width="37" height="34" alt="" class="title-imgs" />

<span class="title-text"><a href="gorizontalnoe-vyravnivanie-bloka-neizvestnoj-shiriny.htm" class="title-textlink">Горизонтальное выравнивание блока неизвестной ширины</a></span>

<img src="snowflake.gif" width="37" height="34" alt="" class="title-imgs" />

</span>

</div>

<div class="content-text">

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

</div>

<div class="pagination-box">

<span class="pagination-box-all">

<span class="pagination-box-text">Страница:</span>

<span class="pagination-box-numbers"><a href="gorizontalnoe-vyravnivanie-bloka-neizvestnoj-shiriny-itogovyj-rezultat-1.htm" class="pagination-box-numberslinks">1</a></span>

<span class="pagination-box-numbers-links-visited">2</span>

<span class="pagination-box-numbers"><a href="gorizontalnoe-vyravnivanie-bloka-neizvestnoj-shiriny-itogovyj-rezultat-3.htm" class="pagination-box-numberslinks">3</a></span>

</span>

</div>

</div>

</div>

</body>

</html>

HTML / XHTML. Страница 3. Код:

<!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="ru" lang="ru">

<head>

<title>Горизонтальное выравнивание блока неизвестной ширины: 2. Страница 3</title>

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251" />

<link rel="stylesheet" type="text/css" href="cssfull.css" />

</head>

<body>

<div class="all">

<div class="content">

<div class="box">

<span class="title-box">

<img src="snowflake.gif" width="37" height="34" alt="" class="title-imgs" />

<span class="title-text"><a href="gorizontalnoe-vyravnivanie-bloka-neizvestnoj-shiriny.htm" class="title-textlink">Горизонтальное выравнивание блока неизвестной ширины</a></span>

<img src="snowflake.gif" width="37" height="34" alt="" class="title-imgs" />

</span>

</div>

<div class="content-text">

Это можно сделать разными способами и с использованием разных технологий: CSS, CSS + JavaScript, CSS + HTML (система с тегами &lt;table&gt;&lt;/table&gt;). Самый простой и надежный способ горизонтального выравнивания блока неизвестной ширины основан на использовании CSS.

</div>

<div class="pagination-box">

<span class="pagination-box-all">

<span class="pagination-box-text">Страница:</span>

<span class="pagination-box-numbers"><a href="gorizontalnoe-vyravnivanie-bloka-neizvestnoj-shiriny-itogovyj-rezultat-1.htm" class="pagination-box-numberslinks">1</a></span>

<span class="pagination-box-numbers"><a href="gorizontalnoe-vyravnivanie-bloka-neizvestnoj-shiriny-itogovyj-rezultat-2.htm" class="pagination-box-numberslinks">2</a></span>

<span class="pagination-box-numbers-links-visited">3</span>

</span>

</div>

</div>

</div>

</body>

</html>

CSS. Код:

html {height: 100%; margin: 0px;}

body {background-color: #ffffff; margin: 0px; height: 100%; text-align: center; font-family: 'Times New Roman', 'Liberation Serif', serif; font-size: 26px; color: #000066;}

.all {position: relative; left: 0px; top: 0px; height: auto; width: 100%; margin-top: 10px; padding-bottom: 10px; float: left; clear: both; background-color: #ffffff;}

.content {position: relative; top: 0px; left: 0px; width: 800px; height: auto; text-align: left; margin-left: auto; margin-right: auto; background-color: #ffffff; padding: 6px 15px 15px 15px;}

.box {position: relative; left: 0px; top: 0px; height: auto; width: auto; text-align: center; border-bottom: solid #ccc 1px; padding: 0 0 16px 0;}

.title-box {position: relative; left: 0px; top: 0px; height: auto; width: auto; margin: auto; display: table; display: inline-block;}

.title-imgs {float: left;}

.title-text {float: left;}

.content-text {position: relative; left: 0px; top: 0px; height: auto; width: auto; text-align: justify; margin: 20px 0 23px 0; font-family: 'Times New Roman', 'Liberation Serif', serif; font-size: 17px; color: #000000;}

.pagination-box {position: relative; left: 0px; top: 0px; height: auto; width: auto; text-align: center; border-top: solid #ccc 1px; padding: 16px 0 0 0;}

.pagination-box-all {position: relative; left: 0px; top: 0px; height: auto; width: auto; margin: auto; display: table; display: inline-block; line-height: 30px;}

.pagination-box-text {position: relative; left: 0px; top: 0px; height: auto; width: auto; float: left;}

.pagination-box-numbers {position: relative; left: 0px; top: 0px; height: auto; width: auto; float: left; margin: 0 5px 0 5px;}

.pagination-box-numbers-links-visited {position: relative; left: 0px; top: 0px; height: auto; width: auto; float: left; margin: 0 5px 0 5px; font-size: 30px; color: #cc0000; text-decoration: underline;}

a.title-textlink {font-family: 'Times New Roman', 'Liberation Serif', serif; font-size: 26px; color: #000033; text-decoration: none; float: left;}

a.title-textlink:visited {font-family: 'Times New Roman', 'Liberation Serif', serif; font-size: 26px; color: #000033; text-decoration: none; float: left;}

a.title-textlink:hover {font-family: 'Times New Roman', 'Liberation Serif', serif; font-size: 26px; color: #cc0000; text-decoration: none; float: left;}

a.title-textlink:active {font-family: 'Times New Roman', 'Liberation Serif', serif; font-size: 26px; color: #000033; text-decoration: none; float: left;}

a.pagination-box-numberslinks {font-family: 'Times New Roman', 'Liberation Serif', serif; font-size: 26px; color: #000033; text-decoration: none; float: left;}

a.pagination-box-numberslinks:visited {font-family: 'Times New Roman', 'Liberation Serif', serif; font-size: 26px; color: #000033; text-decoration: none; float: left;}

a.pagination-box-numberslinks:hover {font-family: 'Times New Roman', 'Liberation Serif', serif; font-size: 26px; color: #cc0000; text-decoration: underline; float: left;}

a.pagination-box-numberslinks:active {font-family: 'Times New Roman', 'Liberation Serif', serif; font-size: 26px; color: #000033; text-decoration: none; float: left;}

Горизонтальное выравнивание блока неизвестной ширины. Итоговый результат: [ Результат ] [ Cкачать в архиве ].


[ 1 ]

Частично Internet Explorer 4.01.

[ 2 ]

Просто центровка плавающих элементов работает в Opera 9.0+.

[ 3 ]

А так же Mozilla 1.7.1+, Netscape 7.2+. Частично Netscape Communicator 4.7 и Mozilla 1.0.

[ 4 ]

Просто центровка плавающих элементов работает в Opera 9.0+.

[ 5 ]

А так же Mozilla 1.7.1+, Netscape 7.2+. Более или менее Dillo 2.2.1+. Частично Netscape Communicator 4.7 и Mozilla 1.0.


Aliosque subditos et thema

 

Lynx. Извлечение данных из веб-страниц

 

Помимо просмотра / отображения веб-страниц, Lynx может выводить форматированный текст содержания веб-документа или его HTML источник на стандартный вывод. И это затем может быть обработано с помощью некоторых инструментов, имеющихся в Linux, таких как gawk, Perl, sed, grep, и т.д. Некоторые примеры: Работа с внешними ссылками Подсчитать количество внешних ссылок Lynx выводит список ссылок из содержимого веб-документа на стандартный вывод. Grep ищет только строки, начинающиеся с "http:", перенаправляет результат далее, опять для grep, который выбирает из них строки не начинающиеся с "http://compmiscellanea.com" and "http://www.compmiscellanea.com" (внешние ссылки веб-страницы), wc подсчитывает число извлеченных внешних ссылок и отображает его: lynx -dump -listonly "http://compmiscellanea.com/en/elinks.htm" | grep -o "http:.*" | grep -E -v "http://compmiscellanea.com|http://www.compmiscellanea.com" | wc -l Найти внешние ссылки и сохранить их в файл Lynx выводит список ссылок из содержимого веб-документа на стандартный вывод. Grep ищет только строки, начинающиеся с "http:", перенаправляет результат далее, опять для grep, который выбирает из них строки не начинающиеся с "http://compmiscellanea.com" and "http://www.compmiscellanea.com" (внешние ссылки веб-страницы) и сохраняет их в файл: lynx -dump -listonly "http://compmiscellanea.com/en/elinks.htm" | grep -o "http:.*" | grep -E -v "http://compmiscellanea.com|http://www.compmiscellanea.com" > file.txt Найти внешние ссылки, опустить повторяющиеся записи и сохранить результат в файл Lynx выводит список ссылок из содержимого веб-документа на стандартный вывод. Grep ищет только строки, начинающиеся с "http:", перенаправляет результат далее, опять для grep, который выбирает из них строки не начинающиеся с "http://compmiscellanea.com" and "http://www.compmiscellanea.com" (внешние ссылки веб-страницы), sort сортирует их, а uniq удаляет повторяющиеся записи. Результат сохраняется в файл: lynx -dump -listonly "http://compmiscellanea.com/en/elinks.htm" | grep -o "http:.*" | grep -E -v "http://compmiscellanea.com|http://www.compmiscellanea.com" | sort | uniq > file.txt Работа с внутренними ссылками Подсчитать количество внутренних ссылок Lynx выводит список ссылок из содержимого веб-документа на стандартный вывод. Grep ищет только строки, начинающиеся с "http://compmiscellanea.com" and "http://www.compmiscellanea.com" (внутренние ссылки), wc подсчитывает число извлеченных внутренних ссылок и отображает его: lynx -dump -listonly "http://compmiscellanea.com/en/elinks.htm" | grep -E -o "http://compmiscellanea.com.*|http://www.compmiscellanea.com.*" | wc -l Найти внутренние ссылки и сохранить их в файл Lynx выводит список ссылок из содержимого веб-документа на стандартный вывод. Grep ищет только строки, начинающиеся с "http://compmiscellanea.com" and "http://www.compmiscellanea.com" (внутренние ссылки) и сохраняет их в файл: lynx -dump -listonly "http://compmiscellanea.com/en/elinks.htm" | grep -E -o "http://compmiscellanea.com.*|http://www.compmiscellanea.com.*" > file.txt Найти внутренние ссылки, опустить повторяющиеся записи и сохранить результат в файл Lynx выводит список ссылок из содержимого веб-документа на стандартный вывод. Grep ищет только строки, начинающиеся с "http://compmiscellanea.com" and "http://www.compmiscellanea.com" (внутренние ссылки), sort сортирует их, а uniq удаляет повторяющиеся записи.

ELinks. Настройка

 

Перейти к страницам: ELinks - Текстовый, или консольный веб браузер. Описание: возможности, скриншоты, где скачать. ELinks. Использование - Как пользоваться браузером ELinks. Что можно делать с помощью ELinks и что нельзя, что может быть настроено, зависит от нескольких моментов. Самое распространенное, это возможности эмулятора терминала / консоли, в которых запускается ELinks и поддержка чего была выбрана в процессе компиляции исходного кода браузера. В некоторых операционных системах (Windows, например) проще и более надежно не подключать некоторые возможности. Далее обсуждается настройка ELinks 0.12pre2 из Package Database дистрибутива Zenwalk Linux (изначально основывался на Slackware, до сих пор сохраняя совместимость с его бинарными пакетами). Данный ELinks вполне типичный среди других версий этого браузера для Linux на настольных PC компьютерах. Пользовательский интерфейс версии ELinks для Windows и ELinks для Linux / некоторых других *nix систем сравнимых версий одинаков. Если ELinks был скомпилирован без какой-то функции или эмулятор терминала / консоль не поддерживает что-то, тогда будет просто невозможно выбрать эту возможность в процессе настройки; или возможно, но она не будет работать. Например, если ELinks скомпилирован без поддержки 256 цветов или консоль не может отображать их, то в меню будет возможно выбрать только 16 или "No colors (mono)". А в остальном ELinks будет работать не хуже. Все настройки ELinks могут быть сделаны через меню браузера - нет необходимости редактировать конфигурационные файлы. Даже если для некоторых тонких настроек все-таки может потребоваться редактирование файла ELinks.conf или даже файлов исходного кода - но это не слишком актуальный вопрос для обычного использования. Меню ELinks скрыто, когда браузер отображает веб-страницу: Чтобы получить доступ к меню, нажать Esc на клавиатуре: Настройки находятся в группе "Setup": 1 ) "Language" - выбрать язык пользовательского интерфейса ELinks. Возможно выбрать системный язык или какой-то другой. Операционная система и эмулятор терминала / консоль должны быть подготовлены для этих изменений - установлены и настроены соответствующие файлы локализации / интернационализации. Выбрать язык (English в данном примере): Что бы сохранить этот выбор, вновь нажать Esc, затем Setup, потом Save options, затем подтвердить, кликая на OK.