CSS: сентября 2013

понедельник, 23 сентября 2013 г.

Абсолютное вертикальное и горизонтальное позиционирование блока

Просто блок

.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}

Блок внутри другого блока

.Center-Container {
position: relative;
}

.Absolute-Center {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}

Внутри Viewport

.Absolute-Center.is-Fixed {
position: fixed;
z-index: 999;
}

Блок со смещением в сторону

.Absolute-Center.is-Right {
left: auto; right: 20px;
text-align: right;
}

.Absolute-Center.is-Left {
right: auto; left: 20px;
text-align: left;
}

Блок с изменяемыми размерами

.Absolute-Center.is-Responsive {
width: 60%;
height: 60%;
min-width: 200px;
max-width: 400px;
padding: 40px;
}

Overflow - Блок с прокруткой содержимого внутри себя

.Absolute-Center.is-Overflow {
overflow: auto;
}

Resizing

.Absolute-Center.is-Resizable {
min-width: 20%;
max-width: 80%;
min-height: 20%;
max-height: 80%;
resize: both;
overflow: auto;
}

Центрирование картинки

HTML

<img src="http://placekitten.com/g/500/200" class="Absolute-Center is-Image" alt="" />

CSS

.Absolute-Center.is-Image {
height: auto;
}

.Absolute-Center.is-Image img {
width: 100%;
height: auto;
}

Переменная высота

JavaScript

/* Modernizr Test for Variable Height Content */
Modernizr.testStyles('#modernizr { display: table; height: 50px; width: 50px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }', function(elem, rule) {
Modernizr.addTest('absolutecentercontent', Math.round(window.innerHeight / 2 - 25) === elem.offsetTop);
});

CSS

.absolutecentercontent .Absolute-Center.is-Variable {
display: table;
height: auto;
}

Отрицательные Margin

.is-Negative {
width: 300px;
height: 200px;
padding: 20px;
position: absolute;
top: 50%; left: 50%;
margin-left: -170px; /* (width + padding)/2 */
margin-top: -120px; /* (height + padding)/2 */
}

Трансформации

.is-Transformed {
width: 50%;
margin: auto;
position: absolute;
top: 50%; left: 50%;
-webkit-transform: translate(-50%,-50%);
- ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}

Табличная ячейка

HTML

<div class="Center-Container is-Table">
<div class="Table-Cell">
<div class="Center-Block">

</div>
</div>
</div>

CSS

.Center-Container.is-Table { display: table; }
.is-Table .Table-Cell {
display: table-cell;
vertical-align: middle;
}
.is-Table .Center-Block {
width: 50%;
margin: 0 auto;
}

Инлайн-блок

HTML

<div class="Center-Container is-Inline">
<div class="Center-Block">

</div>
</div>

CSS

.Center-Container.is-Inline {
text-align: center;
overflow: auto;
}

.Center-Container.is-Inline:after,
.is-Inline .Center-Block {
display: inline-block;
vertical-align: middle;
}

.Center-Container.is-Inline:after {
content: '';
height: 100%;
margin-left: -0.25em; /* To offset spacing. May vary by font */
}

.is-Inline .Center-Block {
max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
/* max-width: calc(100% - 0.25em) /* Only for IE9+ */
}

Flexbox

.Center-Container.is-Flexbox {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}

четверг, 19 сентября 2013 г.

Фиксированный заголовок и первая колонка таблицы

Файл index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fix Header and First column Table</title>
<link href="index.css" rel="stylesheet" type="text/css">
<script src="jquery.js" type="text/javascript"></script>
<script src="index.js" type="text/javascript"></script>
</head>
<body>



<div id="table-block">



<div class="table-header">



<div class="table-head-first">Компании</div>



<div class="table-head">
<div class="table-head-wrapper">
<table>
<tr>
<td><div>Запасы</div></td>
<td><div>Основные средства</div></td>
<td><div>Долгоср. актив</div></td>
<td><div>Краткоср. активы</div></td>
<td><div>Актив</div></td>
<td><div>Период/тип отч.</div></td>
</tr>
</table>
</div>
</div>

</div>





