Kompx.com or Compmiscellanea.com

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

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

Linux : Firefox 1.0+, Google Chrome / Chromium, Opera 5.0+, SeaMonkey 1.0+ [ 2 ].

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

HTML / XHTML. Код:

<!DOCTYPE html>

<html>

<head>

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

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

</head>

<body>

<div class="all">

<div class="wrapper">

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

</div>

</div>

</body>

</html>

CSS. Код:

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

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

.all {position: relative; left: 0px; top: 0px; height: 100%; width: 100%; float: left; display: table;}

.wrapper {position: relative; left: 0px; top: 0px; height: auto; width: 100%; display: table-cell; vertical-align: middle;}

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

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

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

.All и его CSS свойства превращают всю видимую область окна браузера в CSS-таблицу.

Свойства CSS делают контейнер .wrapper ячейкой этой CSS-таблицы. Содержимое этой ячейки - контейнер .pagecontent и все, что в нем находится - выравнивается в видимой области окна браузера по центру / по высоте свойством CSS "vertical-align: middle".


[ 1 ]

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

[ 2 ]

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


Aliosque subditos et thema

 

Границы 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.

Internet Explorer 3

 

Возможности : Скриншоты : Где скачать World Wide Web / Всемирная паутина с её гипертекстовыми ссылками, просмотром веб-документов онлайн, веб-страницами как совокупностью текста и изображений / мультимедиа принесла Интернет в массы. Что касается масс, то все эти возможности во многом вращаются вокруг веб браузера. В самом первом браузере, WorldWideWeb (позже переименованном в Nexus) были реализованы многие из возможностей, которые позже стали рассматриваться как стандартные для всех веб браузеров. Но он был экспериментом, к которому имели доступ и с которым были знакомы очень немногие. Остальные пользователи более вероятно могли ожидать только среду с текстовым интерфейсом, текстовые браузеры, что-нибудь в роде Line Mode Browser. Поворотным моментом для World Wide Web / Всемирной паутины и всего Интернета было появление Mosaic, графического браузера в 1993. Сначала для Unix, а затем для Apple Macintosh и Microsoft Windows. Mosaic не был однако первым браузером для Windows и не смог заместить Cello, первый и изначально единственный браузер для Windows. Microsoft Windows была самой растущей основной платформой для PC в первой половине 1990ых. Но Microsoft кажется не видел тогда важности браузера. Так что основная конкуренция под Windows происходила в то время между несколькими версиями Mosaic и Cello. Соревнование породило браузер Netscape, который несколько лет доминировал в своей нише. Этот успех и внимание общественности, которое стала привлекать World Wide Web / Всемирная паутина к 1995 сподвигли Microsoft присоединиться к процессу. Internet Explorer 1 был просто первым экспериментом. Internet Explorer 2 предназначался для того, чтобы продвинуть дело браузера Internet Explorer - его сделали доступным и бесплатным для всех пользователей Windows, даже для коммерческих организаций. Но позиции Netscape не были особенно поколеблены; то, что Internet Explorer 2 был явно слабее во многих возможностях, было одно из причин для этого. Только после выпуска Internet Explorer 3.0 браузеры Microsoft начали нагонять Netscape. Internet Explorer 3 не был первой попыткой Microsoft найти оптимальную техническую и маркетинговую модель как были Internet Explorers of 1 and 2. И не был он первым современным браузером Microsoft, первым для Microsoft, который обогнал Netscape и всех других конкурентов как Internet Explorer 4. Но тем не менее, Internet Explorer 3 был первым в чем-то: первый коммерческий браузер с поддержкой CSS, первый браузер Microsoft без кода Spyglass и первый браузер Microsoft, который получил значительную долю пользователей, 20-39% к концу 1997 [ 1 ]. Internet Explorer 3 был переходным, промежуточным образцом программного обеспечения между ранними и современными браузерами. Что касается его современного состояния, то есть интересный момент: Internet Explorer 3 может работать под 32-битной Windows 7, в отличии от того, что в обычном случае имеет место с Internet Explorer версий 4.0-6.0. Возможности Поддержка HTML (с таблицами и фреймами) вполне неплохая ( Подробнее ), Internet Explorer 3 позволяет использовать без лишних усилий некоторые приемы HTML, как например "Границы HTML таблиц без CSS". Поддержка CSS в Internet Explorer 3 слабая ( Подробнее 1) ( Подробнее 2 ). Internet Explorer 3 так же поддерживает VBScript, ActiveX (более 1 000 управляющих элементов), Java апплеты, внедренную на странице мультимедиа, VRML и версию JavaScript от Microsoft, JScript. Всё версий и возможностей соответствующих уровню тех лет. Internet Explorer 3 бы выпущен для нескольких платформ: x86(16/32 bit), 68k, PPC, MIPS, Alpha AXP.