Kompx.com or Compmiscellanea.com

<hr /> по центру CSS

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

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

Выравнивание <hr /> по центру с помощью CSS, если ее ширина меньше 100%. Горизонтальное выравнивание по центру. Пример:


HTML / XHTML. Код:

<hr />

CSS. Код:

hr {width: 50%; margin: 0 25% 0 25%;}

/* Дополнительные CSS, просто для приведения примера к некоему внешнему виду: */

hr {height: 1px; float: left; border: 0px; color: #f00; background: #f00;}

Примечание: большей частью работает как с float: left, так и с float: none. Однако с float: left самый верный вариант.


[ 1 ]

А так же в Netscape 4.04+, Mozilla 0.6+.

[ 2 ]

А так же в Netscape 4.04+, Mozilla 0.6+.


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.

CSS ролловер. Изменение положения фонового изображения

 

CSS ролловер. Изменение положения фонового изображения. Пример: CSS ролловер. Изменение положения фонового изображения HTML / XHTML. Код: <div class="example"> <a href="css-rollover-izmenenie-polozhenija-fonovogo-izobrazhenija.htm">CSS ролловер. Изменение положения фонового изображения</a> </div> CSS. Код: .example {position: relative; top: 0px; left: 0px; height: auto; width: 100%; white-space: nowrap; padding: 10px 20px 10px 20px;} .example a {height: 35px; width: 100%; font-size: 24px; line-height: 35px; color: #006; text-decoration: none; text-align: right; display: block; background: url("bgimg.png") no-repeat left top;} .example a:hover {color: #c00; background: url("bgimg.png") no-repeat left bottom;} Фоновое изображение: CSS ролловер Изменение положения фонового изображения Общая идея : 1. Создается ссылка с явно указанными width, height (в данном случае 674px и 35px) и display: block - это образует прямоугольник размером 674px на 35px, вся область которого представляет собой гиперссылку. line-height так же указывается в явном виде, со значением равным высоте прямоугольника (в данном случае 35px) - это способствует тому, что бы вертикальное выравнивание текста ссылки было одинаковым в разных браузерах. text-align: right добавляется, что бы поместить текст ссылки в правую часть блока. (Область блока с ссылкой выделена зеленым цветом для большей наглядности) CSS ролловер. Изменение положения фонового изображения 2. Создается изображение для фона блока с ссылкой высотой в две высоты этого блока. У изображения две части, верхняя и нижняя, каждая высотой равная высоте области блока с ссылкой; в данном случае 35px. 3. URL фонового изображения добавляется к CSS свойству фона псевдоклассов :link, :visited, :active ссылки. CSS значения no-repeat и left свойства background позиционируют фоновое изображение в левой части блока с ссылкой. CSS значение top свойства background помещает верхнюю часть фонового изображения на один уровень с текстом ссылки. 4. URL фонового изображения добавляется к CSS свойству фона псевдокласса :hover ссылки. CSS значения no-repeat и left свойства background псевдокласса :hover ссылки позиционируют фоновое изображение в левой части блока с ссылкой. CSS значение bottom свойства background псевдокласса :hover ссылки помещает нижнюю часть фонового изображения на один уровень с текстом ссылки, когда пользователь наводить курсор мыши на область блока с ссылкой. Таким образом, когда курсор мыши не наведен на область блока с ссылкой, верхняя часть фонового изображения находится на одном уровне с текстом. Когда курсор мыши наводится на область блока с ссылкой, нижняя часть фонового изображения перемещается на одним уровень с текстом. Mouse out - отображается верхняя часть фонового изображения, mouse over - отображается нижняя часть фонового изображения. И нет необходимости в предзагрузке дополнительных рисунков. CSS ролловер.