.site-header .container{ padding-top:0} .site-title{ background:none;padding-top:0}


Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 8.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

Краткая информация

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

Устанавливает значение поля от верхнего края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).

Рис. 1. Поле сверху от текста

Синтаксис

padding-top: значение | inherit

Значения

Величину верхнего поля можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение inherit указывает, что оно наследуется у родителя. При указании поля в процентах, значение считается от ширины родителя элемента.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>padding-top</title>
<style>
.layer {
background: #fc3; /* Цвет фона */
border-top: 5px solid #000; /* Параметры верхней линии */
border-bottom: 5px solid #000; /* Параметры нижней линии */
padding: 5px; /* Поля вокруг текста */
padding-top: 10%; /* Поле сверху */
padding-bottom: 10%; /* Поле снизу */
}
</style>
</head>
<body>
<div class=»layer»>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim
ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.
</div>
</body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Применение свойства padding-top

Объектная модель

[window.]document.getElementById(«elementID»).style.paddingTop

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Источник: htmlbook.ru
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129 		/* ————————————————————————- *
 *  Section: Header
/* ————————————————————————- */
#header { background: #33363b; position: relative; padding-bottom: 60px; }
#header .pad { padding-top: 28px; padding-bottom: 30px; }
#header .container-inner { position: relative; }
.block1{ position: absolute; left:1000px; top: 30px;} /*первый блок*/
.block2{ position: absolute; left:1000px; top: 130px;} /*второй блок*/
.block3{ position: absolute; left:700px; top: 30px;} /*третий блок*/
.block4{ position: absolute; left:700px; top: 130px;} /*четвертый блок*/
.block5{ position: absolute; left:1115px; top: 165px;} /*Социальные сети*/
.block6{ position: absolute; left:863px; top: 165px;} /*Проверка кода*/
.block7{ position: absolute; left:575px; top: 165px;} /*Бюро находок*/
 
 
.site-title { font-size: 42px; font-weight: 600; letter-spacing: -0.5px; float: left; line-height: 60px; padding: 10px 0; }
.site-title a { display: block; color: #fff; float: left; max-width: 100%; white-space: nowrap; }
.site-title a img { float: left; display: block; max-width: 100%; max-height: 60px; height: auto; padding: 0; margin: 0 auto; -webkit-border-radius: 0; border-radius: 0; }
.site-description { font-size: 16px; font-style: italic; color: #fff; color: rgba(255,255,255,0.5); float: left; margin-left: 20px; line-height: 60px; padding: 10px 0; }
 
/*  header : search
/* ———————————— */
.toggle-search { color: #fff; font-size: 18px; line-height: 24px; cursor: pointer; padding: 13px 20px; display: block; position: absolute; right: 0; top: -50px;
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,0.1);
box-shadow: -1px 0 0 rgba(255,255,255,0.1); }
.toggle-search:hover,
.toggle-search-expand .toggle-search { background: rgba(0,0,0,0.15); color: #fff; }
.toggle-search-expand .search-expand  { display: block; }
.search-expand { display: none; background: #26272b; position: absolute; top: 0; right: 0; width: 340px; }
.search-expand-inner { background: rgba(0,0,0,0.15); padding: 15px; }
.search-expand .themeform input { width: 100%; border: 2px solid #e2e2e2; border-radius: 0; }
.search-expand .themeform input:focus {  }
 
/*  header : nav topbar
/* ———————————— */
#nav-topbar.nav-container { background: #26272b;
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2),0 1px 0 rgba(255,255,255,0.15);
box-shadow: 0 0 5px rgba(0,0,0,0.2),0 1px 0 rgba(255,255,255,0.15); }
#nav-topbar .nav-toggle { background: transparent; color: #fff;
-webkit-box-shadow: inset 1px 0 0 rgba(255,255,255,0.06);
box-shadow: inset 1px 0 0 rgba(255,255,255,0.06); }
#nav-topbar .nav-text { color: #fff; color: rgba(255,255,255,0.7); }
 
@media only screen and (min-width: 1025px) {
    /* fixed nav */
    .topbar-enabled #header { padding-top: 50px; }
    #nav-topbar.nav-container { position: fixed; top: 0; width: 100%; z-index: 999; }
    .admin-bar #nav-topbar.nav-container { top: 28px; }
}
 
@media only screen and (min-width: 720px) {
 
    /* common */
    #nav-topbar .nav {  }
    #nav-topbar .nav li a { color: #fff; color: rgba(255,255,255,0.7); }   
    /* level 1 */
    #nav-topbar .nav > li { border-right: none; }
    #nav-topbar .nav > li > a:hover,
    #nav-topbar .nav > li:hover > a { background-color: rgba(0,0,0,0.1); }
    #nav-topbar .nav li > a:hover,
    #nav-topbar .nav li:hover > a,
    #nav-topbar .nav li.current_page_item > a,
    #nav-topbar .nav li.current-menu-item > a,
    #nav-topbar .nav li.current-menu-ancestor > a,
    #nav-topbar .nav li.current-post-parent > a { color: #fff; }
    /* level 2 & 3 */
    #nav-topbar .nav ul { background: #26272b url(img/opacity-10.png) repeat; }
    #nav-topbar .nav ul li { box-shadow: 0 1px 0 rgba(255,255,255,0.06); -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.06); }
    #nav-topbar .nav ul li:last-child { box-shadow: none; -webkit-box-shadow: none; }
   
}
@media only screen and (max-width: 719px) {
   
    /* common */
    #nav-topbar .nav li a { color: #fff; color: rgba(255,255,255,0.8); border-top: 1px solid rgba(255,255,255,0.06); } 
    /* level 1 */
    #nav-topbar .nav li > a:hover { background: rgba(0,0,0,0.15); color: #fff; }
    #nav-topbar .nav li.current_page_item > a,
    #nav-topbar .nav li.current-menu-item > a,
    #nav-topbar .nav li.current-post-parent > a { background: rgba(0,0,0,0.15); color: #fff; }
   
}
 
/*  header : nav header
/* ———————menuuuuu—————- */
#nav-header.nav-container { background-color: #477587; z-index: 97;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 -1px 0 rgba(0,0,0,0.2), inset 1px 0 0 rgba(0,0,0,0.2), inset -1px 0 0 rgba(0,0,0,0.2);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 -1px 0 rgba(0,0,0,0.2), inset 1px 0 0 rgba(0,0,0,0.2), inset -1px 0 0 rgba(0,0,0,0.2); }
#nav-header .container { padding: 0 15px; }
#nav-header .nav-toggle { background: transparent; color: #fff;
-webkit-box-shadow: inset 1px 0 0 rgba(255,255,255,0.05), -1px 0 0 rgba(0,0,0,0.2);
box-shadow: inset 1px 0 0 rgba(255,255,255,0.05), -1px 0 0 rgba(0,0,0,0.2); }
#nav-header .nav-text { color: #fff; color: rgba(255,255,255,0.7); }
 
@media only screen and (min-width: 720px) {
 
    /* common */
    #nav-header .nav {  }
    #nav-header .nav li a { color: #fff; color: rgba(255,255,255,0.7); }   
    /* level 1 */
    #nav-header .nav > li { border-right: none; }
    #nav-header .nav > li > a:hover,
    #nav-header .nav > li:hover > a { background: rgba(0,0,0,0.1); }
    #nav-header .nav li > a:hover,
    #nav-header .nav li:hover > a,
    #nav-header .nav li.current_page_item > a,
    #nav-header .nav li.current-menu-item > a,
    #nav-header .nav li.current-menu-ancestor > a,
    #nav-header .nav li.current-post-parent > a { color: #fff; }
    /* level 2 & 3 */
    #nav-header .nav ul { background: #33363b url(img/opacity-10.png) repeat; }
    #nav-header .nav ul li { box-shadow: 0 1px 0 rgba(255,255,255,0.06); -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.06); }
    #nav-header .nav ul li:last-child { box-shadow: none; -webkit-box-shadow: none; }
   
}
@media only screen and (max-width: 719px) {
   
    /* common */
    #nav-header.nav-container  { border-left: 0; border-right: 0; }
    #nav-header .container { padding: 0; }
    #nav-header .nav { padding-bottom: 20px; }
    #nav-header .nav li a { color: #fff; color: rgba(255,255,255,0.8); border-top: 1px solid rgba(255,255,255,0.06); } 
    /* level 1 */
    #nav-header .nav li > a:hover { background: rgba(0,0,0,0.15); color: #fff; }
    #nav-header .nav li.current_page_item > a,
    #nav-header .nav li.current-menu-item > a,
    #nav-header .nav li.current-post-parent > a { background: rgba(0,0,0,0.15); color: #fff; }
   
}
Источник: www.cyberforum.ru

CSS свойства

Определение и применение

CSS свойство padding-top устанавливает верхний внутренний отступ элемента.

На изображении салатовым цветом обозначена зона за которую отвечает свойство padding-top:

Поддержка браузерами

CSS синтаксис:

padding-top:»length | initial | inherit»;

JavaScript синтаксис:

object.style.paddingTop = «5px»

Значения свойства

