Kompx.com or Compmiscellanea.com

Выравнивание по центру с помощью JavaScript и CSS

Windows : Internet Explorer 6.0+, Firefox 1.0+, Google Chrome, Opera 9.0+ [ 1 ], Safari 3.1+, SeaMonkey 1.0+.

Linux : Firefox 1.0+, Chromium, Opera 9.0+ [ 2 ], SeaMonkey 1.0+.

Выравнивание содержимого страницы по центру, по ширине и по высоте с помощью JavaScript и CSS. По центру выравнивается контейнер, в котором находится всё содержимое веб-страницы. Два случая:

1. Контейнер выравнивается по центру, если разрешение экрана монитора равно или больше 1024x768 - [ Открыть страницу-пример ]

2. Контейнер выравнивается по центру, если разрешение экрана монитора равно или больше 1024x768 + курсор мыши наводится на ссылку в одном из элементов содержимого страницы - [ Открыть страницу-пример ]

Выравнивание по центру, по ширине и по высоте с помощью JavaScript и CSS. Случай первый. По шагам.

1. Создается страница, чьей частью будет элемент, который будет выравниваться по центру, по ширине и по высоте с помощью JavaScript и CSS:

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>Выравнивание по центру с помощью JavaScript и CSS. Первый случай. Шаг 1</title>

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

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

</head>

<body>

 

</body>

</html>

CSS. Код:

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