<div class="table-data-first">
<table>
<tr>
<td><div>VimpelCom Ltd. (ВымпелКом)</div></td>
</tr>
<tr>
<td><div>Газпром</div></td>
</tr>
<tr>
<td><div>Газпром Нефть</div></td>
</tr>
<tr>
<td><div>ЛУКОЙЛ НК</div></td>
</tr>
<tr>
<td><div> МТС</div></td>
</tr>
<tr>
<td><div>НЛМК</div></td>
</tr>
<tr>
<td><div>НОВАТЭК</div></td>
</tr>
<tr>
<td><div>Норильский никель ГМК</div></td>
</tr>
<tr>
<td><div>Роснефть НК</div></td>
</tr>
<tr>
<td><div>Сургутнефтегаз</div></td>
</tr>
<tr class="last">
<td><div></div></td>
</tr>
</table>
</div>



<div class="table-data">
<div class="table-data-wrapper">
<table>
<tr>
<td>167.00</td>
<td>15 666.00</td>
<td>45 820.00</td>
<td>9 540.00</td>
<td>55 360.00</td>
<td>2012 г. 4 кв., GAAP</td>
</tr>
<tr>
<td>14 779.36</td>
<td>251 452.22</td>
<td>310 661.81</td>
<td>77 469.19</td>
<td>388 131.00</td>
<td>2012 г. 4 кв., IAS</td>
</tr>
<tr>
<td>2 907.09</td>
<td>26 235.75</td>
<td>32 885.84</td>
<td>13 052.08</td>
<td>45 937.91</td>
<td>2013 г. 2 кв., IAS</td>
</tr>
<tr>
<td>7 848.00</td>
<td>69 640.00</td>
<td>77 799.00</td>
<td>23 375.00</td>
<td>101 174.00</td>
<td>2013 г. 1 кв., GAAP</td>
</tr>
<tr>
<td>264.87</td>
<td>8 762.52</td>
<td>1 171.89</td>
<td>3 607.77</td>
<td>15 324.00</td>
<td>2013 г. 1 кв., GAAP</td>
</tr>
<tr>
<td>2 530.19</td>
<td>10 981.40</td>
<td>12 100.62</td>
<td>5 537.20</td>
<td>17 637.82</td>
<td>2013 г. 2 кв., GAAP</td>
</tr>
<tr>
<td>99.41</td>
<td>6 347.93</td>
<td>13 021.92</td>
<td>1 873.19</td>
<td>14 895.11</td>
<td>2012 г. 4 кв., IAS</td>
</tr>
<tr>
<td>3 195.00</td>
<td>11 502.00</td>
<td></td>
<td>7 262.00</td>
<td>20 226.00</td>
<td>2013 г. 2 кв., IAS</td>
</tr>
<tr>
<td>5 990.54</td>
<td>150 536.59</td>
<td>76 978.72</td>
<td>42 094.85</td>
<td>219 073.57</td>
<td>2013 г. 2 кв., IAS</td>
</tr>
<tr>
<td>1 689.58</td>
<td>29 604.01</td>
<td>48 949.39</td>
<td>17 656.16</td>
<td>66 605.54</td>
<td>2012 г. 4 кв., IAS</td>
</tr>
<tr class="last">
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</tr>
</table>
</div>
</div>

</div>

</body>
</html>

Файл index.css

/*\
* ===============================================>
* Reset CSS
* ===============================================>
\*/

html {
font-size: 100.01%; /* Bug fix for Opera */
}

body {
width: 1000px;
position: relative; /* Bug fix for IE 6 */
margin: 0;
padding: 0;
margin-left: auto;
margin-right: auto;
text-align: center;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 62.5%;
background-color: #bbbbbb;
color: #333333;
}

div,h1,h2,h3,h4,h5,h6,p,img,ol,ul,li,table,th,td,form,select,fieldset {
margin: 0;
padding: 0;
text-align: left;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}

ol,ul {
list-style: none;
}

table {
border: 0px; /* border="0" */
border-collapse: collapse; /* cellspacing="0" */
}

table tr th {
padding: 0px; /* cellpadding="0" */
}

table tr td {
padding: 0px; /* cellpadding="0" */
}

input,textarea,select {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
}

textarea {
resize: none;
}

a img {
border: none;
}

a {
color: #333333;
text-decoration: underline;
}

a:hover {
color: #000000;
}