Значение Описание
length Определяет внутренний отступ элемента в пикселях, см и др. единицах. Значение по умолчанию 0.
Отрицательные значения не допускаются.
% Определяет внутренний отступ элемента в процентах от содержащего блока родительского элемента.
Отрицательные значения не допускаются.
initial Устанавливает свойство в значение по умолчанию.
inherit Указывает, что значение наследуется от родительского элемента.

Версия CSS

CSS1

Наследуется

Нет.

Анимируемое

Да.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Отступы элемента.</title>
<style>
.primer {
width : 33%; /* задаём ширину блока */
padding-top : 15px; /* устанавливает величину внутреннего отступа от верхнего края элемента. */
padding-right : 50px; /* устанавливает величину внутреннего отступа от правого края элемента. */
padding-bottom : 15px; /* устанавливает величину внутреннего отступа от нижнего края элемента. */
padding-left : 150px; /* устанавливает величину внутреннего отступа от левого края элемента. */
background-color : orange; /* задаём цвет заднего фона */
border : 1px solid; /* задаём сплошную границу для всех сторон элемента */
}
.primer1 {
width : 33%; /* задаём ширину блока */
padding-top : 25px; /* устанавливает величину внутреннего отступа от верхнего края элемента. */
padding-right : 25px; /* устанавливает величину внутреннего отступа от правого края элемента. */
padding-bottom : 5px; /* устанавливает величину внутреннего отступа от нижнего края элемента. */
padding-left : 25px; /* устанавливает величину внутреннего отступа от левого края элемента. */
background-color : yellow; /* задаём цвет заднего фона */
border : 1px solid; /* задаём сплошную границу для всех сторон элемента */
}
.primer2 {
width : 33%; /* задаём ширину блока */
padding-top : 5px; /* устанавливает величину внутреннего отступа от верхнего края элемента. */
padding-right : 50px; /* устанавливает величину внутреннего отступа от правого края элемента. */
padding-bottom:25px; /* устанавливает величину внутреннего отступа от нижнего края элемента. */
padding-left : 75px; /* устанавливает величину внутреннего отступа от левого края элемента. */
background-color : lime; /* задаём цвет заднего фона */
border : 1px solid; /* задаём сплошную границу для всех сторон элемента */
}
.primer3 {
width : 33%; /* задаём ширину блока */
padding-top : 40px; /* устанавливает величину внутреннего отступа от верхнего края элемента. */
padding-right : 75px; /* устанавливает величину внутреннего отступа от правого края элемента. */
padding-bottom : 25px; /* устанавливает величину внутреннего отступа от нижнего края элемента. */
padding-left : 100px; /* устанавливает величину внутреннего отступа от левого края элемента. */
background-color : blue; /* задаём цвет заднего фона */
border : 1px solid; /* задаём сплошную границу для всех сторон элемента */
}
</style>
</head>
<body>
<div class = «primer»>Съешь же ещё этих мягких французских булок да выпей чаю.</div>
<div class = «primer1»>Съешь же ещё этих мягких французских булок да выпей чаю.</div>
<div class = «primer2»>Съешь же ещё этих мягких французских булок да выпей чаю.</div>
<div class = «primer3»>Съешь же ещё этих мягких французских булок да выпей чаю.</div>
</body>
</html>


Пример использования внутренних отступов элемента.CSS свойства

Источник: basicweb.ru

  • Перевод
  • Tutorial

Зачастую вроде бы простые задачи верстки требуют сложной структуры HTML-разметки и использования CSS-трюков. Центрирование элементов или выравнивание контента может быть очень утомительным. Одна из таких задач — это выравнивание элементов верхней части сайта так, чтобы логотип был слева, а пункты меню — справа. Можно использовать float и position:absolute, а для выравнивания по вертикали — добавлять margin и padding разным элементам. Вроде бы ничего сложного. Но если сайт должен корректно отображаться и на мобильных устройствах, возникает много проблем.

Ниже описан лаконичный способ решения этой проблемы.

HTML-разметка максимально проста:

<header>
<h1>Super Bad</h1>
<nav><a>First Link</a><a>Second Link</a><a>Third Link</a></nav>
</header>

Высота шапки фиксированная, добавляем text-align: justify, для дочерних элементов:

header {
text-align: justify;
letter-spacing: 1px;
height: 8em;
padding: 2em 10%;
background: #2c3e50;
color: #fff;
}

Добавляем display: inline-block для всех элементов nav, чтобы можно было расположить их друг за другом:

header h1,
header nav {
display: inline-block;
}

Чтобы атрибут text-align: justify работал, как мы хотим, нужно использовать небольшой трюк с псведоэлементами, который был найден в статье Perfectly justified CSS grid technique using inline-block, автор Jelmer de Maat:

header::after {
content: »;
display: inline-block;
width: 100%;
}

В итоге получилось выравнивание по горизонтали, без использования float и position:absolute. Теперь необходимо выравнивание элементов по вертикали. При использовании vertical-align для элементов nav будет зависимость от высоты родительского блока — шапки. А это не очень правильно. Примеры использования vertical-align: top и vertical-align: middle на jsbin. Ниже представлен возможно наиболее удобный способ вертикального выравнивания.

Используем снова псевдоэлементы. используя пример из статьи Centering in the Unknown, упомянутый Michał Czernow:

header h1 {
height: 100%;
}

header h1::before {
content: »;
display: inline-block;
vertical-align: middle;
height: 100%;
}

В результате получается то, что нужно:

Осталось решить две задачи: корректное отображение при большом количестве текста в шапке и адаптивность. Если заголовок сайта будет слишком длинный, верстка начнет съезжать:

Используем трюк с псевдоэлементом на header:

CSS-код

header {
text-align: justify;
height: 15em;
padding: 2em 5%;
background: #2c3e50;
color: #fff;
}

header::after {
content: »;
display: inline-block;
width: 100%;
}

header > div,
header nav,
header div h1 {
display: inline-block;
vertical-align: middle;
}

header > div {
width: 50%;
height: 100%;
text-align: left;
}

header > div::before {
content: »;
display: inline-block;
vertical-align: middle;
height: 100%;
}

Выглядит намного лучше:

Теперь перейдем к адаптивности. Есть несколько способов решения этой задачи, можно просто не задавать высоту шапке, и все внутренние элементы будут адаптивны высоте. При этом не потребуется второй трюк с псевдоэлементами, живой пример на jsbin.

CSS-код

header {
text-align: justify;
padding: 2em 5%;
background: #2c3e50;
color: #fff;
}

header::after {
content: »;
display: inline-block;
width: 100%;
}

header h1,
header nav {
display: inline-block;
vertical-align: middle;
}

header h1 {
width: 50%;
text-align: left;
padding-top: 0.5em;
}

header nav {
padding-top: 1em;
}

Если же необходимо задать высоту шапки, то придется использовать и второй трюк с псевдоэлементами, и добавлять media query для экранов разных размеров:

@media screen and (max-width: 820px){

header {
height: auto;
}

header > div,
header > div h1,
header nav {
height: auto;
width: auto;
display: block;
text-align: center;
}

}

Результат адаптивен и на мобильных устройствах выглядит так:

В примере используется 820px для наглядности, на живом сайте значение конечно должно быть другое, в соответствии с требованиями. Для поддержки Internet Explorer 8 необходимо вместо “::” использовать “:” для псевдоэлементов.

Финальный CSS-код