body {background-color: #ffffff; margin: 0px; height: 100%;}

2. В теле данной страницы создается элемент A (серый цвет) блочного уровня c явно указанными размерами, например, 800 на 500 пикселов и относительным позиционированием. [ Результат ].

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>Выравнивание по центру с помощью JavaScript и CSS. Первый случай. Шаг 2</title>

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

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

</head>

<body>

<div class="element_A">&nbsp;</div>

</body>

</html>

CSS. Код:

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

body {background-color: #ffffff; margin: 0px; height: 100%;}

.element_A {position: relative; top: 0px; left: 0px; width: 800px; height: 500px; background-color: #999999;}

3. Создается внешний JavaScript файл ( JavaScript код файла c построчными комментариями и разъяснениями ), который занимается определением технических характеристик браузера и дисплея пользователя, и при заданном условии (разрешении экрана монитора равного или больше 1024x768), производит необходимые манипуляции, что бы добиться выравнивания элемента A по центру, по ширине и по высоте. Между тегами <head></head> HTML файла прописывается ссылка на этот внешний JavaScript файл. [ Результат ]

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>Выравнивание по центру с помощью JavaScript и CSS. Первый случай. Шаг 3</title>

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

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

<script type="text/javascript" src="3.js"></script>

</head>

<body>

<div class="element_A" id="element_A">&nbsp;</div>

</body>

</html>

CSS. Код:

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

body {background-color: #ffffff; margin: 0px; height: 100%;}

.element_A {position: relative; top: 0px; left: 0px; width: 800px; height: 500px; background-color: #999999;}

JavaScript. Код:

var wresolution=screen.width;

var hresolution=screen.height;

function centering(){

if(wresolution>=1024 && hresolution>=768){

if(window.getComputedStyle){

var h=document.documentElement.clientHeight;

var w=document.documentElement.clientWidth;

var element_A = window.getComputedStyle(document.getElementById('element_A'), '');

var element_A_width=parseInt(element_A.getPropertyValue('width'));

var element_A_height=parseInt(element_A.getPropertyValue('height'));

document.getElementById('element_A').style.left=(w-element_A_width)/2+'px';

document.getElementById('element_A').style.top=(h-element_A_height)/2+'px';

}

else{

var h2=document.documentElement.clientHeight;

var w2=document.documentElement.clientWidth;

var element_A=document.getElementById('element_A');

var element_A_width=parseInt(element_A.currentStyle.width);

var element_A_height=parseInt(element_A.currentStyle.height);

document.getElementById('element_A').style.left=(w2-element_A_width)/2+'px';

document.getElementById('element_A').style.top=(h2-element_A_height)/2+'px';

};

window.onresize=centering;

};

};

window.onload=centering;

Страница примера выравнивания по центру с помощью JavaScript и CSS, итоговый результат [ Результат ] [ Cкачать в архиве ].

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>Выравнивание по центру с помощью JavaScript и CSS. Первый случай. Итоговый результат</title>

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

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

<script type="text/javascript" src="javascript-css-vyravnivanie.js"></script>

</head>

<body>

<div class="element_A" id="element_A">

<div class="box">

<div class="site"><span class="sitecontent"><a href="http://www.compmiscellanea.com/" class="sitelink">compmiscellanea.com</a></span></div>

<h1><span class="title"><span class="titlecontent"><a href="vyravnivanie-po-centru-javascript-css.htm" class="titlelink">Выравнивание по центру с помощью JavaScript и CSS</a></span></span></h1>

</div>

</div>

</body>

</html>

CSS. Код:

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

body {background-color: #ffffff; margin: 0px; height: 100%;}

.element_A {position: relative; top: 0px; left: 0px; width: 800px; height: 500px; background-color: #999999;}

/*---------------- Содержимое элемента A ----------------*/

h1 {font-weight: normal; margin: 0px; float: left; font-family: "Times New Roman", "Liberation Serif", serif; font-size: 25px; color: #ffffff;}

.box {position: relative; top: 0px; left: 45px; width: 708px; height: 408px; float: left; border: 1px solid #ffffff; margin-top: 45px;}

.site {position: relative; top: 0px; left: 0px; width: 708px; height: auto; float: left; margin-top: 152px; text-align: center;}

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

.title {position: relative; top: 0px; left: 0px; width: 708px; height: auto; float: left; text-align: center;}

.titlecontent {position: relative; top: 0px; left: 0px; width: auto; height: auto; margin: auto; display: table; display: inline-block; text-align: left; word-spacing: 2px;}

a.sitelink:link {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 48px; color: #000000; font-weight: normal; text-decoration: none; text-transform: uppercase; float: left;}

a.sitelink:visited {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 48px; color: #000000; font-weight: normal; text-decoration: none; text-transform: uppercase; float: left;}

a.sitelink:hover {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 48px; color: #cc0000; font-weight: normal; text-decoration: none; text-transform: uppercase; float: left;}

a.sitelink:active {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 48px; color: #000000; font-weight: normal; text-decoration: none; text-transform: uppercase; float: left;}

a.titlelink:link {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 25px; color: #ffffff; font-weight: normal; text-decoration: none; float: left;}

a.titlelink:visited {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 25px; color: #ffffff; font-weight: normal; text-decoration: none; float: left;}

a.titlelink:hover {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 25px; color: #cc0000; font-weight: normal; text-decoration: none; float: left;}

a.titlelink:active {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 25px; color: #ffffff; font-weight: normal; text-decoration: none; float: left;}

/*---------------- Содержимое элемента A ----------------*/

JavaScript. Код:

var wresolution=screen.width;

var hresolution=screen.height;

function centering(){

if(wresolution>=1024 && hresolution>=768){

if(window.getComputedStyle){

var h=document.documentElement.clientHeight;

var w=document.documentElement.clientWidth;

var element_A = window.getComputedStyle(document.getElementById('element_A'), '');

var element_A_width=parseInt(element_A.getPropertyValue('width'));

var element_A_height=parseInt(element_A.getPropertyValue('height'));

document.getElementById('element_A').style.left=(w-element_A_width)/2+'px';

document.getElementById('element_A').style.top=(h-element_A_height)/2+'px';

}

else{

var h2=document.documentElement.clientHeight;

var w2=document.documentElement.clientWidth;

var element_A=document.getElementById('element_A');

var element_A_width=parseInt(element_A.currentStyle.width);

var element_A_height=parseInt(element_A.currentStyle.height);

document.getElementById('element_A').style.left=(w2-element_A_width)/2+'px';

document.getElementById('element_A').style.top=(h2-element_A_height)/2+'px';

};

window.onresize=centering;

};

};

window.onload=centering;

Выравнивание по центру, по ширине и по высоте с помощью JavaScript и CSS. Случай второй. По шагам.

1. Создается страница, чьей частью будет элемент, который будет выравниваться по центру, по ширине и по высоте с помощью JavaScript и CSS:

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>Выравнивание по центру с помощью JavaScript и CSS. Второй случай. Шаг 1</title>

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

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

</head>

<body>

 

</body>

</html>

CSS. Код:

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

body {background-color: #ffffff; margin: 0px; height: 100%;}

2. В теле данной страницы создается элемент A (серый цвет) блочного уровня c явно указанными размерами, например, 800 на 500 пикселов и относительным позиционированием. [ Результат ]

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>Выравнивание по центру с помощью JavaScript и CSS. Второй случай. Шаг 2</title>

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

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

</head>

<body>

<div class="element_A">&nbsp;</div>

</body>

</html>

CSS. Код:

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

body {background-color: #ffffff; margin: 0px; height: 100%;}

.element_A {position: relative; top: 0px; left: 0px; width: 800px; height: 500px; background-color: #999999;}

3. Создается внешний JavaScript файл ( JavaScript код файла c построчными комментариями и разъяснениями ), который занимается определением технических характеристик браузера и дисплея пользователя, и при заданном условии (разрешении экрана монитора равного или больше 1024x768) + заданном действии (наведении курсора мыши на ссылку в элементе A), производит необходимые манипуляции, что бы добиться выравнивания элемента A по центру, по ширине и по высоте. Между тегами <head></head> HTML файла прописывается ссылка на этот внешний JavaScript файл. В элементе A ссылка с обработчиком событий onMouseOver, в котором название соответствующего скрипта. [ Результат ]

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>Выравнивание по центру с помощью JavaScript и CSS. Второй случай. Шаг 3</title>

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

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

<script type="text/javascript" src="3.js"></script>

</head>

<body>

<div class="element_A" id="element_A">

<a href="vyravnivanie-po-centru-javascript-css.htm" class="link" onmouseover="centering();">Выравнивание по центру с помощью JavaScript и CSS</a>

</div>

</body>

</html>

CSS. Код:

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

body {background-color: #ffffff; margin: 0px; height: 100%;}

.element_A {position: relative; top: 0px; left: 0px; width: 800px; height: 500px; background-color: #999999; text-align: center;}

a.link:link {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 33px; color: #ffffff; font-weight: normal; text-decoration: none; position: relative; top: 44%;}

a.link:visited {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 33px; color: #ffffff; font-weight: normal; text-decoration: none; position: relative; top: 44%;}

a.link:hover {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 33px; color: #cc0000; font-weight: normal; text-decoration: none; position: relative; top: 44%;}

a.link:active {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 33px; color: #ffffff; font-weight: normal; text-decoration: none; position: relative; top: 44%;}

JavaScript. Код:

var wresolution=screen.width;

var hresolution=screen.height;

function centering(){

if(wresolution>=1024 && hresolution>=768){

if(window.getComputedStyle){

var h=document.documentElement.clientHeight;

var w=document.documentElement.clientWidth;

var element_A = window.getComputedStyle(document.getElementById('element_A'), '');

var element_A_width=parseInt(element_A.getPropertyValue('width'));

var element_A_height=parseInt(element_A.getPropertyValue('height'));

document.getElementById('element_A').style.left=(w-element_A_width)/2+'px';

document.getElementById('element_A').style.top=(h-element_A_height)/2+'px';

}

else{

var h2=document.documentElement.clientHeight;

var w2=document.documentElement.clientWidth;

var element_A=document.getElementById('element_A');

var element_A_width=parseInt(element_A.currentStyle.width);

var element_A_height=parseInt(element_A.currentStyle.height);

document.getElementById('element_A').style.left=(w2-element_A_width)/2+'px';

document.getElementById('element_A').style.top=(h2-element_A_height)/2+'px';

};

window.onresize=centering;

};

};

Страница примера выравнивания по центру с помощью JavaScript и CSS, итоговый результат [ Результат ] [ Cкачать в архиве ].

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>Выравнивание по центру с помощью JavaScript и CSS. Второй случай. Итоговый результат</title>

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

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

<script type="text/javascript" src="javascript-css-vyravnivanie.js"></script>

</head>

<body>

<div class="element_A" id="element_A">

<div class="box">

<div class="site"><span class="sitecontent"><a href="http://www.compmiscellanea.com/" class="sitelink">compmiscellanea.com</a></span></div>

<h1><span class="title"><span class="titlecontent"><a href="vyravnivanie-po-centru-javascript-css.htm" class="titlelink" onmouseover="centering();" >Выравнивание по центру с помощью JavaScript и CSS</a></span></span></h1>

</div>

</div>

</body>

</html>

CSS. Код:

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

body {background-color: #ffffff; margin: 0px; height: 100%;}

.element_A {position: relative; top: 0px; left: 0px; width: 800px; height: 500px; background-color: #999999;}

/*---------------- Содержимое элемента A ----------------*/

h1 {font-weight: normal; margin: 0px; float: left; font-family: "Times New Roman", "Liberation Serif", serif; font-size: 25px; color: #ffffff;}

.box {position: relative; top: 0px; left: 45px; width: 708px; height: 408px; float: left; border: 1px solid #ffffff; margin-top: 45px;}

.site {position: relative; top: 0px; left: 0px; width: 708px; height: auto; float: left; margin-top: 152px; text-align: center;}

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

.title {position: relative; top: 0px; left: 0px; width: 708px; height: auto; float: left; text-align: center;}

.titlecontent {position: relative; top: 0px; left: 0px; width: auto; height: auto; margin: auto; display: table; display: inline-block; text-align: left; word-spacing: 2px;}

a.sitelink:link {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 48px; color: #000000; font-weight: normal; text-decoration: none; text-transform: uppercase; float: left;}

a.sitelink:visited {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 48px; color: #000000; font-weight: normal; text-decoration: none; text-transform: uppercase; float: left;}

a.sitelink:hover {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 48px; color: #cc0000; font-weight: normal; text-decoration: none; text-transform: uppercase; float: left;}

a.sitelink:active {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 48px; color: #000000; font-weight: normal; text-decoration: none; text-transform: uppercase; float: left;}

a.titlelink:link {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 25px; color: #ffffff; font-weight: normal; text-decoration: none; float: left;}

a.titlelink:visited {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 25px; color: #ffffff; font-weight: normal; text-decoration: none; float: left;}

a.titlelink:hover {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 25px; color: #cc0000; font-weight: normal; text-decoration: none; float: left;}

a.titlelink:active {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 25px; color: #ffffff; font-weight: normal; text-decoration: none; float: left;}

/*---------------- Содержимое элемента A ----------------*/

JavaScript. Код:

var wresolution=screen.width;

var hresolution=screen.height;

function centering(){

if(wresolution>=1024 && hresolution>=768){

if(window.getComputedStyle){

var h=document.documentElement.clientHeight;

var w=document.documentElement.clientWidth;

var element_A = window.getComputedStyle(document.getElementById('element_A'), '');

var element_A_width=parseInt(element_A.getPropertyValue('width'));

var element_A_height=parseInt(element_A.getPropertyValue('height'));

document.getElementById('element_A').style.left=(w-element_A_width)/2+'px';

document.getElementById('element_A').style.top=(h-element_A_height)/2+'px';

}

else{

var h2=document.documentElement.clientHeight;

var w2=document.documentElement.clientWidth;

var element_A=document.getElementById('element_A');

var element_A_width=parseInt(element_A.currentStyle.width);

var element_A_height=parseInt(element_A.currentStyle.height);

document.getElementById('element_A').style.left=(w2-element_A_width)/2+'px';

document.getElementById('element_A').style.top=(h2-element_A_height)/2+'px';

};

window.onresize=centering;

};

};

Выравнивание по центру, по ширине и по высоте с помощью JavaScript и CSS

Использование этого способа для простых случаев, когда требуется только задать какое-то неизменное позиционирование объекта - не имеет смысла. Это вполне возможно сделать, но просто задать элементу некое статичное положение в видимой области окна браузера проще и надежней через выравнивание по центру с помощью CSS. А вот когда необходимо, что бы выравнивание по центру, по ширине и по высоте происходило только при каких-то условиях или после какого-то действия, то тогда использование способа выравнивание по центру, по ширине и по высоте с помощью JavaScript и CSS становится необходимым. Вместо JavaScript можно использовать VBscript или Java, но JavaScript и его вариант JScript работает на гораздо большем количестве платформ и программного обеспечения, чем VBscript и проще в реализации, чем вариант с Java.

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

Поскольку случай, когда скрипт для выравнивания по центру, по ширине и по высоте выбирает какой внешний файл стилевых описаний загружать требует определенной дополнительной подготовки HTML и CSS кода, то он здесь не рассматривается - как менее чистый и явный пример возможностей использования JavaScript для манипуляции позиционированием объектов через прямую манипуляцию свойствами CSS этих объектов.

Рассматривается самый простой случай - для демонстрации самой возможности и ее принципа - динамического изменения положения элемента в видимой области окна браузера.

Первый случай

Условие: если разрешение экрана монитора равно или больше 1024 на 768 пикселов, то тогда выровнять содержимое страницы по ширине и высоте

Создается элемент A с указанными в явном виде шириной и высотой. Определяется разрешение экрана монитора - некое заданное значение которого будет служить условием, при котором будет срабатывать скрипт, например - 1024x768. В случае, если скрипт обнаруживает, что разрешение экрана монитора равно или больше 1024 на 768 пикселов, то запускается остальная часть функции, которая выясняет размеры (заданные во внешнем файле стилевых описания CSS свойства) элемента A, ширину и высоту видимой области окна браузера. С использованием полученных чисел вычисляется на каком расстоянии от левого и верхнего края видимой области окна браузера должен находиться левый и верхний край элемента A, что бы элемент A был выровнен по центру, по ширине и по высоте. В смысле чисел и CSS, это когда CSS свойство "left" элемента A равно половине разницы между шириной видимой области окна браузера и шириной элемент A, а CSS свойство "top" элемента A равно половине разницы между высотой видимой области окна браузера и высотой элемент A.

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

Второй случай

Условие: если разрешение экрана монитора равно или больше 1024 на 768 пикселов и если курсор мыши наводится на ссылку в элементе A, то тогда выровнять содержимое страницы по ширине и высоте

Создается элемент A с указанными в явном виде шириной и высотой. В элементе A ссылка с обработчиком событий onMouseOver с соответствующим скриптом. Определяется разрешение экрана монитора - некое заданное значение которого будет служить условием, при котором будет срабатывать скрипт, например - 1024x768. При наведении курсора мыши на ссылку, если разрешение экрана монитора равно или больше 1024 на 768 пикселов, срабатывает скрипт, который определяет размеры (заданные во внешнем файле стилевых описания CSS свойства) элемента A, ширину и высоту видимой области окна браузера. С помощью полученных чисел вычисляется на каком расстоянии от левого и верхнего края видимой области окна браузера должен находиться левый и верхний край элемента A, что бы элемент A был выровнен по центру, по ширине и по высоте. В смысле чисел и CSS, это когда CSS свойство "left" элемента A равно половине разницы между шириной видимой области окна браузера и шириной элемент A, а CSS свойство "top" элемента A равно половине разницы между высотой видимой области окна браузера и высотой элемент A.

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


[ 1 ]

В принципе, работает начиная и с Opera 7.5, но с ошибками на некоторое количество пикселов.

[ 2 ]

В принципе, работает начиная и с Opera 7.5, но с ошибками на некоторое количество пикселов.


Aliosque subditos et thema

 

Браузер lynx. Создание sitemap.xml

 

Существует немало онлайн сервисов для создания sitemap.xml. Однако его можно сделать и самому на своем компьютере, используя браузер lynx и несколько утилит командной строки Linux. Далее описывается пример использующего их bash-скрипта, названного "sitemap.sh". Bash-скрипт, который создает файл sitemap.xml: #!/bin/bash cd /home/me/sitemap/www/ lynx -crawl -traversal -accept_all_cookies -connect_timeout=30 http://www.compmiscellanea.com/ > /dev/null cd /home/me/sitemap/www2/ lynx -crawl -traversal -accept_all_cookies -connect_timeout=30 http://compmiscellanea.com/ > /dev/null cat /home/me/sitemap/www2/traverse.dat >> /home/me/sitemap/www/traverse.dat cat /home/me/sitemap/www/traverse.dat | sed -e 's/\<www\>\.//g' | sort | uniq > /home/me/sitemap/sitemap/sitemap.xml sed -i 's/\&/\&amp\;/g' /home/me/sitemap/sitemap/sitemap.xml sed -i "s/'/\&apos\;/g" /home/me/sitemap/sitemap/sitemap.xml sed -i 's/"/\&quot\;/g' /home/me/sitemap/sitemap/sitemap.xml sed -i 's/>/\&gt\;/g' /home/me/sitemap/sitemap/sitemap.xml sed -i 's/</\&lt\;/g' /home/me/sitemap/sitemap/sitemap.xml sed -i 's/http:\/\//http:\/\/www\./g' /home/me/sitemap/sitemap/sitemap.xml sed -i -e 's/^/<url><loc>/' /home/me/sitemap/sitemap/sitemap.xml sed -i -e 's/$/<\/loc><\/url>/' /home/me/sitemap/sitemap/sitemap.xml sed -i -e '1 i <?xml version="1\.0" encoding="UTF-8"?>\r\r<urlset xmlns="http:\/\/www\.sitemaps\.org\/schemas\/sitemap\/0\.9" xmlns:xsi="http:\/\/www\.w3\.org\/2001\/XMLSchema-instance" xsi:schemaLocation="http:\/\/www\.sitemaps\.org\/schemas\/sitemap\/0\.9 http:\/\/www\.sitemaps\.org\/schemas\/sitemap\/0\.9\/sitemap\.xsd">\r\r<!-- created by sitemap.sh from http:\/\/www.compmiscellanea.com\/en\/lynx-browser-creating-sitemap.xml\.htm -->\r\r' /home/me/sitemap/sitemap/sitemap.xml sed -i -e '$ a \\r</urlset>' /home/me/sitemap/sitemap/sitemap.xml sed -i '/static/d' /home/me/sitemap/sitemap/sitemap.xml echo "...Done" После того, как файл с bash-скриптом готов: "chmod +x sitemap.sh", что бы сделать его исполняемым. Скачать sitemap.sh в архиве sitemap.sh.tar.gz ( После того, как архив загружен и распакован, в файле заменить http://www.compmiscellanea.com/ на нужное доменное имя сайта с "www" и заменить http://compmiscellanea.com/ на нужное доменное имя сайта без "www". Вместо "static" в последней строке файла поставить строку, которую должны содержать ссылки, что бы они были удалены из списка. Затем "chmod +x sitemap.sh". Затем запустить sitemap.sh ). Комментарии Скачать sitemap2.sh с построчными комментариями в архиве sitemap2.sh.tar.gz. Перед тем, как запустить bash-скрипт, нужно создать три папки. Так как браузер lynx в каких-то случаях может пропустить некоторые ссылки, если доменное имя сайта будет указано с или без "www", то bash-скрипт запускает lynx дважды, обрабатывая сайт по доменному имени с "www" и обрабатывая сайт по доменному имени без "www". Получающиеся два файла помещаются в две разные папки, здесь это "/home/me/sitemap/www/" и "/home/me/sitemap/www2/". А директория "/home/me/sitemap/sitemap/" предназначена для создаваемого sitemap.xml. 1. Путь к bash #!/bin/bash 2. Переход в папку - браузер lynx поместит туда файлы, полученные при обработке сайта по доменному имени с "www" cd /home/me/sitemap/www/ 3.

Консольные приложения для Windows. Мультимедиа

 

MPlayer : FFmpeg Медиаплееры появились давно, но их расцвет начался с массовым распространением компьютеров достаточно мощных, что бы проигрывать видеофайлы. Это по времени совпало и с массовым распространением операционных систем и вообще софта с графическим интерфейсом. Однако в природе программы с графическим интерфейсом имеется двойственность: есть комплекс кода, который отвечает за графический интерфейс, за внешний вид и есть - за то, что бы выполнялась та задача, ради которой данное приложение вообще было создано. Оба комплекса потребляют системные ресурсы, их реакция на действия пользователя формирует какой-то объем времени ожидания. И в случаях или при концепциях, когда внешний вид признается менее важным - менее важным до степени отказа или почти отказа от него - появляются, помимо прочих, консольные приложения. Кроме того, разделенность GUI и движка позволяет легче менять графический интерфейс или совершать комплекс автоматизированных действий. Эта схема реализуется и в отношении медиаплееров для Windows. MPlayer, например, в обычном виде представляет собой консольное приложение, быстро запускающееся, имеющее быстрый отклик на действия пользователя, потребляющее системные ресурсы почти полностью на свою непосредственную задачу. И уже на эту основу при желании добавляется тот или иной графический интерфейс для создания, в общем, нового приложения. MPlayer - / home page / Консольный медиаплеер для Windows. Основа для SMPlayer и UMPlayer. Существуют версии для Linux, FreeBSD, NetBSD, OpenBSD, Apple Darwin, Mac OS X, QNX, OpenSolaris/Solaris, Irix, HP-UX, AIX, некоторых других *nix систем, BeOS, Syllable, AmigaOS, AROS, MorphOS, DOS, Windows. Поддерживаемые форматы видео, аудио, статичных изображений, субтитров и т.д. ( Более полный список видео и аудио кодеков ) MPlayer: "Dead Man" MPlayer: "Sky Captain and the World of Tomorrow" MPlayer: "10,000 BC" MPlayer: "13 Tzameti" MPlayer: "The Draughtsman's Contract" MPlayer: "Женитьба Бальзаминова" FFmpeg - / home page / Набор утилит и библиотек для работы с видео и аудио файлами. Создан в и для Linux, но есть вариант и для Windows. Возможна компиляция под другие операционные системы. Поддерживаемые форматы файлов и кодеки: ( Список ). Так же, VLC медиаплеер может быть запущен с текстовым интерфейсом, с использованием ncurses.