Kompx.com or Compmiscellanea.com

Горизонтальное выравнивание блока неизвестной ширины

Windows : Internet Explorer 5.5+ [ 1 ], Firefox 1.0+, Google Chrome, Opera 9.52+ [ 2 ], Safari 3.1+, SeaMonkey 1.0+ [ 3 ].

Linux : Firefox 1.0+, Chromium, Opera 9.52+ [ 4 ], SeaMonkey 1.0+ [ 5 ], NetSurf 3.0+.

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

Иногда нужно выровнять по центру группу плавающих элементов, которая будет служить заголовком или блоком с нумерацией страниц. Поскольку заголовок будет использоваться для блоков разных размеров, а блок с нумерацией страниц может увеличиваться и уменьшаться в размерах, то ширина этой группы так же будет варьировать случайным образом. Отчего способ выравнивания по центру, базирующийся на использовании известной ширины, работать не будет.

Так же, желательно, что бы блок заголовка или нумерации страниц был центрирован раз и навсегда при своем создании, что бы группа элементов могла быть использована с объектами разных размеров, на разных веб страницах: блок просто кладется куда надо, а в него помещаются текст или / и изображения - и группа выравнивается по центру автоматически.

Это можно сделать разными способами и с использованием разных технологий: CSS, CSS + JavaScript, CSS + HTML (система с тегами <table></table>). Самый простой и надежный способ горизонтального выравнивания блока неизвестной ширины основан на использовании CSS.

Горизонтальное выравнивание блока неизвестной ширины:

1. Сначала, более простой случай, горизонтальное выравнивание блока с заголовком, состоящего из плавающих элементов: изображения и текст:

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>Горизонтальное выравнивание блока неизвестной ширины: 1</title>

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251" />

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

</head>

<body>

<div class="box">

<span class="title-box">

<img src="snowflake.gif" width="37" height="34" alt="" class="title-imgs" />

<span class="title-text">Горизонтальное выравнивание блока неизвестной ширины</span>

<img src="snowflake.gif" width="37" height="34" alt="" class="title-imgs" />

</span>

</div>

</body>

</html>

CSS. Код:

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