@import url(http://fonts.googleapis.com/css?family=Lato:400,700italic);
* { padding: 0; margin: 0; }
body { background: #1abc9c; font-family: ‘Lato’, sans-serif; text-transform: uppercase; letter-spacing: 1px;}

header {
text-align: justify;
height: 8em;
padding: 2em 5%;
background: #2c3e50;
color: #fff;
}

header::after {
content: »;
display: inline-block;
width: 100%;
}

header > div,
header > div::before,
header nav,
header > div h1 {
display: inline-block;
vertical-align: middle;
text-align: left;
}

header > div {
height: 100%;
}

header > div::before {
content: »;
height: 100%;
}

header > div h1 {
font-size: 3em;
font-style: italic;
}

header nav a {
padding: 0 0.6em;
white-space: nowrap;
}

header nav a:last-child {
padding-right: 0;
}

@media screen and (max-width: 720px){

header {
height: auto;
}

header > div,
header > div h1,
header nav {
height: auto;
width: auto;
display: block;
text-align: center;
}

}

Результат:


Теги:
  • header
  • css
  • justify
  • шапка
  • выравнивание
Источник: habr.com

Опубликовано: 16 мая 2020 Обновлено: 30 апреля 2020

Адаптивная вёрстка сайта позволяет веб-страницам автоматически подстраиваться под экраны планшетов и смартфонов. Мобильный интернет-трафик растёт с каждым годом и чтобы эффективно обрабатывать этот трафик, нужно предлагать пользователям адаптивные сайты с удобным интерфейсом.

Поисковые системы используют ряд критериев для оценки адаптивности сайта при просмотре на мобильных устройствах. Google старается упростить пользование Интернетом для владельцев смартфонов и планшетов, отмечая в мобильной выдаче адаптированные под мобильные устройства сайты специальной пометкой mobile-friendly. В Яндексе также работает алгоритм, который отдает предпочтение сайтам с мобильной/адаптивной версией для пользователей в мобильном поиске.

Проверить отображение страницы на мобильных устройствах можно на сервисах Яндекс.Вебмастер и Google Developers.

Рис. 1. Мобильная выдача Яндекса и Google с пометкой о дружелюбности сайта к мобильным устройствам

Что такое адаптивная вёрстка

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

Основные приёмы создания адаптивного сайта приведены в статье Отзывчивый и адаптивный дизайн сайта. Для отзывчивого дизайна ширина основного контейнера сайта задаётся в %, при этом она может быть равна как 100% ширины окна браузера, так и меньше. Ширина столбцов сетки также задаётся в %. В адаптивном дизайне ширина основного контейнера и столбцов сетки фиксируется с помощью значений в px.

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

Вёрстка главной страницы

Страница состоит из трёх основных блоков: верхний колонтитул (шапка), контейнер-обёртка для основного содержимого и сайдбара, и нижний колонтитул (футер). В качестве переломных точек дизайна возьмём 768px и 480px.

В первой точке скроем верхнее меню и переместим сайдбар под контейнер с постами. Во второй точке изменим расположение элементов шапки, отменим позиционирование кнопок социальных сетей в постах и отменим обтекание столбцов подвала страницы.

Рис. 2. Пример адаптивной верстки

Перейти на страницу

1. Метатеги и раздел <head>

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<meta name=»viewport» content=»width=device-width, initial-scale=1″>
<title>Адаптивная вёрстка сайта</title>
<link rel=»stylesheet» type=»text/css» href=»https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic|Playfair+Display:400,700&subset=latin,cyrillic»>
<link rel=»stylesheet» type=»text/css» href=»https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css»>
<link rel=»stylesheet» type=»text/css» href=»style.css»>
<script src=»https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js»></script>
<script src=»https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js»></script>
</head>
<body>

2. Шапка страницы

В шапке страницы <header> поместим следующие элементы-контейнеры:
логотип <a class=»logo»>;
кнопку для показа/скрытия главного меню <div class=»nav-toggle»>;
главное меню <ul id=»menu»>;
форму поиска по сайту <form id=»searchform»>.

<header>
<nav class=»container»>
<a class=»logo» href=»»>
<span>L</span>
<span>O</span>
<span>G</span>
<span>O</span>
</a>
<div class=»nav-toggle»><span></span></div>
<form action=»» method=»get» id=»searchform»>
<input type=»text» placeholder=»Искать на сайте…»>
<button type=»submit»><i class=»fa fa-search»></i></button>
</form>
<ul id=»menu»>
<li><a href=»»>Блог</a></li>
<li><a href=»»>Портфолио</a></li>
<li><a href=»»>Об авторе</a></li>
</ul>
</nav>
</header>

3. Блок с кратким содержанием статьи

Анонс статей обернём элементом <article id=»post-1″ class=»post»>:

<div class=»container»>
<div class=»posts-list»>
<article id=»post-1″ class=»post»>
<div class=»post-image»><a href=»»><img src=»https://html5book.ru/wp-content/uploads/2016/05/rasskaz_slovar_rodnoy_prirodi.jpg»></a></div>
<div class=»post-content»>
<div class=»category»><a href=»»>Дизайн</a></div>
<h2 class=»post-title»>Весна</h2>
<p>Очень богат русский язык словами, относящимися к временам года и к природным явлениям, с ними связанным.</p>
<div class=»post-footer»>
<a class=»more-link» href=»»>Продолжить чтение</a>
<div class=»post-social»>
<a href=»» target=»_blank»><i class=»fa fa-facebook»></i></a>
<a href=»» target=»_blank»><i class=»fa fa-twitter»></i></a>
<a href=»» target=»_blank»><i class=»fa fa-pinterest»></i></a>
</div>
</div>
</div>
</article>
<article id=»post-2″ class=»post»>
…
</article>
</div> <!— конец div class=»posts-list»—>

4. Боковая колонка

В боковую колонку <aside> добавим список категорий, последние записи и форму подписки на рассылку:

<aside>
<div class=»widget»>
<h3 class=»widget-title»>Категории</h3>
<ul class=»widget-category-list»>
<li><a href=»»>Дизайн</a> (2)</li>
<li><a href=»»>Вёрстка</a> (5)</li>
<li><a href=»»>Видео</a> (1)</li>
</ul>
</div>
<div class=»widget»>
<h3 class=»widget-title»>Последние записи</h3>
<ul class=»widget-posts-list»>
<li>
<div class=»post-image-small»>
<a href=»»><img src=»https://html5book.ru/wp-content/uploads/2016/05/rasskaz_slovar_rodnoy_prirodi.jpg»></a>
</div>
<h4 class=»widget-post-title»>Весна</h4>
</li>
<li>
<div class=»post-image-small»>
<a href=»»><img src=»https://html5book.ru/wp-content/uploads/2016/05/rasskaz_Russia.jpg»></a>
</div>
<h4 class=»widget-post-title»>Лето</h4>
</li>
<li>
<div class=»post-image-small»>
<a href=»»><img src=»https://html5book.ru/wp-content/uploads/2016/05/rasskaz_rodnaya_priroda_osen.jpg»></a>
</div>
<h4 class=»widget-post-title»>Осень</h4>
</li>
</ul>
</div>
<div class=»widget»>
<h3 class=»widget-title»>Подписка на рассылку</h3>
<form action=»» method=»post» id=»subscribe»>
<input type=»email» name=»email» placeholder=»Ваш email» required>
<button type=»submit»><i class=»fa fa-paper-plane-o»></i></button>
</form>
</div>
</aside>
</div> <!— конец div class=»container»—>

5. Нижний колонтитул

В подвале страницы разместим информацию о копирайте, кнопки социальных сетей и ссылку на электронную почту:

<footer>
<div class=»container»>
<div class=»footer-col»><span>Мой блог © 2016</span></div>
<div class=»footer-col»>
<div class=»social-bar-wrap»>
<a title=»Facebook» href=»» target=»_blank»><i class=»fa fa-facebook»></i></a>
<a title=»Twitter» href=»» target=»_blank»><i class=»fa fa-twitter»></i></a>
<a title=»Pinterest» href=»» target=»_blank»><i class=»fa fa-pinterest»></i></a>
<a title=»Instagram» href=»» target=»_blank»><i class=»fa fa-instagram»></i></a>
</div>
</div>
<div class=»footer-col»>
<a href=»mailto:[email protected]»>Написать письмо</a>
</div>
</div>
</footer>
<script>
$(‘.nav-toggle’).on(‘click’, function(){
$(‘#menu’).toggleClass(‘active’);
});
</script>
</body>
</html>

6. Общие CSS-стили

Общие стили, сброс стилей браузера по умолчанию:

*, *:after, *:before {
box-sizing: border-box;
padding: 0;
margin: 0;
transition: .5s ease-in-out; /* добавим плавность переходов для всех элементов страницы*/
}
ul {
list-style: none;
}
a {
text-decoration: none;
outline: none;
}
img {
display: block;
width: 100%;
}
h1, h2, h3, h4, h5, h6 {
font-family: ‘Playfair Display’;
font-weight: normal;
letter-spacing: 1px;
}
body {
font-family: ‘Open Sans’, arial, sans-serif;
font-size: 14px;
line-height: 1;
color: #373737;
background: #f7f7f7;
}
/* добавим очистку потока для всех контейнеров, внутри которых задано обтекание дочерних элементов */
header:after, .container:after, footer:after, .widget-posts-list li:after, #subscribe:after {
content: «»;
display: table;
clear: both;
}
/* стилевой класс, который управляет шириной контейнера сетки*/
.container {
margin: 0 auto;
width: 100%;
max-width: 960px;
padding: 0 15px;
}

7. Стили для шапки и её содержимого

header {
width: 100%;
background: white;
box-shadow: 3px 3px 1px rgba(0,0,0,.05);
padding: 15px 0;
margin-bottom: 30px;
position: relative;
}
/* логотип */
.logo {
display: block;
float: left;
}
.logo span {
color: white;
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
margin: 5px 0;
text-align: center;
text-shadow: 2px 2px 1px rgba(0,0,0,.4);
}
.logo span:nth-child(odd) {
background: #EF5A42;
}
.logo span:nth-child(even) {
background: #F8B763;
}
/* меню */
#menu {
float: right;
}
#menu li {
display: inline-block;
margin-right: 30px;
}
#menu a {
color: #111;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
display: block;
line-height: 40px;
}
#menu a:hover {
color: #EF5A42;
}
#menu li:last-child {
margin-right: 0;
}
/* форма поиска */
#searchform {
float: right;
margin-left: 46px;
display: inline-block;
position: relative;
}
#searchform input {
width: 170px;
float: left;
border: none;
padding-left: 10px;
height: 40px;
overflow: hidden;
outline: none;
color: #9E9C9C;
font-style: italic;
}
#searchform button {
background: transparent;
height: 40px;
border: none;
position: absolute;
right: 10px;
color: #EF5A42;
cursor: pointer;
font-size: 18px;
}
#searchform input:focus {
outline: 2px solid #EBEBE3;
}
/* кнопка переключения меню, появляющаяся при ширине 768px */
.nav-toggle {
display: none;
position: relative;
float: right;
width: 40px;
height: 40px;
margin-left: 20px;
background: #EF5A42;
cursor: pointer;
}
.nav-toggle span {
display: block;
position: absolute;
top: 19px;
left: 8px;
right: 8px;
height: 2px;
background: white;
}
.nav-toggle span:before, .nav-toggle span:after {
content: «»;
position: absolute;
display: block;
left: 0;
width: 100%;
height: 2px;
background: white;
}
.nav-toggle span:before {
top: -10px;
}
.nav-toggle span:after {
bottom: -10px;
}
/* класс, который будет добавлен в верхнему меню при нажатии на кнопку и покажет скрытое меню*/
#menu.active {
max-height: 123px;
}

