Kompx.com or Compmiscellanea.com

CSS выравнивание по центру : по ширине и по высоте - 2

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

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

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

HTML / XHTML. Код:

<!DOCTYPE html>

<html>

<head>

<title>CSS выравнивание по центру : по ширине и по высоте - 2</title>

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

</head>

<body>

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

<div class="wrapper">

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

</div>

</body>

</html>

CSS. Код:

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

body height: 100%; margin: 0px;}

.spacer {position: relative; top: 0px; left: 0px; height: 50%; width: 100px; float: left; margin: 0px 0px -250px 0px; background: #999;}

.wrapper {position: relative; top: 0px; left: 0px; height: 500px; width: 100%; clear: both; background: #a3ddc4;}

.pagecontent {position: relative; top: 0px; left: 0px; height: 500px; width: 800px; margin: 0 auto; background: #ff6f6f;}

Контейнер .pagecontent - для всего содержимого веб-страницы. Этот контейнер должен быть с явно заданными размерами в px, em, и т.п. - не в процентах. Высота и ширина могут быть больше видимой области окна браузера, но в данном случае речь о более практическом случае - когда высота и ширина контейнера .pagecontent меньше, чем размеры видимой области окна браузера.

Блок .pagecontent выравнивается в видимой области окна браузера по центру / по ширине с помощью "margin: 0 auto".

.Wrapper создает пространство, где .pagecontent выравнивается по центру / по ширине. Ширина .wrapper равна 100%, что бы выравнивание по центру / по ширине происходило при разных размерах видимой области окна браузера. Высота .wrapper должна быть равна высоте контейнера .pagecontent.

.Spacer выравнивает .wrapper с .pagecontent внутри по центру / по высоте в видимой области окна браузера. Ширина .spacer может быть любая. Высота равна 50%, это помещает верхний край .pagecontent вертикально по центру в видимой области окна браузера. Margin-bottom блока .spacer равный половине высоты .pagecontent выравнивает контейнер .pagecontent по центру / по высоте при любой текущей высоте видимой области окна браузера.

Этот метод пригоден для всех основных современных браузеров. Он так же работает и в более старых браузерах, таких как Internet Explorer 6 или ранние версии Maxthon. Но высота контейнера, в котором находится содержимое страницы, должна быть с явно заданными размерами и если они меняются - величина margin-bottom блока .spacer так же должна быть соответственно изменена. Есть другой способ горизонтального и вертикального выравнивания по центру с помощью CSS, с CSS кодом, который проще сопровождать. Хотя этот способ и не работает в более старых веб-браузерах: CSS выравнивание по центру : по ширине и по высоте - 1.


[ 1 ]

А так же в Netscape 7.2+, Mozilla 1.5+.

[ 2 ]

А так же в Netscape 7.2+, Mozilla 1.5+.


Aliosque subditos et thema

 

JavaScript submit form

 

Обработка формы с помощью JavaScript. Выпадающий список (form + select + несколько option) обрабатывается без использования кнопки submit. Пример: --- Выбрать страницу --- Linux Windows DOS HTML / XHTML. Code: <form action="action.php" method="post"> <select name="page" required="required" onchange="this.form.submit()"> <option value="" selected="selected" disabled="disabled"> --- Выбрать страницу --- </option> <option value="http://www.kompx.com/ru/os/linux-1.htm">Linux</option> <option value="http://www.kompx.com/ru/os/windows-1.htm">Windows</option> <option value="http://www.kompx.com/ru/os/dos-1.htm">DOS</option> </select> <noscript><input type="submit" value="Submit" /></noscript> </form> Когда в выпадающем списке выбирается одна из опций, состояние формы изменяется. Так что происходит событие onchange и запускается JavaScript в onchange: процесс обработки формы и передачи данных инициируется скриптом, а не кликом на кнопку submit, которая отсутствует. Для работы с action формы назначается тот или иной скрипт [ 3 ], выполняемый на сервере. Скрипт принимает то, что отсылает форма и обрабатывает принятое. В данном примере используется PHP скрипт в action.php: <?php if (isset($_POST["page"])) {     header("Location: $_POST[page]");     exit; } else {     echo "Ничего не выбрано"; } $_POST представляет собой массив из переменных, передаваемых данному скрипту методом HTTP POST. Так что $_POST[page] содержит значение атрибута value в одном из option внутри select. То есть, URL. Он передается от формы к PHP скрипту, а скрипт перенаправляет браузер на выбранный URL / страницу. HTML код <noscript><input type="submit" value="Submit" /></noscript> присутствует в форме на случай, если JavaScript отключен. Тогда появится кнопка submit и форма все равно останется пригодной к использованию. [ 1 ] А так же в Netscape 3.04+, Mozilla 0.6+. [ 2 ] А так же в Netscape 3.04+, Mozilla 0.6+. [ 3 ] Если используется CMS, для работы с action формы может применяться один из ее собственных инструментов.

Текстовые браузеры для Linux

 

Lynx : Links : ELinks : W3m : Netrik : Retawq : Line mode browser Когда появились дистрибутивы Linux для более или менее широкой публики, просмотр веб-страниц онлайн был недавним явлением, хотя какой-то путь был пройден. Уже существовало несколько браузеров, многие из которых были постепенно портированы под Linux. Некоторые текстовые браузеры были в первой волне. И через какое-то время Linux стал основной средой для текстовых браузеров, где большинство из них развивается и используется. Даже если они большей частью и предназначены не только для Linux, но так же и для различных других *nix систем. Существуют и их порты под множество других операционных систем для самых разных платформ. Lynx - / home page / Текстовый браузер. Версии для Linux, FreeBSD, Mac OS X, некоторых других *nix систем, DOS, Windows, BeOS, MINIX, QNX, AmigaOS, OpenVMS и классических Mac OS. HTML ( Подробнее 1 ) ( Подробнее 2 ) Lynx 2.8.7rel.1 в эмуляторе терминала GNOME Terminal 2.32.1, Zenwalk Linux: lynx.isc.org Lynx 2.8.7rel.1 в эмуляторе терминала GNOME Terminal 2.32.1, Zenwalk Linux: w3schools.com/browsers/browsers_stats.asp Lynx 2.8.7rel.1 в эмуляторе терминала GNOME Terminal 2.32.1, Zenwalk Linux: en.wikipedia.org/wiki/Lynx_(web_browser) Lynx 2.8.7rel.1 в эмуляторе терминала GNOME Terminal 2.32.1, Zenwalk Linux: ebay.com Lynx 2.8.7rel.1 в эмуляторе терминала GNOME Terminal 2.32.1, Zenwalk Linux: kompx.com/en/elinks.htm Lynx 2.8.7rel.1 в эмуляторе терминала GNOME Terminal 2.32.1, Zenwalk Linux: twitter.com Links - / home page 1 : home page 2 / Текстовый браузер. Версии для Linux, FreeBSD, Mac OS X, некоторых других *nix систем, BeOS, Haiku, OS/2, DOS, Windows.