a:active {
text-decoration: none;
}

/* Firefox anchor border remove */
a:active,a:focus,img {
outline: 0;
}

/*\
* ===============================================>
* Fix Header and First column Table style
* ===============================================>
\*/

/* Просто блок, в котором находится наша таблица */

div#table-block {
width: 900px;
height: 400px;
padding: 5px;
background-color: #ffffff;
border: 1px solid #000000;
font-size: 1.3em;
line-height: 22px;
overflow: hidden;
}

/* Общие стили для всей таблицы*/

div#table-block table {
width: auto;
/* border-collapse: separate !important; */
}

div#table-block table tr td {
white-space: nowrap;
}

div#table-block table tr td div {
overflow: hidden;
}

div.table-header {
border: 1px solid #999999; /* Установлены все границы для заголовка таблицы */
}

div.table-head-wrapper,
div.table-data-wrapper {
width: 100000px;
}

/* Левый верхний блок DIV */

div.table-head-first {
float: left;
*display: inline;
_display: inline;
overflow: hidden;
width: 260px;
_margin-right: -3px;
height: 32px;
_height: 28px;
line-height: 16px;
padding: 0 5px;
_padding-bottom: 4px;
border-right: 1px solid #999999;
text-align: center;
}

/* Правый верхний блок DIV */

div.table-head {
line-height: 16px;
overflow: hidden;
}

div.table-head table tr td {
padding: 0 15px;
border-right: 1px solid #999999;
vertical-align: top;
text-align: center;
}

div.table-head table tr td div {
height: 32px;
text-align: center;
}

/* Левый нижний блок DIV */

div.table-data-first {height: 197px; /* Значение для примера */
float: left;
*display: inline;
_display: inline;
overflow: hidden;
_margin-right: -3px;
border-left: 1px solid #999999;
border-bottom: 1px solid #999999;
}

div.table-data-first table tr td {
padding: 0 5px;
_padding: 1px 5px;
border-bottom: 1px solid #999999;
}

div.table-data-first table tr td div {
width: 260px;
}

div.table-data-first table tr.last td {
border-bottom: none;
}

/* Правый нижний блок DIV */

div.table-data {height: 215px; /* Значение для примера */
overflow: scroll;
border-left: 1px solid #999999;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
}

div.table-data table tr td {
padding: 0 15px;
_padding: 1px 15px;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
text-align: right;
}

div.table-data table tr.last td {
border-bottom: none;
}

Файл index.js

// НАЧАЛО - МИНИМАЛЬНО НЕОБХОДИМЫЙ КОД ДЛЯ ВЫРАВНИВАНИЯ И ПРОКРУЧИВАНИЯ ТАБЛИЦЫ

// Возвращает ширину скролбара
function getScrollbarWidth() {
var scrollbarWidth
, blockWidthWithoutScrollbar
, blockWidthWithScrollbar
, div = $('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div></div>');

$('body').append(div);

blockWidthWithoutScrollbar = $('div', div).innerWidth();

div.css('overflow-y', 'scroll');

blockWidthWithScrollbar = $('div', div).innerWidth();

$(div).remove();
scrollbarWidth = blockWidthWithoutScrollbar - blockWidthWithScrollbar;

if (!scrollbarWidth) {
scrollbarWidth = 16;
}

return scrollbarWidth;
}

// Возвращает ширину 1em в пикселях
function getEmWidth(element) {
var tmp = $('<div style="position: absolute; z-index: -1000; width: 1em; margin: 0; padding: 0;"></div>')
, width;

element.append(tmp);
width = tmp.width();
$(tmp).remove();

return width;
}

// Выравнивает ширину ячеек таблицы
function alignTableCellsWidth(table) {
var headTdCells = table.find('.table-head td div')
, em = getEmWidth(table.find('.table-data td:last'))
, leftPlusRightBorderWidth = 2;

table.find('.table-data table tr.last, .table-side table tr.last').remove();
table.find('.table-data table').append('<tr class="last"></tr>');
table.find('.table-side table').append('<tr class="last"><td><div></div></td></tr>');

headTdCells.each(function(index){
var td = $('<td><div></div></td>');
table.find('.table-data tr.last').append(td);

var dataTdCell = td.find('div');
var thWidth = $(this).width();
var tdWidth = dataTdCell.width();
var emWidth;

if (thWidth > tdWidth){
emWidth = Math.floor(thWidth / em) + 2;
} else {
emWidth = Math.floor(tdWidth / em) + 2;
}
dataTdCell.css('width', emWidth + 'em');
$(this).css('width', emWidth + 'em');
});

table.find('.table-head-wrapper').width(table.find('.table-head-wrapper table').width() + getScrollbarWidth() + leftPlusRightBorderWidth);
table.find('.table-data-wrapper').width(table.find('.table-data-wrapper table').width());
}