8. Стили для блока с основным содержимым

/* левый контейнер */
.posts-list {
margin-bottom: 30px;
width: 64%;
float: left;
}
/* блок для статьи */
.post {
margin-bottom: 35px;
}
.post-content p {
line-height: 1.5;
padding-bottom: 1em;
}
.post-image {
margin-bottom: 30px;
}
.category {
margin-bottom: 15px;
}
.category a {
color: #F8B763;
text-transform: uppercase;
}
.post-title {
margin-bottom: 12px;
font-size: 26px;
}
/* блок с кнопкой «продолжить чтение» и кнопками социальных сетей */
.post-footer {
border-top: 1px solid #EBEBE3;
border-bottom: 1px solid #EBEBE3;
position: relative;
margin-top: 15px;
}
.more-link {
position: relative;
display: inline-block;
font-size: 10px;
text-transform: uppercase;
color: white;
line-height: 44px;
padding: 0 22px;
background: #3C3D41;
letter-spacing: 0.1em;
white-space: nowrap;
}
.more-link:after {
content: »;
display: block;
position: absolute;
width: 0;
height: 0;
top: 0;
right: 0;
border: solid transparent;
border-width: 22px 18px;
border-left-color: #3C3D41;
transform: translateX(100%);
}
.post-social {
position: absolute;
left: auto;
top: 50%;
right: 0;
text-align: right;
transform: translateY(-50%);
padding: 0;
font-size: 12px;
}
.post-social a {
display: inline-block;
margin-left: 8px;
color: #F8B763;
width: 25px;
height: 25px;
line-height: 23px;
text-align: center;
border-radius: 50%;
border: 1px solid;
}

9. Стили для боковой колонки

/* правый контейнер */
aside {
width: 33%;
float: right;
}
/* блок для виджетов */
.widget {
padding: 20px 15px;
background: white;
font-size: 13px;
margin-bottom: 30px;
box-shadow: 3px 3px 1px rgba(0,0,0,.05);
}
.widget-title {
font-size: 18px;
padding: 10px;
margin-bottom: 20px;
text-align: center;
border: 2px solid #F8B763;
box-shadow: 3px 3px 0 0 #F8B763;
}
.widget-category-list li {
border-bottom: 1px solid #EBEBE3;
padding: 10px 0;
color: #c6c6c6;
font-style: italic;
}
.widget-category-list li:last-child {
border-bottom: none;
}
.widget-category-list li a {
color: #626262;
margin-right: 6px;
font-style: normal;
}
.widget-category-list li a:before {
content: «\f105»;
display: inline-block;
font-family: ‘FontAwesome’;
margin-right: 10px;
color: #c6c6c6;
}
.widget-posts-list li {
border-top: 1px solid #EBEBE3;
padding: 15px 0;
}
.widget-posts-list li:nth-child(1) {
border-top: none;
}
.post-image-small {
width: 30%;
float: left;
margin-right: 15px;
}
.widget-post-title {
float: left;
}
/* форма подписки */
#subscribe {
position: relative;
width: 100%;
padding: 15px 0;
}
#subscribe input {
width: 100%;
display: block;
float: left;
border: 2px solid #EBEBE3;
padding: 0 0 0 10px;
height: 40px;
position: relative;
outline: none;
color: #9E9C9C;
font-style: italic;
}
#subscribe button {
padding: 0 15px;
background: transparent;
height: 40px;
border: none;
position: absolute;
right: 0;
color: #EF5A42;
cursor: pointer;
font-size: 18px;
}
#subscribe input:focus + button {
background: #EF5A42;
color: white;
}

10. Стили для нижнего колонтитула

Подвал сайта разделим на три равных столбца:

footer {
padding: 30px 0;
background: #3C3D41;
color: white;
}
.footer-col {
width: 33.3333333333%;
float: left;
}
.footer-col a {
color: white;
}
.footer-col:last-child {
text-align: right;
}
.social-bar-wrap {
text-align: center;
}
.social-bar-wrap a {
padding: 0 7px;
font-size: 18px;
}

11. Медиа-запросы

@media (max-width: 768px) {
/* показываем кнопку для переключения верхней навигации */
.nav-toggle {
display: block;
}
header {
padding: 10px 0;
}
/* скрываем верхнее меню, отменяем обтекание, позиционируем его, сместив на высоту шапки сайта */
#menu {
max-height: 0;
background: white;
float: none;
position: absolute;
overflow: hidden;
top: 63px;
right: 0;
left: 0;
margin: 0;
padding: 0;
z-index: 3;
}
/* делаем элементы списка блочными, чтобы они располагались друг под другом */
#menu li {
display: block;
text-align: center;
border-bottom: 1px solid #EBEBE3;
margin-right: 0;
}
/* отменяем обтекание левой и правой колонок, устанавливаем им ширину 100%*/
.posts-list, aside {
width: 100%;
float: none;
}
.widget-post-title {
font-size: 1.5em;
}
}
@media (max-width: 480px) {
/* отменяем обтекание для логотипа и выравниваем по центру*/
.logo {
float: none;
margin: 0 auto 15px;
display: table;
}
.logo span {
margin: 0 2px;
}
/* позиционируем меню на увеличившуюся высоту шапки */
#menu {
top: 118px;
}
/* позиционируем форму поиска по левому краю */
#searchform {
float: left;
margin-left: 0;
}
/* убираем верхнюю и нижнюю границы и выравниваем кнопку по центру */
.post-footer {
border-top: none;
border-bottom: none;
text-align: center;
}
/* отменяем позиционирование кнопок соцсетей */
.post-social {
position: static;
text-align: center;
transform: none;
margin-top: 20px;
}
.widget-post-title {
font-size: 1.2em;
}
/* отменяем обтекание для столбцов подвала страницы */
.footer-col {
float: none;
margin-bottom: 20px;
width: 100%;
text-align: center;
}
.footer-col:last-child {
text-align: center;
margin-bottom: 0;
}
}

12. Скрипт для мобильного меню

