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

 

Веб браузеры для DOS

 

Arachne : Dillo : DOSLYNX : Lynx : Links : ELinks Имеющиеся веб браузеры для DOS можно разделить на две условные категории. Веб браузеры, которые могут быть без сложностей установлены + стабильно работать в рамках своих возможностей. И прочие веб браузеры, чья функциональность в большей или меньшей степени ограничена или проблемна. Основные веб браузеры для DOS включают в себя приложения с графическим пользовательским интерфейсом и текстовые браузеры. Графическими веб браузерами для DOS являются разные версии Arachne - GPL версия, версия от Arachne Labs, версия Ray Andrews - и Dillo. А так же, созданный на основе Arachne DR-WebSpyder, чьим развитием является Lineo Embrowser. Текстовые браузеры для DOS несколько более многочисленны: DOSLYNX, lynx, links, elinks. Графические веб браузеры для DOS хоть и выделяются большей функциональностью среди браузеров для DOS, однако сильно уступают по своим возможностям основным веб браузерам для Windows, Linux или Mac OS X из-за ограничений, заложенных в природе DOS, ограниченного круга пользователей и разработчиков, по некоторым другим причинам.

Imapsync. Перенос почты

 

Перенос почты c одного IMAP сервера на другой с помощью imapsync [ 1 ] / Linux, командная строка: imapsync --host1 imap.this.com --user1 email@example.com --passfile1 /home/user/imap/passwordfile1 --ssl1 --host2 imap.another.com --user2 email@example.com --passfile2 /home/user/imap/passwordfile2 --ssl2 --skipsize --allowsizemismatch - Имеется сайт example.com и почтовый ящик email@example.com на сервере некоей хостинговой компании. IMAP сервер: imap.this.com. IMAP сервер поддерживает SSL. - Осуществляется перенос сайта example.com к другому хостеру. Соответственно, и почтового ящика email@example.com со всем его содержимым и с сохранением структуры папок. IMAP сервер другого хостинг-провайдера: imap.another.com. IMAP сервер поддерживает SSL. 1. Создать почтовый ящик email@example.com и пароль к нему на сервере той хостинговой компании, куда происходит перенос. 2. Создать два текстовых файла в папке /home/user/imap/: passwordfile1 с паролем к почтовому ящику на первом IMAP сервере и passwordfile2 с паролем к почтовому ящику на втором IMAP сервере. 3. chmod 600 /home/user/imap/passwordfile1 4. chmod 600 /home/user/imap/passwordfile2 5. Установить imapsync 6. Запустить imapsync с соответствующими параметрами и данными Imapsync переносит почту с сохранением структуры папок с imap.this.com на imap.another.com. SSL используется для шифрования данных в процессе передачи, а пароли сохранены в файлах, защищенных установкой прав доступа chmod 600. Перенос почты между двумя сервисами электронной почты может потребовать использования дополнительных параметров [ 2 ] imapsync. Например, при переносе содержимого одного почтового ящика Gmail.com на другой необходимо указать "--port1" и "--port2": imapsync --host1 imap.gmail.com --port1 993 --user1 email1@gmail.com --passfile1 /home/user/imap/passwordfile1 --ssl1 --host2 imap.gmail.com --port2 993 --user2 email2@gmail.com --passfile2 /home/user/imap/passwordfile2 --ssl2 --skipsize --allowsizemismatch [ 1 ] Простой и обычный случай: содержимое одного электронного почтового ящика переносится на другой - пустой, находящийся на другом сервере. Но могут быть и более сложные ситуации: Gmail to Google Apps Email Migration and Moving to Google Apps with imapsync. [ 2 ] Другие параметры: Migrate mail from one server to another with imapsync and imapsync(1) - Linux man page.