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

 

Переименовать папку в mc

 

Чтобы переименовать папку в mc / Midnight Commander: - Выбрать папку --> Shift - F6 --> Редактировать существующее имя папки в новое --> Enter Выбрать папку Редактировать имя папки Изначальный способ переименовать папку - тот способ, который имелся в mc / Midnight Commander до того, как было реализовано "Shift - F6" - тоже продолжает работать: - Выбрать папку --> F6 --> Ввести новое имя папки --> Enter Выбрать папку Ввести имя папки А вместо "F6" может использоваться "Esc - 6": - Выбрать папку --> Esc - 6 --> Ввести новое имя папки --> Enter Выбрать папку Ввести имя папки

Настройка сети в DOS с помощью Microsoft Network Client 3.0

 

Для установки Microsoft Network Client 3.0 и настройки сети в DOS, необходимо: 1. Microsoft Network Client 3.0 [ Скачать ] 2. NDIS 2.0 драйвер для сетевой карты Ethernet. Например: Realtek RTL8029AS [ Скачать ]. Другие можно попробовать найти, к примеру, на сайтах производителей сетевых адаптеров Ethernet 3. В случае, если будет использоваться не MS-DOS 6.0+, QEMM97 [ Скачать ] Установка Microsoft Network Client 3.0 и настройка сети в DOS по шагам: 1. Создать папку, например C:\DRIVERS\, куда поместить NDIS 2.0 драйвер для сетевого адаптера Ethernet. 2. Подготовить установочные дискеты Microsoft Network Client 3.0: DSK3-1.EXE -d A: DSK3-2.EXE -d A: 3. С первой дискеты запустить setup.exe и начать установку Microsoft Network Client 3.0 Начинается установка. Что бы продолжить: Enter Выбрать каталог, куда будет установлен Microsoft Network Client 3.0. Можно ввести свой вариант, а можно оставить как есть - в рассматриваемом примере оставлено как есть. Enter Microsoft Network Client 3.0 собирает сведения о системе. Выбрать драйвер для сетевой карты Ethernet. Если в списке не оказывается нужного драйвера, тогда выбрать "*Network adapter not shown on list below ..." Enter Этот диалог появляется, если в предложенном в предыдущем шаге установки списке драйверов для сетевой карты Ethernet не обнаруживается необходимого драйвера и выбирается "*Network adapter not shown on list below ...". Указать путь к папке, в которой находится нужный драйвер для сетевой карты Ethernet. В рассматриваемом примере, это C:\DRIVERS\, вводим. Enter Выбрать драйвер из указанной в предыдущем шаге папки C:\DRIVERS\. В рассматриваемом примере, это RTL8029AS PCI Ethernet Adapter. Enter Выбрать позволить или нет Microsoft Network Client 3.0 использовать больше памяти в процессе работы ради наилучших результатов. Можно выбрать любой вариант. Например, позволить - Enter Ввести имя пользователя длиной до 20 знаков для идентификации в рабочей группе в рамках сети. Можно использовать латиницу, цифры и указанные знаки. В рассматриваемом примере, это "net".