<script>
$(‘.nav-toggle’).on(‘click’, function(){
$(‘#menu’).toggleClass(‘active’);
});
</script>

Источник: html5book.ru

Вы определённо впечатлили шефа, того и гляди об ногу начнёт тереться… А потом ещё более сложных задач накидает. О, так и есть, новые правки подъехали:

Хочется как-то выделить подзаголовки. Может, подчеркнуть, с отступами поиграться…

Решить задачу, казалось бы, просто: ищем CSS-правило для подзаголовков и добавляем в него нужные свойства. Но таких правил в стилях ещё нет, поэтому придётся создавать их с нуля. Что ж, пора знакомиться с селекторами.

Селектор указывает, к каким тегам применятся свойства из CSS-правила. Проще всего работают селекторы по тегам: они выбирают все теги с подходящим именем. Например:

p { color: red; }

В примере селектором является p, и он выбирает все теги с именем p (то есть теги <p>), а теги с другим именем, например h1, не выбирает.

На нашем сайте подзаголовки размечены тегами с именем h2, и нам нужно оформить все эти теги. Селектор по тегу для этого отлично подойдёт, ведь он выберет все эти теги.

Итак, наш план. Вы создаёте новое пустое CSS-правило для подзаголовков:

нужное_имя_тега {

}

Мы подбираем свойства и значения, вы добавляете их в своё CSS-правило.

Источник: htmlacademy.ru

Имеем сайт на Ja Purity II. Имеем галерею на PhocaGallery. Не могу настроить фон сайта через «Суффикс класса страницы». Где впмсывать суфикс в админке нашел, более или менее разоюоался что нужно вписывать, но конкретно в каком месте CSS шаблона не могу понять. Ткните пальцем где это правится?


Фон между фото должен бфть такой же как и в шапке.

/*
#————————————————————————
  JA Purity II for Joomla 1.5
#————————————————————————
#Copyright (C) 2004-2009 J.O.O.M Solutions Co., Ltd. All Rights Reserved.
#@license — GNU/GPL, http://www.gnu.org/copyleft/gpl.html
#Author: J.O.O.M Solutions Co., Ltd
#Websites: http://www.joomlart.com — http://www.joomlancers.com
#————————————————————————
*/

/* COMMON STYLE
——————————————————— */
  /*секция для формирования стиля галлереи*/
  

body  {
background: #fff;
color: #000;
font-family: «Segoe UI», Arial, Helvetica, sans-serif;
line-height: 1.5;
}

body#bd { background: #fff; color: #333; }

body.fs1 { font-size: 10px; }
body.fs2 { font-size: 11px; }
body.fs3 { font-size: 12px; }
body.fs4 { font-size: 13px; }
body.fs5 { font-size: 14px; }
body.fs6 { font-size: 15px; }

/* Normal links —*/
a { color: #069; text-decoration: underline; }

a:hover, a:active, a:focus { color: #333; text-decoration: underline; }

/* Readon links —*/
a.readon {
background: url(../images/arrow.png) no-repeat 5px 48%;
border: 1px solid #F6F6F6;
font-weight: bold;
padding: 1px 5px 1px 14px;
text-decoration: none;
text-transform: uppercase;
}

a.readon:hover, a.readon:active, a.readon:focus { background-color: #fff; border: 1px solid #ccc; }

/* Content spacing —*/
.column p, .column pre, .column blockquote,
.column h1, .column h2, .column h3, .column h4, .column h5, .column h6,
.column ol, .column ul { margin: 15px 0; padding: 0; }

/* Headings & Titles —*/
h1 { font-size: 180%; }
h2 { font-size: 150%; }
h3 { font-size: 125%; }
h4 { font-size: 100%; text-transform: UPPERCASE; }
h5 { font-size: 100%; }

.contentheading, .componentheading, h1, h2, h3, h4, h5 {
font-family: «Segoe UI», Arial, Helvetica, sans-serif;
font-weight: bold;
line-height: 1.2;
}

h1.componentheading, .componentheading { margin: 0; padding: 0 0 7px; }

.componentheading {
border-bottom: 1px solid #ccc;
font-size: 180%;
}

h2.contentheading, .contentheading { margin: 0; padding: 0 0 7px; }

.contentheading { font-size: 200%; }

.blog .contentheading { font-size: 125%; }

a.contentpagetitle,
a.contentpagetitle:hover,
a.contentpagetitle:active,
a.contentpagetitle:focus { font-weight: bold; }

.category { font-size: 110%; font-weight: bold; }

/* Small text —*/
small, .small, .smalldark, .createby, .createdate, .modifydate, .img_caption, .contenttoc,
p.site-slogan, a.readon, .ja-navhelper, #ja-footer { font-size: 92%; }

small, .small { color: #999; }

.smalldark { text-align: left; }

/* List —*/
.column ul li {
background: url(../images/bullet.gif) no-repeat 20px 7px;
line-height: 160%;
margin-bottom: 5px;
overflow: hidden;
padding-left: 30px;
}

.column ol li { line-height: 180%; margin-left: 30px; }

/* Others —*/
th { font-weight: bold; padding: 5px; text-align: left; }

td { font-size: 100%; padding: 5px; }

fieldset { border: none; padding: 10px 5px; }

fieldset a { font-weight: bold; }

fieldset.input { padding: 0; }

hr {
border-bottom: 0;
border-left: 0;
border-right: 0;
border-top: 1px solid #ccc;
height: 1px;
}

/* FORM
——————————————————— */
form label { cursor: pointer; }

input, select, textarea, .inputbox {
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 100%;
padding: 3px 5px;
}

.inputbox { background: #fff; border: 1px solid #ccc; }

.inputbox:hover, .inputbox:focus { background: #FFFFCC; }

.button {
background: url(../images/grad1.gif) repeat-x top #333;
border: 1px solid #333;
color: #ccc;
font-size: 85%;
padding: 3px 5px;
text-transform: uppercase;
}

.button:hover, .button:focus {
background: #333;
border: 1px solid #999;
color: #fff;
}

.checkbox { }

.radio { margin: 0 5px; }

/* Login —*/
.login_form fieldset { padding: 15px 0 0; }
.login_form fieldset p { margin: 0 0 5px; }

.login_form label {
font-weight: bold;
text-align: right;
display: block;
float: left;
width: 130px;
}

.login_form .inputbox { margin-left: 10px; width: 150px; }

.login_form .remember .inputbox {
width: 20px;
}

.login_form .button { margin-left: 140px; }

/* Register —*/
.form-register fieldset { padding: 0 0 10px; }

.form-register p { margin: 0 0 5px; }

.form-register p.form-des { margin: 15px 0; }

.form-register label {
font-weight: bold;
text-align: right;
display: block;
float: left;
width: 130px;
}

.form-register .inputbox { margin-left: 10px; width: 200px; }

.form-register .button { margin-left: 140px; }

/* User —*/
.user-details { padding: 10px 0; }

.user-details p { margin: 0 0 5px; }

.user-details label {
font-weight: bold;
text-align: right;
display: block;
float: left;
width: 130px;
}

.user-details .inputbox { margin-left: 10px; width: 200px; }

.user-details .button { margin-left: 140px; }

.user-details .paramlist .paramlist_key {
width: 130px !important;
padding: 0 0 5px !important;
}

.user-details .paramlist .paramlist_value {
padding: 0 0 5px !important;
}

.user-details .user_name span {
padding-left: 10px;
font-weight: bold;
}

/* Search —*/
form#searchForm {
border-top: 1px solid #ccc;
padding: 15px 0;
}

.searchintro {
border-bottom: 1px solid #ccc;
}

.results h4 {
text-transform: none;
font-size: 110%;
margin: 15px 0 0;
}

.results p { margin: 0 0 10px; }

/* Contact —*/
#component-contact address { font-style: normal; }

#component-contact #emailForm { border-top: 1px solid #ddd; padding-top: 15px; }

.contact_email { margin: 0 0 10px; }

.contact_email label { font-weight: bold; display: block; }

.contact_email_checkbox { margin: 15px 0; }

/* Joomla STYLE
——————————————————— */
/* Layout Deco —*/
.blog { }

.article_separator,
.leading_separator,
.row_separator,
.column_separator { display: none; }

.leading {
border-bottom: 1px solid #ccc;
padding-bottom: 10px;
padding-top: 10px;
}

.article_row { padding-bottom: 10px; padding-top: 10px; }

.article_column { }

.column_separator { padding: 0 25px; }

/* Meta —*/
.article-tools {
background: #f6f6f6;
border: 1px solid #ddd;
clear: both;
color: #999;
display: block;
line-height: normal;
margin: 0 0 10px;
padding: 5px;
position: relative;
}

.article-meta { float: left; padding: 0; width: 70%; }

.article-section, .article-category { color: #999; }

.createby {
background: url(../images/icon-user.gif) no-repeat 0 2px;
padding: 3px 3px 3px 20px;
}

.createdate {
background: url(../images/icon-date.gif) no-repeat 0 2px;
padding: 3px 3px 3px 20px;
}

.modifydate { color: #999; display: block; margin: 10px 0; }

.contentdescription {
border-bottom: 1px solid #ccc;
display: block;
margin: 0 -15px;
padding: 10px 15px;
}

.contentdescription p { margin: 0; }

.buttonheading { float: right; }

.buttonheading img { border: 0; float: right; margin: 0 5px 0 0; }

/*Inline images —*/
img.caption { margin-top: 5px; }

.img_caption { color: #999; margin-bottom: 10px; }

.article-content img { margin: 5px; }

.img_caption img { margin: 5px 0 0; }

.img_caption p {
background: #333;
border-top: 1px solid #fff;
color: #ccc;
margin: 0;
padding: 1px 0;
text-align: center;
}

/* Tables —*/
.sectiontableheader {
background: #333;
border: 1px solid #ccc;
color: #fff;
padding: 5px;
}

.sectiontableheader a,
.sectiontableheader a:hover,
.sectiontableheader a:focus,
.sectiontableheader a:active { color: #fff; }

.sectiontableentry,
.sectiontableentry0,
.sectiontableentry1,
.sectiontableentry2 {
background: url(../images/dot2.gif) repeat-x bottom;
padding: 5px 5px 6px;
}

.sectiontableentry:hover,
.sectiontableentry0:hover,
.sectiontableentry1:hover,
.sectiontableentry2:hover { background-color: #fffff0; }

.sectiontableentry2 { background-color: #f6f6f6; }

table.contentpane, table.tablelist { width: 100%; }

table.contentpaneopen {
border: none;
border-collapse: collapse;
border-spacing: 0;
}

/* Content Toc */
table.contenttoc {
border: 1px solid #ddd;
float: right;
margin: 0 0 10px 12px;
padding: 0;
width: 30%;
}

table.contenttoc a { color: #333; }

table.contenttoc td { border-bottom: 1px dotted #ccc; padding: 5px 10px; }

table.contenttoc th {
background: #f6f6f6;
border-bottom: 1px solid #ddd;
padding: 5px 10px;
text-transform: uppercase;
}

/* Poll */
div.poll { padding: 15px 0; }

form#poll {
border-bottom: 1px dotted #ccc;
font-weight: bold;
margin-bottom: 10px;
padding-bottom: 10px;
}

dl.poll {
border-bottom: 1px dotted #ccc;
font-size: 92%;
margin-bottom: 10px;
padding-bottom: 10px;
}

dl.poll dt, dl.poll dd { float: left; }

dl.poll dt { clear: left; width: 100px; }

dl.poll dd { clear: right; }

table.pollstableborder {
border: none;
padding: 0;
text-align: left;
width: 100%;
}

table.pollstableborder img { vertical-align: baseline; }

table.pollstableborder td {
background: #f6f6f6;
border-bottom: 1px solid #ccc;
font-weight: bold;
padding: 5px !important;
}

table.pollstableborder tr.sectiontableentry0 td,
table.pollstableborder tr.sectiontableentry1 td { background: #fff; font-weight: normal; }

/* Search */
table.searchintro { padding: 10px 0; width: 100%; }

table.searchintro td { padding: 5px !important; }

/* Misc. */
table.contentpaneopen, table.contentpane, table.blog { width: 100%; }

/* Pagination —*/
ul.pagination { float: left; margin: 10px 0; width: 75%; }

ul.pagination li {
background: none;
display: inline;
margin: 0;
padding: 0;
overflow: hidden;
}

ul.pagination li span { padding: 0 5px; line-height: 20px; }

ul.pagination a {
background: #f6f6f6;
border: 1px solid #ccc;
color: #000;
line-height: 20px;
padding: 0 5px;
text-decoration: none;
}

ul.pagination a:hover, ul.pagination a:active, ul.pagination a:focus {
background: #069;
border: 1px solid #069;
color: #fff;
text-decoration: none;
}

.sortby { font-size: 92%; margin: 10px 0 5px; }

.sortby .filter, .sortby .display { float: left; width: 40%; }

.sortby .display { float: right; text-align: right; }

.pagenavbar { font-weight: bold; }

.pagenavcounter { margin: 15px 0 !important; text-align: center; }

.counter {
float: right;
line-height: 1;
margin: 15px 0 !important;
text-align: right;
width: 24%;
}

.counter span {
background: #069;
border: 1px solid #069;
color: #fff;
padding: 1px 5px;
}

.blog_more {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: 15px 0 5px;
}

.blog_more h2 {
font-size: 115%;
margin: 0 0 5px;
text-transform: uppercase;
}

.blog_more ul li {
background: url(../images/bullet.gif) no-repeat 5px 6px;
padding-left: 15px;
}

div.back_button a,
div.back_button a:hover,
div.back_button a:active { display: block; margin: 10px 0; }

/* Messages —*/
#system-message { margin: 0 -15px 10px; }

#system-message dd.message ul,
#system-message dd.error ul,
#system-message dd.notice ul { margin: 0; padding: 0; }

#system-message dd.message ul li,
#system-message dd.error ul li,
#system-message dd.notice ul li {
background: none;
color: #fff;
margin: 0;
padding: 5px;
}

/* System Standard Messages */
#system-message dd.message ul { background: #069; border: 0; }

/* System Error Messages */
#system-message dd.error ul { background: #bf0000; border: 0; }

/* System Notice Messages */
#system-message dd.notice ul { background: #333; border: 0; }

/* Tooltips — */
.tool-tip {
background: #ffffcc;
border: 1px solid #D4D5AA;
float: left;
max-width: 300px;
padding: 5px;
z-index: 1000;
}

.tool-title {
background: url(../../system/images/selector-arrow.png) no-repeat;
font-size: 100%;
font-weight: bold;
margin: 0;
margin-top: -15px;
padding: 0;
padding-bottom: 5px;
padding-top: 15px;
}

.tool-text { font-size: 100%; margin: 0; }

.hasTip img { border: none; margin: 0 5px 0 0; }

.contentpaneopen_edit img { vertical-align: middle; }

/* MODULE STYLES
——————————————————— */
div.ja-moduletable h3, div.moduletable h3 {
background: url(../images/dot2.gif) repeat-x bottom;
color: #333;
font-size: 115%;
margin: 0 0 8px;
padding: 1px 0 8px;
text-transform: uppercase;
overflow: hidden;
}

div.moduletable_menu h3 { margin-bottom: 0; }

div.ja-moduletable, div.moduletable {
border-bottom: 1px solid #ccc;
margin-top: 8px;
margin-bottom: 15px;
padding: 0 0 20px;
position: relative;
}

/* Badge Module —*/
.badge {
height: 46px;
position: absolute;
right: 0;
top: 0;
width: 45px;
background-image: url(../images/icon-badge.png);
background-repeat: no-repeat;
}

.badge-hot .badge { background-position: 0 0; }
.badge-new .badge { background-position: 0 -46px; }
.badge-pick .badge { background-position: 0 -92px; }
.badge-top .badge { background-position: 0 -138px; }

/* Search Module —*/
#ja-search {
padding-left: 20px;
background: url(../images/icon-search.gif) no-repeat center left;
position: absolute;
bottom: 15px;
right: 15px;
}

#ja-search label { display: none; }

#ja-search .inputbox {
width: 200px;
border: 1px solid #333;
padding: 3px 5px;
color: #ccc;
background: #444;
font-size: 100%;
font-weight: bold;
}

#ja-search .inputbox:hover, #ja-search .inputbox:focus { }

#ja-search .button {
font-size: 100%;
font-weight: bold;
margin-left: 5px;
text-transform: none;
}

/* Login Module —*/
#form-login-username .inputbox,
#form-login-password .inputbox {
background-position: 5px center;
background-repeat: no-repeat;
font-weight: bold;
}

#form-login-username .inputbox, #form-login-password .inputbox { width: 90%; }

#form-login ul { margin: 0 !important; padding: 0; }

#form-login p { margin: 0 0 5px; }

#form-login .button { margin: 10px 0; }

/* Poll Module —*/
h4.poll-title { margin: 0; padding: 0; }

a.poll-result { font-size: 92%; text-transform: uppercase; }

form.poll .button { margin-right: 5px; }

/* Advertisement —*/
div.bannergroup_text div.banneritem_text { border-bottom: 1px dotted #ccc; padding: 5px 0; }

div.bannergroup_text div.banneritem_text a { font-weight: bold; }

div.bannergroup_text div.bannerheader,
div.bannergroup_text div.bannerfooter_text a { color: #999; font-size: 92%; }

div.bannergroup_text div.bannerfooter_text { padding: 5px 0 0; text-align: right; }

div.bannergroup { margin-bottom: 10px; }

/* Rounded Module — */
div.ja-module h3, div.module h3 {
border-bottom: 1px solid #ccc;
color: #7ba566;
font-size: 115%;
font-weight: bold;
margin: 0 -15px 10px;
padding: 8px 15px;
text-transform: uppercase;
}

div.ja-module, div.module { margin-bottom: 20px; position: relative; overflow: hidden; }

.ja-box-br {
background: url(../images/b-br.gif) no-repeat bottom right #fff;
}

.ja-box-bl {
background: url(../images/b-bl.gif) no-repeat bottom left;
}

.ja-box-tr {
background: url(../images/b-tr.gif) no-repeat top right;
}

.ja-box-tl {
background: url(../images/b-tl.gif) no-repeat top left;
padding: 0 15px 10px;
}

/* text */
div.module_text h3 {
clear: both;
display: block;
margin: 0 0 10px;
padding: 0;
overflow: hidden;
width: 100%;
border-bottom: 0;
}

div.module_text span {
clear: both;
display: block;
float: left;
font-weight: bold;
padding: 0 3px;
background: #fff;
}

div.module_text {
background: url(../images/bt-br.gif) no-repeat bottom right #f6f6f6;
}

div.module_text .ja-box-bl {
background: url(../images/bt-bl.gif) no-repeat bottom left;
}

div.module_text .ja-box-tr {
background: url(../images/bt-tr.gif) no-repeat top right;
}

div.module_text .ja-box-tl {
background: url(../images/bt-tl.gif) no-repeat top left;
}

/* Blank */
div.module_noborder,
div.module_noborder .ja-box-bl,
div.module_noborder .ja-box-tr,
div.module_noborder .ja-box-tl {
background: none;
padding: 0;
}

/* red */
div.module_red {
background: url(../images/br-br.gif) no-repeat bottom right #bf0000;
}

div.module_red .ja-box-bl {
background: url(../images/br-bl.gif) no-repeat bottom left;
}

div.module_red .ja-box-tr {
background: url(../images/br-tr.gif) no-repeat top right;
}

div.module_red .ja-box-tl {
background: url(../images/br-tl.gif) no-repeat top left;
}

/* blue */
div.module_blue {
background: url(../images/bb-br.gif) no-repeat bottom right #069;
}

div.module_blue .ja-box-bl {
background: url(../images/bb-bl.gif) no-repeat bottom left;
}

div.module_blue .ja-box-tr {
background: url(../images/bb-tr.gif) no-repeat top right;
}

div.module_blue .ja-box-tl {
background: url(../images/bb-tl.gif) no-repeat top left;
}

/* green */
div.module_green {
background: url(../images/bg-br.gif) no-repeat bottom right #7ba566;
}

div.module_green .ja-box-bl {
background: url(../images/bg-bl.gif) no-repeat bottom left;
}

div.module_green .ja-box-tr {
background: url(../images/bg-tr.gif) no-repeat top right;
}

div.module_green .ja-box-tl {
background: url(../images/bg-tl.gif) no-repeat top left;
}

/* black */
div.module_black {
background: url(../images/bl-br.gif) no-repeat bottom right #333;
}

div.module_black .ja-box-bl {
background: url(../images/bl-bl.gif) no-repeat bottom left;
}

div.module_black .ja-box-tr {
background: url(../images/bl-tr.gif) no-repeat top right;
}

div.module_black .ja-box-tl {
background: url(../images/bl-tl.gif) no-repeat top left;
}

/* text color for high contrast module */
div.module_black *, div.module_green *, div.module_blue *, div.module_red * { color: #fff !important; }

div.module_black .inputbox, div.module_green .inputbox, div.module_blue .inputbox, div.module_red .inputbox {
color: #333 !important;
}

/* Module list —*/
div.ja-moduletable ul, div.ja-module ul {
margin: 15px 0 0;
}

div.ja-moduletable ul li, div.ja-module ul li {
padding-left: 12px;
background-position: 2px 8px;
}

/* Collapsible h3 —*/
h3.show {
background: url(../images/icon-show.png) no-repeat 100% 60%;
cursor: pointer;
}

h3.hide {
background: url(../images/icon-hide.png) no-repeat 100% 60%;
cursor: pointer;
}

/* Uncomment the following lines if you want collapsible modules with badges still show arrows */
/*
.badge-hot h3.show,.badge-new h3.show,.badge-pick h3.show,.badge-top h3.show,
.badge-hot h3.hide,.badge-new h3.hide,.badge-pick h3.hide,.badge-top h3.hide {
background-position: 15px 60%;
text-indent: 15px;
}
*/

/* MAIN LAYOUT DIVS
——————————————————— */
.wrap { }
.main { }
.ja-box { padding-bottom: 10px; padding-top: 10px; }

#ja-wrapper { }

#ja-container {
background: url(../images/container-bg.gif) repeat-x top #fff;
position: relative;
z-index: 5;
border-bottom: 5px solid #ccc;
}

#ja-container .main { padding: 20px 0; min-height: 300px; }

/* 3 Columns — Classic Layout —*/
#ja-container.ja-l1r1  {}

/* Full */
#ja-container {}

/* Full left */
#ja-container.ja-r1 {}

/* Full right */
#ja-container.ja-l1 {}

/* Mass —*/
.ja-mass-top {}
.ja-mass-top .ja-moduletable, .ja-mass-top .ja-module { margin-left: 0; margin-right: 0; }

.ja-mass-bottom {}
.ja-mass-bottom .ja-moduletable, .ja-mass-bottom .ja-module { margin-left: 0; margin-right: 0; }

/* MAIN COLUMN
——————————————————— */
#ja-mainbody {}

#ja-main .inner {  }

#ja-contentwrap { }

/* Content Top —*/
.ja-content-top { }
.ja-content-top .ja-moduletable, .ja-content-top .ja-module { margin-left: 0; margin-right: 0;  }

/* Content Main —*/
.ja-content-main { }

/* Content Bottom —*/
.ja-content-bottom { }
.ja-content-bottom .ja-moduletable, .ja-content-bottom .ja-module { margin-left: 0; margin-right: 0;  }

/* @end */

/* SIDE COLUMNS
——————————————————— */
.ja-colswrap { }

.ja-col { }

/* Left Columns —*/
#ja-left .ja-l2 { }

/* Right Columns —*/
#ja-right .ja-r2 { }

/* HEADER
——————————————————— */
#ja-header { background: #333; position: relative; z-index: 10; }

#ja-header .main {
background-color: #333;
background-position: top right;
background-repeat: no-repeat;
height: 80px;
}

h1.logo, div.logo-text h1 { font-size: 250%; line-height: 1;}

h1.logo, div.logo-text { float: left; z-index: 1; position: relative; }

/* Logo Image —*/
h1.logo { height: 79px; width: 207px; }

h1.logo a {
background: url(../images/logo.gif) no-repeat left;
display: block;
height: 79px;
width: 207px;
}

h1.logo a span { position: absolute; top: -1000px; }

/* Logo Text —*/
div.logo-text { margin-top: 8px; }

div.logo-text h1 a {
color: #ccc;
font-weight: bold;
letter-spacing: 1px;
text-decoration: none;
}

p.site-slogan {
background: #444;
color: #999;
display: block;
font-size: 85%;
letter-spacing: 1px;
margin: 8px 0 0;
padding: 0 5px;
text-align: center;
text-transform: uppercase;
}

/* Header mask —*/
.ja-headermask {
background: url(../images/header-mask.png) no-repeat top right;
display: block;
height: 80px;
position: absolute;
right: -1px;
top: 0;
width: 602px;
z-index: 0;
}

/* NAVIGATION
——————————————————— */
/* Main Nav —*/
#ja-mainnav {
background: url(../images/grad1-mask.png) repeat-x top #444;
border-top: 1px solid #666;
line-height: 1;
position: relative;
z-index: 11;
}

#ja-mainnav .main { font-size: 12px; }

span.has-image {
padding-left: 25px;
display: block;
overflow: hidden;
background-repeat: no-repeat;
background-position: left 2px;
}

span.menu-title { display: block; }

span.menu-desc {
display: block;
font-weight: normal;
font-size: 92%;
color: #999;
}

/* Sub Nav —*/
#ja-subnav { border-top: 1px solid #666; background: #333; position: relative; z-index: 9; }

#ja-subnav .main {
line-height: 1;
z-index: 10;
}

#ja-subnav ul {
background: #333;
overflow: hidden;
padding: 10px 0;
}

#ja-subnav ul.active { background: #333; }

#ja-subnav li {
background: none;
border-left: 1px dotted #999;
display: block;
float: left;
padding: 0 10px 0 11px;
}

#ja-subnav li.first-item { border-left: 0; }

#ja-subnav ul li a { color: #ccc; display: block; text-decoration: none; }

#ja-subnav ul li a:hover { color: #fff; }

#ja-subnav ul li.active a,
#ja-subnav ul li.active a:hover,
#ja-subnav ul li.active a:active,
#ja-subnav ul li.active a:focus {
color: #fff;
font-weight: bold;
text-decoration: underline;
}

#ja-subnav ul.active li a { color: #ccc; }

#ja-subnav ul.active li a:hover { color: #fff; }

#ja-subnav ul li.empty { visibility: hidden }

/* Sub Nav (lv2) —*/
#ja-subnav ul li ul {
background: #ddd;
border: 1px solid #ccc;
display: block;
height: auto;
left: -999em;
padding: 0;
position: absolute;
}

#ja-subnav ul li.hover ul {
display: block;
height: auto;
left: auto;
position: absolute;
margin-top: 3px;
margin-left: 5px;
}

#ja-subnav ul li.haschild a {
background: url(../images/arrow.png) no-repeat right center;
padding-right: 12px;
}

#ja-subnav ul li.haschild a:hover {
background: url(../images/arrow3.png) no-repeat right center;
}

#ja-subnav ul li.haschild li a, #ja-subnav ul li.hover li a { background: none; padding-right: 0; }

#ja-subnav ul li ul li {
border-bottom: 1px solid #ccc;
border-left: 0;
display: block;
float: none;
overflow: hidden;
padding: 5px;
text-align: left;
}