body {background-color: #ffffff; margin: 0px; height: 100%; text-align: center; font-family: 'Times New Roman', 'Liberation Serif', serif; font-size: 26px; color: #000066;}

.box {position: relative; left: 0px; top: 0px; height: auto; width: auto; text-align: center; border: solid #cccccc 1px;}

.title-box {position: relative; left: 0px; top: 0px; height: auto; width: auto; margin: auto; display: table; display: inline-block;}

.title-imgs {float: left;}

.title-text {float: left;}

Горизонтальное выравнивание блока неизвестной ширины: [ Результат ].

2. Полный вариант примера горизонтального выравнивания блока неизвестной ширины: три страницы с блоками заголовков, состоящих из плавающих элементов - изображения и текст; и с блоками нумерации страниц, состоящих из плавающих элементов - текст, часть которого меняет свой размер при переходе с одной страницы на другую:

HTML / XHTML. Страница 1. Код:

<!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>Горизонтальное выравнивание блока неизвестной ширины: 2. Страница 1</title>

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251" />

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

</head>

<body>

<div class="all">

<div class="content">

<div class="box">

<span class="title-box">

<img src="snowflake.gif" width="37" height="34" alt="" class="title-imgs" />

<span class="title-text"><a href="gorizontalnoe-vyravnivanie-bloka-neizvestnoj-shiriny.htm" class="title-textlink">Горизонтальное выравнивание блока неизвестной ширины</a></span>

<img src="snowflake.gif" width="37" height="34" alt="" class="title-imgs" />

</span>

</div>

<div class="content-text">

Иногда нужно выровнять по центру группу плавающих элементов, которая будет служить заголовком или блоком с нумерацией страниц. Поскольку заголовок будет использоваться для блоков разных размеров, а блок с нумерацией страниц может увеличиваться и уменьшаться в размерах, то ширина этой группы так же будет варьировать случайным образом. Отчего способ выравнивания по центру, базирующийся на использовании известной ширины, работать не будет.

</div>

<div class="pagination-box">

<span class="pagination-box-all">

<span class="pagination-box-text">Страница:</span>

<span class="pagination-box-numbers-links-visited">1</span>

<span class="pagination-box-numbers"><a href="gorizontalnoe-vyravnivanie-bloka-neizvestnoj-shiriny-itogovyj-rezultat-2.htm" class="pagination-box-numberslinks">2</a></span>

<span class="pagination-box-numbers"><a href="gorizontalnoe-vyravnivanie-bloka-neizvestnoj-shiriny-itogovyj-rezultat-3.htm" class="pagination-box-numberslinks">3</a></span>

</span>

</div>

</div>

</div>

</body>

</html>

HTML / XHTML. Страница 2. Код:

<!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>Горизонтальное выравнивание блока неизвестной ширины: 2. Страница 2</title>

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251" />

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

</head>

<body>

<div class="all">

<div class="content">

<div class="box">

<span class="title-box">

<img src="snowflake.gif" width="37" height="34" alt="" class="title-imgs" />

<span class="title-text"><a href="gorizontalnoe-vyravnivanie-bloka-neizvestnoj-shiriny.htm" class="title-textlink">Горизонтальное выравнивание блока неизвестной ширины</a></span>

<img src="snowflake.gif" width="37" height="34" alt="" class="title-imgs" />

</span>

</div>

<div class="content-text">

Так же, желательно, что бы блок заголовка или нумерации страниц был центрирован раз и навсегда при своем создании, что бы группа элементов могла быть использована с объектами разных размеров, на разных веб страницах: блок просто кладется куда надо, а в него помещаются текст или / и изображения - и группа выравнивается по центру автоматически.

</div>

<div class="pagination-box">

<span class="pagination-box-all">

<span class="pagination-box-text">Страница:</span>

<span class="pagination-box-numbers"><a href="gorizontalnoe-vyravnivanie-bloka-neizvestnoj-shiriny-itogovyj-rezultat-1.htm" class="pagination-box-numberslinks">1</a></span>

<span class="pagination-box-numbers-links-visited">2</span>

<span class="pagination-box-numbers"><a href="gorizontalnoe-vyravnivanie-bloka-neizvestnoj-shiriny-itogovyj-rezultat-3.htm" class="pagination-box-numberslinks">3</a></span>

</span>

</div>

</div>

</div>

</body>

</html>

HTML / XHTML. Страница 3. Код:

<!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>Горизонтальное выравнивание блока неизвестной ширины: 2. Страница 3</title>

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251" />

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

</head>

<body>

<div class="all">

<div class="content">

<div class="box">

<span class="title-box">

<img src="snowflake.gif" width="37" height="34" alt="" class="title-imgs" />

<span class="title-text"><a href="gorizontalnoe-vyravnivanie-bloka-neizvestnoj-shiriny.htm" class="title-textlink">Горизонтальное выравнивание блока неизвестной ширины</a></span>

<img src="snowflake.gif" width="37" height="34" alt="" class="title-imgs" />

</span>

</div>

<div class="content-text">

Это можно сделать разными способами и с использованием разных технологий: CSS, CSS + JavaScript, CSS + HTML (система с тегами &lt;table&gt;&lt;/table&gt;). Самый простой и надежный способ горизонтального выравнивания блока неизвестной ширины основан на использовании CSS.

</div>

<div class="pagination-box">

<span class="pagination-box-all">

<span class="pagination-box-text">Страница:</span>

<span class="pagination-box-numbers"><a href="gorizontalnoe-vyravnivanie-bloka-neizvestnoj-shiriny-itogovyj-rezultat-1.htm" class="pagination-box-numberslinks">1</a></span>

<span class="pagination-box-numbers"><a href="gorizontalnoe-vyravnivanie-bloka-neizvestnoj-shiriny-itogovyj-rezultat-2.htm" class="pagination-box-numberslinks">2</a></span>

<span class="pagination-box-numbers-links-visited">3</span>

</span>

</div>

</div>

</div>

</body>

</html>

CSS. Код:

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

body {background-color: #ffffff; margin: 0px; height: 100%; text-align: center; font-family: 'Times New Roman', 'Liberation Serif', serif; font-size: 26px; color: #000066;}

.all {position: relative; left: 0px; top: 0px; height: auto; width: 100%; margin-top: 10px; padding-bottom: 10px; float: left; clear: both; background-color: #ffffff;}

.content {position: relative; top: 0px; left: 0px; width: 800px; height: auto; text-align: left; margin-left: auto; margin-right: auto; background-color: #ffffff; padding: 6px 15px 15px 15px;}

.box {position: relative; left: 0px; top: 0px; height: auto; width: auto; text-align: center; border-bottom: solid #ccc 1px; padding: 0 0 16px 0;}

.title-box {position: relative; left: 0px; top: 0px; height: auto; width: auto; margin: auto; display: table; display: inline-block;}

.title-imgs {float: left;}

.title-text {float: left;}

.content-text {position: relative; left: 0px; top: 0px; height: auto; width: auto; text-align: justify; margin: 20px 0 23px 0; font-family: 'Times New Roman', 'Liberation Serif', serif; font-size: 17px; color: #000000;}

.pagination-box {position: relative; left: 0px; top: 0px; height: auto; width: auto; text-align: center; border-top: solid #ccc 1px; padding: 16px 0 0 0;}

.pagination-box-all {position: relative; left: 0px; top: 0px; height: auto; width: auto; margin: auto; display: table; display: inline-block; line-height: 30px;}

.pagination-box-text {position: relative; left: 0px; top: 0px; height: auto; width: auto; float: left;}

.pagination-box-numbers {position: relative; left: 0px; top: 0px; height: auto; width: auto; float: left; margin: 0 5px 0 5px;}

.pagination-box-numbers-links-visited {position: relative; left: 0px; top: 0px; height: auto; width: auto; float: left; margin: 0 5px 0 5px; font-size: 30px; color: #cc0000; text-decoration: underline;}

a.title-textlink {font-family: 'Times New Roman', 'Liberation Serif', serif; font-size: 26px; color: #000033; text-decoration: none; float: left;}

a.title-textlink:visited {font-family: 'Times New Roman', 'Liberation Serif', serif; font-size: 26px; color: #000033; text-decoration: none; float: left;}

a.title-textlink:hover {font-family: 'Times New Roman', 'Liberation Serif', serif; font-size: 26px; color: #cc0000; text-decoration: none; float: left;}

a.title-textlink:active {font-family: 'Times New Roman', 'Liberation Serif', serif; font-size: 26px; color: #000033; text-decoration: none; float: left;}

a.pagination-box-numberslinks {font-family: 'Times New Roman', 'Liberation Serif', serif; font-size: 26px; color: #000033; text-decoration: none; float: left;}

a.pagination-box-numberslinks:visited {font-family: 'Times New Roman', 'Liberation Serif', serif; font-size: 26px; color: #000033; text-decoration: none; float: left;}

a.pagination-box-numberslinks:hover {font-family: 'Times New Roman', 'Liberation Serif', serif; font-size: 26px; color: #cc0000; text-decoration: underline; float: left;}

a.pagination-box-numberslinks:active {font-family: 'Times New Roman', 'Liberation Serif', serif; font-size: 26px; color: #000033; text-decoration: none; float: left;}

Горизонтальное выравнивание блока неизвестной ширины. Итоговый результат: [ Результат ] [ Cкачать в архиве ].


[ 1 ]

Частично Internet Explorer 4.01.

[ 2 ]

Просто центровка плавающих элементов работает в Opera 9.0+.

[ 3 ]

А так же Mozilla 1.7.1+, Netscape 7.2+. Частично Netscape Communicator 4.7 и Mozilla 1.0.

[ 4 ]

Просто центровка плавающих элементов работает в Opera 9.0+.

[ 5 ]

А так же Mozilla 1.7.1+, Netscape 7.2+. Более или менее Dillo 2.2.1+. Частично Netscape Communicator 4.7 и Mozilla 1.0.


Aliosque subditos et thema

 

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 ролловер.

CSS выравнивание по центру : по ширине и по высоте - 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+.