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

 

Распаковать несколько архивов

 

Распаковать с помощью unzip в командной строке Linux несколько zip-архивов в один каталог. Вопреки возможным ожиданиям, "unzip *.zip" работать не будет, *.zip необходимо взять в кавычки: unzip "*.zip" В архивах могут быть файлы с одинаковыми именами. Чтобы избежать перезаписи: unzip -B "*.zip" "Unzip -B" в процессе распаковки перезаписывает файлы с одинаковыми именами, но сохраняет их резервные копии. Новые имена для этих файлов создаются добавлением тильды ("~") в конец изначальных названий файлов. Если имеется расширение, то "~" добавляется после него. Если этого недостаточно, после тильды ("~") прибавляется уникальная последовательность цифр (до 5 знаков). "Unzip -B" не слишком рабочее решение. Например, поскольку диапазон последовательностей цифр может израсходоваться (99999 знаков, или 65535 для 16-битных систем), резервный файл с максимальным числом диапазона после "~" в названии стирается и замещается без уведомления новой резервной копией ( Более подробно ). Число файлов в архиве может быть не всегда известно заранее или оно может быть больше диапазона доступных чисел, так что "Unzip -B" не лучший вариант. Переименование файлов с одинаковыми именами с помощью добавления "~" в конце имен, после расширения тоже не слишком удобно. Но другой встроенный вариант еще хуже. Если модификатор "-B" не используется, то каждый раз, как распаковывается файл с таким же именем как уже был извлечен, unzip спрашивает "replace example.txt? [y]es, [n]o, [A]ll, [N]one, [r]ename:" ("заместить example.txt? да, нет, все, ни один, переименовать:"). Каждый раз нужно нажимать на "r" и каждый раз вводить новое имя. Так что для решения проблемы вероятно следует создать и использовать какой-то скрипт, bash или иной.

Границы HTML таблиц без CSS

 

Пример n.1:   Границы HTML таблиц без CSS   cellspacing="2"   bgcolor="#ff6600" HTML / XHTML. Код: <table width="100%" cellspacing="2" cellpadding="0" border="0" align="center" bgcolor="#ff6600"> <tr bgcolor="#ffffff"> <td width="33%" height="67">&nbsp;</td> <td width="34%">Границы HTML таблиц без CSS</td> <td width="33%">&nbsp;</td> </tr> <tr bgcolor="#ffffff"> <td height="67">cellspacing="2"</td> <td>&nbsp;</td> <td>bgcolor="#ff6600"</td> </tr> </table> Пример n.2:   Границы HTML таблиц без CSS   cellspacing="8"   bgcolor="#999999" HTML / XHTML. Код: <table width="100%" cellspacing="8" cellpadding="0" border="0" align="center" bgcolor="#999999"> <tr bgcolor="#ffffff"> <td width="33%" height="67">&nbsp;</td> <td width="34%">Границы HTML таблиц без CSS</td> <td width="33%">&nbsp;</td> </tr> <tr bgcolor="#ffffff"> <td height="67">cellspacing="8"</td> <td>&nbsp;</td> <td>bgcolor="#999999"</td> </tr> </table> Пример n.3 - для Netscape 3.04-6.0, Mozilla 0.6-0.92 и Arachne.