#ja-subnav ul li ul li a {
background-image: none !important;
border: 0 !important;
color: #333 !important;
font-weight: normal !important;
text-decoration: none !important;
}

#ja-subnav ul li ul li a span.menu-title { padding-top: 3px; padding-bottom: 3px; }

#ja-subnav ul li ul li a:hover {
background-image: none !important;
color: #069 !important;
text-decoration: underline !important;
}

#ja-subnav ul li ul li a.active {
color: #069; !important;
font-weight: bold !important;
}

/* Breadcrumbs —*/
.ja-navhelper { background: #f6f6f6; text-transform: uppercase; border-bottom: 1px solid #ccc; }
.ja-navhelper .main { padding: 5px 0; }

.ja-navhelper a { padding: 0 2px; color: #069; text-decoration: none; }
.ja-navhelper a:hover, .ja-navhelper a:active, .ja-navhelper a:focus { color: #fff; text-decoration: none; background-color: #069;}

.ja-breadcrums {
float: left;
margin-left: 10px;
margin-top: 2px;
width: 80%;
}

.ja-breadcrums strong { margin-right: 5px; }

.ja-breadcrums img { margin: 1px 5px; }

/* Extras —*/
.ja-links { float: right; margin-top: 2px; }

.ja-links li { background: none; padding: 0; display: inline; }

.ja-links li.top a {
background: url(../images/arrow2.png) no-repeat 5px center;
padding-left: 17px;
padding-right: 5px;
}

.ja-links li.top a:hover { background-color: #069; }

.ja-links li.layout-switcher a {
background: #069;
color: #fff;
text-decoration: none;
}

.ja-links li.layout-switcher a:hover { background: #666; color: #fff; text-decoration: none; }

.ja-links li.user-reset a {
background: #bf0000;
color: #fff;
text-decoration: none;
}

.ja-links li.user-reset a:hover { background: #666; color: #fff; text-decoration: none; }

/* Default Joomla! Menu —*/
#ja-container ul.menu { margin: 0; padding: 0; }

#ja-container ul.menu li {
background: none;
border-bottom: 1px dotted #ccc;
margin: 0;
overflow: hidden;
padding: 0;
}

#ja-container ul.menu li a {
color: #333;
display: block;
outline: none;
padding: 6px 0;
text-decoration: none;
text-indent: 5px;
}

#ja-container ul.menu li a:hover,
#ja-container ul.menu li a:active,
#ja-container ul.menu li a:focus { color: #069; background: #f6f6f6; }

#ja-container ul.menu li.active a { color: #069; font-weight: bold; }

#ja-container ul.menu li ul { margin: 0 0 0 10px; }

#ja-container ul.menu li li {
background: url(../images/arrow.png) no-repeat left 11px;
border-bottom: 0;
border-top: 1px dotted #ccc;
}

#ja-container ul.menu li li a {
color: #333 !important;
font-weight: normal !important;
text-indent: 10px;
}

#ja-container ul.menu li li a:hover,
#ja-container ul.menu li li a:active,
#ja-container ul.menu li li a:focus { color: #069 !important; background: none; }

#ja-container ul.menu li.active > a { color: #069 !important; font-weight: bold !important; }

#ja-container ul.menu span.separator { display: none; }

/* SPOTLIGHT
——————————————————— */
#ja-topsl .ja-box, #ja-botsl .ja-box {
padding: 0;
background: url(../images/dot3.gif) repeat-y right;
}

#ja-topsl .ja-box-right, #ja-botsl .ja-box-right,
#ja-topsl .ja-box-full, #ja-botsl .ja-box-full {
background: none;
}

