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

 

Переименовать файл в DOS

 

Переименовать файл в DOS командой REN REN FILE1.TXT FILE2.TXT - Переименовывает FILE1.TXT в FILE2.TXT REN FILE1.TXT FILE2.HTM - Переименовывает FILE1.TXT в FILE2.HTM REN *.TXT *.HTM - Переименовывает все файлы с расширением .txt в файлы с расширением .htm. Меняются только расширения, собственно имена файлов остаются как были. Поскольку REN является краткой формой написания команды, так же может использоваться и RENAME вместо REN - как более говорящая, например. Переименовать файл в DOS командой MOVE MOVE FILE1.TXT FILE2.TXT - Переименовывает FILE1.TXT into FILE2.TXT MOVE FILE1.TXT FILE2.HTM - Переименовывает FILE1.TXT into FILE2.HTM Оба способа переименования файлов работают так же в консоли Windows. Однако есть некоторое отличие: MS-DOS, другие типичные / старые DOS'ы, интерпретатор командной строки Windows до Windows 95 и Windows NT 3.51 используют краткий формат записи имени файла (формат "8.3"). Так что, к примеру, REN FILE1.HTM FILE1.HTML не станет работать, будет сообщение об ошибке: "Duplicate file name or file name not found". Что не происходит в случае с более новыми DOS'ами или консолью более новых Windows. И при использовании старых DOS'ов проблемы может не быть - если установлены соответствующие драйверы. [ 1 ] Протестировано в MS-DOS 6.0+. Однако вполне вероятно, что будет работать и в других версиях MS-DOS или в других DOS'ах.

Float bottom

 

В CSS нет свойства "float: bottom", однако эффекта можно добиться и некоторыми другими способами. Пример: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Link 1 Link 2 Link 3 Float bottom HTML / XHTML. Код: <div class="box1"> <div class="content1"> <div class="left1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> <div class="menu1"> <p><a href="#">Link 1</a></p> <p><a href="#">Link 2</a></p> <p><a href="#">Link 3</a></p> </div> </div> <div class="bottom1">Float bottom</div> </div> CSS. Код: .box1 {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 100%;} .content1 {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 100%;} .left1 {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 64%;} .menu1 {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 36%;} .bottom1 {position: absolute; bottom: 0px; right: 0px;} /* Дополнительные CSS, просто для приведения примера к некоему внешнему виду */ .box1 {color: #ddd; text-align: center;} .content1 {background: #bbb;} .left1 {min-height: 100px; padding: 2%; text-align: justify; background: #006; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;} .menu1 {padding: 2%; float: right; background: #060; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;} .menu1 p {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 100%; padding: 0px; margin: 0px;} .menu1 a {color: #ddd; text-decoration: none;} .menu1 a:hover {text-decoration: underline;} .bottom1 {padding: 2%; color: #eee; background: #600;} Всё содержимое веб-страницы находится в контейнере box1. Внутри него два контейнера div: 1. content1 с собственно содержанием слева и меню справа. 2. bottom1 после content1.