Kompx.com or Compmiscellanea.com

Float bottom

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

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

В 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.
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. Он должен оказаться визуально внутри content1, у его нижнего края и оставаться там, на одном месте при изменениях высоты этого контейнера - то есть, быть как бы "float: bottom" в рамках контейнера content1.

С помощью "position: absolute" and "bottom: 0px" bottom1 помещается у нижнего края контейнера box1. В данном случае блок с меню находится справа, так что bottom1 тоже должен быть выровнен по правому краю - это достигается использованием "right: 0px". Если бы меню было слева, bottom1 мог быть выровнен по левому краю - "left: 0px".


[ 1 ]

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

[ 2 ]

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


Aliosque subditos et thema

 

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

 

Выравнивание содержимого страницы по центру, по ширине и по высоте с помощью 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.

Lynx. Извлечение данных из веб-страниц

 

Помимо просмотра / отображения веб-страниц, Lynx может выводить форматированный текст содержания веб-документа или его HTML источник на стандартный вывод. И это затем может быть обработано с помощью некоторых инструментов, имеющихся в Linux, таких как gawk, Perl, sed, grep, и т.д. Некоторые примеры: Работа с внешними ссылками Подсчитать количество внешних ссылок Lynx выводит список ссылок из содержимого веб-документа на стандартный вывод. Grep ищет только строки, начинающиеся с "http:", перенаправляет результат далее, опять для grep, который выбирает из них строки не начинающиеся с "http://compmiscellanea.com" and "http://www.compmiscellanea.com" (внешние ссылки веб-страницы), wc подсчитывает число извлеченных внешних ссылок и отображает его: lynx -dump -listonly "http://compmiscellanea.com/en/elinks.htm" | grep -o "http:.*" | grep -E -v "http://compmiscellanea.com|http://www.compmiscellanea.com" | wc -l Найти внешние ссылки и сохранить их в файл Lynx выводит список ссылок из содержимого веб-документа на стандартный вывод. Grep ищет только строки, начинающиеся с "http:", перенаправляет результат далее, опять для grep, который выбирает из них строки не начинающиеся с "http://compmiscellanea.com" and "http://www.compmiscellanea.com" (внешние ссылки веб-страницы) и сохраняет их в файл: lynx -dump -listonly "http://compmiscellanea.com/en/elinks.htm" | grep -o "http:.*" | grep -E -v "http://compmiscellanea.com|http://www.compmiscellanea.com" > file.txt Найти внешние ссылки, опустить повторяющиеся записи и сохранить результат в файл Lynx выводит список ссылок из содержимого веб-документа на стандартный вывод. Grep ищет только строки, начинающиеся с "http:", перенаправляет результат далее, опять для grep, который выбирает из них строки не начинающиеся с "http://compmiscellanea.com" and "http://www.compmiscellanea.com" (внешние ссылки веб-страницы), sort сортирует их, а uniq удаляет повторяющиеся записи. Результат сохраняется в файл: lynx -dump -listonly "http://compmiscellanea.com/en/elinks.htm" | grep -o "http:.*" | grep -E -v "http://compmiscellanea.com|http://www.compmiscellanea.com" | sort | uniq > file.txt Работа с внутренними ссылками Подсчитать количество внутренних ссылок Lynx выводит список ссылок из содержимого веб-документа на стандартный вывод. Grep ищет только строки, начинающиеся с "http://compmiscellanea.com" and "http://www.compmiscellanea.com" (внутренние ссылки), wc подсчитывает число извлеченных внутренних ссылок и отображает его: lynx -dump -listonly "http://compmiscellanea.com/en/elinks.htm" | grep -E -o "http://compmiscellanea.com.*|http://www.compmiscellanea.com.*" | wc -l Найти внутренние ссылки и сохранить их в файл Lynx выводит список ссылок из содержимого веб-документа на стандартный вывод. Grep ищет только строки, начинающиеся с "http://compmiscellanea.com" and "http://www.compmiscellanea.com" (внутренние ссылки) и сохраняет их в файл: lynx -dump -listonly "http://compmiscellanea.com/en/elinks.htm" | grep -E -o "http://compmiscellanea.com.*|http://www.compmiscellanea.com.*" > file.txt Найти внутренние ссылки, опустить повторяющиеся записи и сохранить результат в файл Lynx выводит список ссылок из содержимого веб-документа на стандартный вывод. Grep ищет только строки, начинающиеся с "http://compmiscellanea.com" and "http://www.compmiscellanea.com" (внутренние ссылки), sort сортирует их, а uniq удаляет повторяющиеся записи.