#ja-topsl .ja-moduletable, #ja-botsl .ja-moduletable  {
border-bottom: 0;
margin-bottom: 8px;
padding-bottom: 0;
}

#ja-topsl li, #ja-botsl li {
background-image: url(../images/bullet2.gif);
background-position: 1px 8px;
padding-left: 10px;
}

#ja-topsl ol li, #ja-botsl ol li { margin-left: 25px; padding: 0 !important; }

#ja-topsl ul, #ja-topsl p, #ja-topsl ol,
#ja-botsl ul, #ja-botsl p, #ja-botsl ol { padding: 0; margin: 0 !important; }

#ja-topsl a, #ja-botsl a {
color: #ccc;
text-decoration: none;
border-bottom: 1px dotted #ccc;
}

#ja-topsl a:hover, #ja-topsl a:active, #ja-topsl a:focus,
#ja-botsl a:hover, #ja-botsl a:active, #ja-botsl a:focus {
color: #fff;
text-decoration: none;
border-bottom: 1px solid #fff;
}

/* Top spotlight —*/
#ja-topsl {
border-top: 1px solid #666;
border-bottom: 1px solid #666;
background: #444;
color: #ccc;
}

#ja-topsl .main { padding: 10px 0; }

#ja-topsl h3 {
margin: 0 0 8px;
padding: 0;
color: #fff;
background: none;
}