// Прокрутка для таблицы
function initTableScroll () {
$('.table-data:first').scroll(function(){
var top = $(this).scrollTop();
var left = $(this).scrollLeft();

$('.table-data-first').scrollTop(top);
$('.table-head').scrollLeft(left);
});
}

// КОНЕЦ - МИНИМАЛЬНО НЕОБХОДИМЫЙ КОД ДЛЯ ВЫРАВНИВАНИЯ И ПРОКРУЧИВАНИЯ ТАБЛИЦЫ

// НАЧАЛО - ДОПОЛНИТЕЛЬНЫЙ КОД

//Сбрасывает стили таблицы
function resetTable(table){
table.find('.table-head-wrapper, .table-data-wrapper, .table-head td div, .table-data td div').removeAttr('style');
}

// КОНЕЦ- ДОПОЛНИТЕЛЬНЫЙ КОД

$(document).ready(function(){
// НАЧАЛО - МИНИМАЛЬНО НЕОБХОДИМЫЙ КОД ДЛЯ ВЫРАВНИВАНИЯ И ПРОКРУЧИВАНИЯ ТАБЛИЦЫ
alignTableCellsWidth($('#table-block'));
initTableScroll();
// КОНЕЦ - МИНИМАЛЬНО НЕОБХОДИМЫЙ КОД ДЛЯ ВЫРАВНИВАНИЯ И ПРОКРУЧИВАНИЯ ТАБЛИЦЫ
});

Фиксированный заголовок таблицы

Самый простой и лучший способ зафиксировать заголовок таблицы.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>

table {
border: 0px; /* border="0" */
border-collapse: collapse; /* cellspacing="0" */
}

table tr th {
padding: 0px; /* cellpadding="0" */
}

table tr td {
padding: 0px; /* cellpadding="0" */
}

div.header-wrapper {
width: 320px;
border: 1px solid black;
border-bottom: none;
}

div.body-wrapper {
overflow: auto;
width: 320px;
height: 110px;
border: 1px solid black;
border-top: none;
}

table.header {
width: 300px;
border-bottom: 1px solid black;
}

table.body {
width: 300px;
}

table.header tr td {
border-right: 1px solid black;
}

table.body tr td {
border-right: 1px solid black;
border-bottom: 1px solid black;
}

table.body tr.last-row td {
border-bottom: none;
}

table tr td.first {
width: 150px;
}

</style>
<title>Fix Table Header</title>
</head>
<body>

<div class="header-wrapper">
<table class="header">
<tr>
<td class="first">Column 1</td>
<td class="last">Column 2</td>
</tr>
</table>
</div>

<div class="body-wrapper">
<table class="body" >
<tr>
<td class="first">Value 1</td>
<td class="last">Value 2</td>
</tr>
<tr>
<td class="first">Value 1</td>
<td class="last">Value 2</td>
</tr>
<tr>
<td class="first">Value 1</td>
<td class="last">Value 2</td>
</tr>
<tr>
<td class="first">Value 1</td>
<td class="last">Value 2</td>
</tr>
<tr>
<td class="first">Value 1</td>
<td class="last">Value 2</td>
</tr>
<tr class="last-row">
<td class="first">Value 1</td>
<td class="last">Value 2</td>
</tr>
</table>
</div>

</body>
</html>

понедельник, 23 сентября 2013 г.

Абсолютное вертикальное и горизонтальное позиционирование блока

четверг, 19 сентября 2013 г.

Фиксированный заголовок и первая колонка таблицы

Фиксированный заголовок таблицы

понедельник, 23 сентября 2013 г.

четверг, 19 сентября 2013 г.