/* Bot spotlight —*/
#ja-botsl {
background: #444;
color: #999;
}

#ja-botsl .main { padding: 10px 0; }

#ja-botsl .ja-moduletable, #ja-botsl .moduletable {
border-bottom: 0;
margin-bottom: 0;
}

#ja-botsl h3 {
margin: 0 0 8px;
padding: 0;
color: #fff;
background: none;
}

.ja-box-right .ja-moduletable, .ja-box-right .moduletable,
.ja-box-full .ja-moduletable, .ja-box-full .moduletable { border: 0 !important; background: 0 !important; }

/* FOOTER
——————————————————— */
#ja-footer {
background: url(../images/grad3.gif) repeat-x bottom #F6F6F6;
border-top: 1px solid #fff;
clear: both;
padding: 20px 0;
}

#ja-footer .main {
background: url(../images/dot1.gif) repeat-y 22% 0;
color: #666666;
padding: 0;
position: relative;
}

#ja-footer .inner { float: right; padding: 0; width: 75%; }

#ja-footer small { color: #666; font-size: 100%; }

/* Foot Links —*/
#ja-footer .ja-footnav {
float: right;
font-size: 100%;
margin: 0 0 10px;
overflow: hidden;
position: relative;
width: 75%;
}

.ja-footnav ul { float: left; line-height: normal; }

.ja-footnav li {
border-left: 1px solid #999;
display: block;
float: left;
padding: 0 10px;
}

.ja-footnav li a {
color: #666;
display: block;
font-weight: bold;
line-height: 1;
text-decoration: none;
text-transform: uppercase;
}

.ja-footnav li a:hover, .ja-footnav li a:active, .ja-footnav li a:focus { color: #333; }

.ja-footnav .ja-firstitem { border-left: 0; padding-left: 0; }

/* Copyright Info. —*/
.ja-copyright small { display: block; }

/* MISCELLANOUS
———————————————————— */
/* User Tools —*/
ul.ja-usertools-font {
font-size: 11px;
position: absolute;
top: 15px;
right: 20px;
}

ul.ja-usertools-font li, ul.ja-usertools-screen li {
padding: 0;
margin: 0;
display: inline;
background: none;
}

ul.ja-usertools-screen  {
font-size: 11px;
position: absolute;
top: 15px;
right: 90px;
}

/* Others —*/
#ja-banner {
border-top: 1px solid #ccc;
margin: 0;
overflow: hidden;
padding-top: 15px;
text-align: center;
width: 100%;
}

div.ja-innerdiv {
border-bottom: 1px dotted #ccc;
clear: both;
margin-bottom: 10px;
padding-bottom: 12px;
}

div.ja-innerdiv h4 {
font-family: Arial, sans-serif;
font-size: 92%;
font-weight: normal;
margin: 5px 0;
padding: 0;
text-transform: uppercase;
}

.cufon-canvas { padding: 1px 0 3px; }

Источник: joomlaforum.ru

Поддержка браузерами

12.0+ 4.0+ 1.0+ 1.0+ 3.5+ 1.0+

Описание

CSS свойство padding-top устанавливает расстояние (его также называют «внутренний отступ») между верхним внутренним краем рамки элемента и его содержимым. Внутренний отступ влияет на общий размер элемента.

Внутренний отступ может быть установлен и для блочных и для строчных элементов.

Примечание: отрицательные значения отступов не допускаются.

Значение по умолчанию: 0
Применяется: ко всем элементам кроме тех, которые относятся к типу display: table-row-group, table-header-group, table-footer-group, table-row, table-column-group и table-column
Анимируется: да
Наследуется: нет
Версия: CSS1
Синтаксис JavaScript: object.style.paddingTop=»2cm»

Синтаксис

padding-top: размер|%|inherit;

Значения свойства

Значение Описание
размер Определяет размер отступа в единицах измерения, используемых в CSS.
% Величина, указанная в процентах, вычисляется в зависимости от ширины области содержимого родительского элемента.
inherit Указывает, что значение наследуется от родительского элемента.

Пример

С помощью padding-top можно регулировать расстояние от контента до верхней границы элемента.

div#myBox {
background-color: yellow;
width: 150px;
padding-top: 0px;
}

Источник: puzzleweb.ru

Add z-index:1000 to the #header css, and add padding-top to the body css which should be a bit more than header’s height. For example, if the header’s height is 40px, put the padding-top: 50px to the body css and it should work.

unohoo

26833 silver badges1313 bronze badges

answered Jun 2 ’12 at 19:27

vivekvivek

1,70411 gold badge1515 silver badges2323 bronze badges

When you add position fixed and/or absolute to a element, it means that the element will leave the natural flow and now it belongs to «layer» that is not related to the layer where all the elements are with the natural flow of the document.

This is a great feature as now you can position those elements anywhere without worring about the rest of the page.

So, about your case. You picked the right position, fixed. Now the elements above it doesn’t see it and you have to manually add the height of this header element as a margin and/or padding to the top of the next element.

For example, if you had the following:

<div class=»header»></div>
<div class=»content»></div>

Repeating what you did add a position fixed to header and considering that it’s height is 50 px the content element would get a padding-top:50px and it should do the trick.

<style>
.header{position:fixed;top:0;height:50px;}
.content{padding-top:50px;}
</style>

Benjamin

26.4k3333 gold badges135135 silver badges252252 bronze badges

answered Oct 3 ’13 at 5:01

Vinicius SantanaVinicius Santana

2,53611 gold badge2020 silver badges3333 bronze badges

When you set the an element to have a fixed positioning, It assumes the other neighbouring elements don’t exist. Give the element you want to be fixed a larger z-index. Then to prevent the overlapping, give the element preceded by the fixed element the same padding-top as the height of the fixed element. Hope it helps.

answered Jun 25 ’18 at 17:56

answered Jun 2 ’12 at 19:26

thedrsthedrs

1,2371010 silver badges2323 bronze badges

#header {
margin-top:-38px; //solution
margin-left: 0px;
width: auto;
height: 90px;
padding: 0px;
padding-left:185px;
font-size: 35px;
color:#FFFFFF;
background-color: #f6c491;
position: fixed;
top: 0;
left: 0;
right: 0;
}

answered Oct 3 ’13 at 4:13

Not the answer you’re looking for? Browse other questions tagged css css-position or ask your own question.

Источник: stackoverflow.com