Сайт

Как сделать фиксированную шапку сайта: Фиксируем шапку сайта при прокрутке страницы.

12.07.2018

Содержание

Как закрепить шапку сайта при скролле

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

Один из них как зафиксировать шапку сайта? Я тут же решил исправить положение и написать статью, так как тема актуальная, и есть вопросы в данной области.

Вообще, существует несколько способов того, как закрепить шапку сайта при прокрутке страницы. Можно воспользоваться javascript, но я не очень силен в этой теме и только изучаю ее. Поэтому, пока, будем обходиться css. Слава Богу, зафиксировать шапку сайта (да и не только шапку, а любой другой элемент), можно «малой кровью» 🙂

На самом деле, метод фиксации элемента при прокрутке страницы очень простой, и вы удивитесь, как просто решается данная проблема.

Фиксация шапки при прокрутке страницы

Для того, чтобы зафиксировать шапку, придется создать два блока. Один — для того, чтобы была возможность центрировать шапку. А в нем дочерний, который и будет фиксироваться. Начнем…


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

Вот такая простая html структура! Теперь добавим стили!

#headerMain {
  width:920px;
  height: 195px;
  margin:0px auto;
  z-index:0;
}

#header {
  width:920px;
  height: 195px;
  background: url(../img/bg-header.jpg) no-repeat;
  position: fixed;
  z-index: 9999;
}


Теперь шапка будет зафиксирована вверху экрана и будет неподвижна при прокрутке.

Скачать исходник

Вот такая маленькая статья получилась сегодня. Если будут вопросы – пишите их в комментариях. Постараюсь помочь. До встречи на смартлендинг

Как зафиксировать позицию шапки и сайдбара сайта

Иногда бывает необходимо сделать шапку или сайдбар (а может быть и то и другое) на сайте фиксированными. То есть сколько бы Ваш посетитель не «скролил», контент будет двигаться, а фиксированный элемент всегда будет оставаться на той же самой позиции. На самом деле ничего сложного в этом нет, и сегодня я на примере покажу Вам как фиксировать позиции элементов.




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

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

Ну что же, давайте начнем!

Фиксируем позицию шапки и сайдбара на веб-странице

1. Первое, что потребуется сделать – это создать html-файл нашей страницы. Здесь я создам очень простую структуру страницы. У нее будет шапка с тремя заголовками, помещенная в тег header; сайдбар со ссылками и надписью, помещенный в тег

aside; сами ссылки навигации будут расположены в теге nav; контент страницы в теге article и футер в теге footer.

Как видите, я в примере использую html5-теги. Это не принципиально, и если Вы по какой-то причине не хотите их использовать, то можете спокойно использовать теги div, при этом присваивая им соответствующие идентификаторы. Это никоем образом не повлияет на фиксацию элементов, просто мне в данном случае удобнее использовать именно html5.

Если будете использовать теги div с идентификаторами, то тогда не забудьте сделать соответствующие изменения в файле таблицы стилей (когда мы до нее дойдем). Например, если Вы используете вместо тега

header, тег div id=”header”, то и в таблице стилей Вы будете прописывать свойства для #header{…стили…}, а не для header{…стили…}.

В качестве контента я сгенерировала специально побольше абзацев на Lorem Ipsum (ресурс для генерации текста) , чтобы у нас впоследствии была возможность поскролить и проверить фиксацию наших элементов.

Итак, вот содержимое html-файла с комментариями:

<!doctype html>
<html>
<head>
<meta charset="windows-1251">
<title>Фиксируем элементы на странице</title>
<link rel="stylesheet" href="fix.css">
</head>
<body>
<header><!--Это шапка сайта-->
<h2>Сайт с фиксированным Хедером</h2>
<h3>Эта шапка всегда останется здесь...</h3>
<h4><i>Сколько бы Вы не скролили!</i></h4>
</header>
<aside><!--Этот блок для сайдбара-->
<h3>Сайдбар нашего сайта</h3>
<nav><!--Блок для навигации-->
<ul>
<li><a href="#">Ссылка первая</a></li>
<li><a href="#">Ссылка вторая</a></li>
<li><a href="#">Ссылка третья</a></li>
<li><a href="#">Ссылка четвертая</a></li>
<li><a href="#">Ссылка пятая</a></li>
</ul>
</nav>
<p>Внимание! Этот сайдбар тоже останется на месте... ведь мы его зафиксировали</p>
</aside>
<article><!--А в этом блоке расположен контент-->
<h2>Здесь я специально помещу побольше контента, чтобы Вы могли поскролить!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at sem nec nisl ultricies dignissim quis a velit.
 Morbi volutpat, dolor nec scelerisque eleifend, ligula leo adipiscing ligula, id euismod nisi turpis in diam.
 Nam purus diam, sagittis volutpat vehicula ac, adipiscing ac urna. Aliquam rutrum dignissim accumsan. 
 Donec pulvinar sem vitae dolor sodales lobortis eget in metus. Suspendisse ac augue at mi lacinia commodo eget interdum diam.
 Praesent felis erat, mollis nec est quis, malesuada congue felis.
 Etiam condimentum tincidunt tortor, at ullamcorper enim cursus sed. 
 Quisque vehicula eros sit amet leo feugiat, in rutrum diam vulputate. 
 Praesent sit amet metus sodales, aliquam libero eget, sagittis ante. Nulla vestibulum felis id bibendum accumsan.</p>
<p>In iaculis arcu in sollicitudin pharetra. Nulla facilisi. Proin diam neque, viverra pretium mauris sit 
amet, placerat viverra orci. Integer suscipit congue odio, id egestas ipsum ultrices vel. Donec porttitor 
convallis adipiscing. Duis sollicitudin libero id sollicitudin mattis. Vestibulum pellentesque eros dui, in 
suscipit arcu elementum non. Integer sagittis nec risus ac suscipit.</p>
<p>Aenean a nunc id nunc ornare varius. Donec volutpat nisi et metus pulvinar pellentesque. 
Etiam porta mauris nec consectetur sagittis. Nunc ligula risus, sollicitudin at lacus eu, sodales vehicula quam. 
Suspendisse venenatis sapien sed rutrum laoreet. Suspendisse facilisis risus a augue facilisis scelerisque. 
Pellentesque tristique tellus ac bibendum rutrum. Etiam nulla urna, molestie id bibendum sodales, rutrum nec sapien. 
Nulla facilisi. Praesent ut enim erat. Phasellus ultrices leo id dui condimentum, et pharetra magna lacinia. 
Nulla sit amet sagittis tortor.</p>
<p>Vivamus id neque magna. Phasellus suscipit orci quis tortor accumsan, vitae vestibulum leo ultrices. 
Donec viverra lorem vel purus vestibulum suscipit. Sed congue erat tincidunt nibh ultrices tempor. 
In hac habitasse platea dictumst. Nam non pellentesque dolor. Phasellus elementum lobortis orci at posuere. 
Ut eget felis accumsan, sollicitudin ante quis, venenatis felis. Ut nec mi ornare, ultricies orci vel, pharetra odio. 
Mauris ultrices felis quis nulla ornare, volutpat facilisis libero molestie. Ut sodales pellentesque arcu. 
Ut commodo ipsum ut hendrerit semper. Ut laoreet massa risus, quis facilisis ligula ullamcorper at. 
Nullam nec velit in sem semper ornare.</p>
<p>Fusce a dictum leo, ut sagittis mi. Curabitur tempus elementum lobortis. 
Duis ultricies tincidunt enim, in porta turpis condimentum pellentesque. Nulla augue libero, accumsan nec 
imperdiet ut, hendrerit at erat. In hac habitasse platea dictumst. Suspendisse ullamcorper venenatis est non pulvinar. 
Pellentesque nec placerat elit. Maecenas sit amet mi enim. In ut velit nec leo sagittis vehicula nec a mi. 
Suspendisse ut vehicula arcu, vitae dictum magna. Maecenas odio ante, luctus nec hendrerit et, pellentesque a mi. 
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc id condimentum eros. 
Nulla lobortis congue libero, eget tincidunt dolor venenatis in. Nunc ut auctor orci.</p> 
</article>
<!--Блок футера-->
<footer><p>Футер я не фиксировала, но я думаю Вы уже поняли, как это можно сделать!</p></footer>
</body>
</html>
(adsbygoogle = window.adsbygoogle || []).push({});

 

2. Вы, наверное, обратили внимание, что файл таблицы стилей уже подключен, осталось его только создать.

Итак, создаем css-файл с именем «fix.css» (можете дать и другое имя, но тогда не забудьте его поменять в атрибуте href тега link, который подключает файл таблицы стилей) и сохраняем в том же каталоге, что и наш html-файл.

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

Давайте займемся стилями и расставим все по своим местам.

Для начала я пропишу правило, чтобы все мои html5-элементы отображались как блочные (это решение для старых браузеров, которые не поддерживают данные элементы. Если бы не используете html5-теги, то можете не писать эту строчку). Также задам правило для тега body: мы зададим ему ширину, выравнивание по центру, рамку и цвет фона.

article,aside,footer,header,nav{display:block;}
body{width:980px; margin:0 auto; border:1px solid #333; background:#ffdfbf;}

 

Теперь страница должна выглядеть вот так.

Страницу мы оцентровали, теперь давайте перейдем к стилям самой шапки.

Для того чтобы сделать нашу шапку фиксированной нам нужно задать для нее высоту, ширину и прописать position:fixed. Ширина нам в данном случае нужна такая же, как и ширина для тега body, то есть 980px, а высоту я взяла равную значению 300px.

Теперь поговорим о свойстве position. Когда для position задано значение fixed, то элемент фиксируется на определенном месте страницы. Также при значении position:fixed мы можем регулировать расположение элемента при помощи таких свойств, как top, right, bottom и left (но в случае с шапкой нам это не понадобится). Элемент с таким позиционированием привязывается к координатам окна и при прокрутке страницы остается на месте.

Также я придам нашей шапке цвет, рамку и выровняю текст, находящийся в ней по центру.

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

Добавьте этот код в Ваш css-файл:

header{height:300px; width:980px; border-bottom:1px solid #333; 
background:#ECB035; text-align:center; position:fixed;}
header h2,header h3, header h4, article p, footer p, aside p{
font-family:Arial, Helvetica, sans-serif; color:#336;}
header h2{margin-top:0px; padding-top:50px;}

 

Если мы посмотрим на нашу страницу сейчас, то увидим следующее.

3. Шапка зафиксировалась. Вы можете промотать страницу вниз и убедиться в том, что она не движется.

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

А пока давайте займемся стилями нашего сайдбара, который мы тоже собрались зафиксировать.

Нам нужно также определить для сайдбара ширину, задать ему фиксированное позиционирование, а также здесь мы воспользуемся свойством top, так как нам необходимо подкорректировать позицию блока сайдбара и сместить его под шапку (иначе он так и останется за шапкой). Я взяла для top значение 330px (300px – это высота нашей шапки и + еще 30 пикселей, чтобы шапка и сайдбар не были прилеплены друг к другу).

Это основное для позиционирования. Остальные стили придают цвет, рамку, отступы для текста, размер текста и т.д.

Добавьте вот этот код в Ваш файл таблицы стилей.

aside{position:fixed; width:200px; background:#99C; top:330px; border:1px dashed #333;}
aside h3{font-family:Arial, Helvetica, sans-serif; font-size:16px; padding:10px;}
aside p{padding-left:30px; font-size:14px; padding-right:10px;}
aside li{list-style-type:none; font-family:Arial, Helvetica, sans-serif;}
aside a{text-decoration:none; color:#FFF;}

 

И вот, что у нас получится.

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

Это очень просто исправить, ведь мы знаем высоту нашей шапки и ширину сайдбара, а также ширину страницы. Ширина страницы равна 980px, а ширина сайдбара 200. Следовательно, мы можем задать для блока с контентом ширину равную 700px и сделать отступ от левого края 230 px (30 px чтобы блок с контентом не «прилипал» к сайдбару). А зная, что высота шапки равна 300px, мы можем задать и отступ сверху в 300px (здесь мы не берем больше, потому что заголовок в начале статьи уже автоматически имеет отступ сверху).

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

Добавьте последний фрагмент кода в свой файл таблицы стилей и посмотрите результат.

article{width:700px; padding-top:300px; padding-left:230px;}
footer{text-align:center; width:980px; height:30px; background:#ECB035; margin-top:30px;}

 

Теперь можно скролить и скролить, а Ваша шапка и сайдбар всегда будут перед глазами.

На этом буду заканчивать. Исходники файлов Вы, как всегда, можете найти в Исходниках к уроку, а посмотреть эту страницу в браузере, можете нажав на кнопку «Демо» в начале урока.

Надеюсь урок был Вам полезен! Жду Ваших отзывов! Делитесь уроком с друзьями при помощи кнопок социальных сетей (буду очень признательна).

А также подписывайтесь на обновление блога, если Вы на него еще не подписаны. Дальше будет еще интереснее.

Успехов Вам, друзья, Хорошего Весеннего настроения и Удачных проектов!

С Вами была Анна Котельникова. До встречи!

Как сверстать фиксированную шапку на bootstrap? — Хабр Q&A Привет камрады. Пытаюсь сверстать шапку, с фиксированного макета. Но возникла проблемка.
Как её растянуть до ширины навигации?

Сама шапка
Скриншот верстки
HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

  <div>

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

  <div>
  	<div>
  		<nav role="navigation">
  <div>
    <!-- Brand and toggle get grouped for better mobile display -->
    <div>
      <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span>Toggle navigation</span>
            <span></span>
            <span></span>
            <span></span>
          </button>
      <a href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div>
      <ul>
        <li><a href="#">Ссылка</a></li>
        <li><a href="#">Ссылка</a></li>
        <li>
          <a href="#" data-toggle="dropdown">Dropdown <b></b></a>
          <ul>
            <li><a href="#">Действие</a></li>
            <li><a href="#">Другое действие</a></li>
            <li><a href="#">Что-то еще</a></li>
            <li></li>
            <li><a href="#">Отдельная ссылка</a></li>
            <li></li>
            <li><a href="#">Еще одна отдельная ссылка</a></li>
          </ul>
        </li>
      </ul>
      <form role="search">
        <div>
          <input type="text" placeholder="Search">
        </div>
        <button type="submit">Отправить</button>
      </form>
      <ul>
        <li><a href="#">Ссылка</a></li>
        <li>
          <a href="#" data-toggle="dropdown">Dropdown <b></b></a>
          <ul>
            <li><a href="#">Действие</a></li>
            <li><a href="#">Другое действие</a></li>
            <li><a href="#">Что-то еще</a></li>
            <li></li>
            <li><a href="#">Отдельная ссылка</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

  	</div>
  </div>

  </div>

  </body>
</html>

CSS

#header {
  background: url("/home/user/Desktop/mysite/images/header.jpg") no-repeat;
  height: 183px;

Верстка адаптивной шапки на Bootstrap

Вы здесь: Главная — CSS — CSS Основы — Верстка адаптивной шапки на Bootstrap

Верстка адаптивной шапки на Bootstrap

На этом уроке мы сделаем верстку адаптивной шапки сайта (лендинга), используя Bootstrap сетку. Если вы не знаете что это такое, советую почитать статью «Верстка PSD макета по Bootstrap 4 сетке» (часть 1 и часть 2).

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

Верстка адаптивной шапки на Bootstrap.

Для наглядности я установил в браузере расширение Bootstrap Grid, чтобы показать вам на примере шапки сайта, как распределятся 12 колонок сетки между тремя её блоками.

На больших и средних экранах:

  • номер телефона занимает 2 колонки (col-lg-2)
  • меню с ссылками — 8 колонок (col-lg-8)
  • кнопка — 2 колонки (col-lg-2)
Верстка адаптивной шапки на Bootstrap.

У вас уже должен быть в хедере подключен Bootstrap. Дальше создадим всю необходимую HTML структуру, частично используя бутстраповские и свои CSS классы.

Обернем нашу шапку в основной блок с классом header, которому зададим белый цвет шапки и сделаем нижнюю серую границу.

<header>..</header>

.header {
    border-bottom: 1px solid #f5f5f5;
    background-color: #fff;
}

По макету размер шапки сайта (ширина между двумя направляющими) равен 960 пикселей. Для фиксированной ширины контейнера, есть бутстраповский класс container. В контейнере всегда есть строка row, а в строке — столбцы col. Структура Bootstrap сетки напоминает таблицу. Элементы шапки сайта расположены в одну строку и занимают определенное количество колонок.

<div>
  <div>
    <div>номер телефона</div>
    <div>меню сайта</div>
    <div>кнопка</div>
  </div>
</div>

Внутри первого блока вставляем кликабельный номер телефона (для мобильных телефонов).

<div>
  <div>
    <a href="tel:+7499 3228580">+7 499 322-85-80</a>
  </div>
</div>

Во второй блок вставим навигационные ссылки для меню шапки. Обратите внимания, что я здесь не использую, привычные теги списков <li></li>. Считаю, что для построения одноуровневого меню — это лишний код.

<div>
  <nav>
    <a href="#">Как мы работаем</a>
    <a href="#">Преимущества</a>
    <a href="#">Отзывы</a>
    <a href="#">Тарифы</a>
    <a href="#">Партнеры</a>
    <a href="#">Отзывы</a>
  </nav>
</div>

В третий блок поместим кнопку.

<div>
    <a href="">Перезвоните мне</a>
</div>

Поместим все три блока в кастомный флекс-контейнер header__inner.

<div>..</div>

Это необходимо для выравнивания всех элементов шапки в CSS стилях.

.header__inner {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    width: 100%;
    max-width: 960px;
    height: 50px;
    margin: 0 auto;
    line-height: 50px;
}

Этот CSS код выравнивает ссылки в меню.

.topnav {
    display: flex;
    align-items: center;
    justify-content: center;
}

Как сделать шапку сайта адаптивной?

Из-за плотного заполнения пространства шапки, при уменьшении экрана элементы начинают наезжать друг на друга и ломается верстка. Просто для всех не хватает места. Лучшим решением будет , заменить широкое меню на маленькую иконку гамбургер. Можно взять готовую иконку с FontAwesome и вставить в код сразу после кнопки.

<button>
    <i></i>
</button>

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

@media screen and (max-width: 960px) {
    .topnav {
        display: none;
    }

    .topnav__btn {
        margin-right: 20px;
    }

    .topnav__icon {
         display: block;
        background: #fff;
        border: none;
        font-size: 25px;
         width: 40px;
        height: 40px;
        cursor: pointer;
        position: absolute;
        top: 6px;
        right: 10px;
    }


Верстка адаптивной шапки на Bootstrap.

Заключение

Умение эффективно пользоваться Bootstrap позволяет верстальщикам, не знающим JavaScript, взаимодействовать с пользователями. Хотите узнать об этом больше? Переходите на сайт видео-курса по Bootstrap.

  • Верстка адаптивной шапки на Bootstrap. Создано 03.02.2020 10:27:38
  • Верстка адаптивной шапки на Bootstrap. Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:
    <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Адаптивная шапка сайта (float vs flex)

Вы здесь: Главная — CSS — CSS3 — Адаптивная шапка сайта (float vs flex)

Адаптивная шапка сайта (float vs flex)

Я большой сторонник минимализма при планировании HTML структуры сайта. Любой сайт начинается с шапки и если у вас небольшое меню, то желательно логотип и навигацию, разместить в один ряд. Само собой, наша шапка должна быть адаптивной. Кроме того, сделаем нашу верстку двумя разными способами, используя технологию – float и flex. В конце статьи, сделаем вывод, как быстрее и проще сверстать адаптивную шапку.

Демонстрация шапки на float

Первый способ (float)

HTML разметка

Внутри хедера справа будет логотип, а слева навигационный блок с тремя ссылками меню. Разметка – проще некуда.

<header>
  <a href="#logo">Логотип сайта</a>
  <nav>
    <a href="#home">Главная</a>
    <a href="#contact">Контакты</a>
    <a href="#about">О нас</a>
  </nav>
</header>

CSS код

В потоке документа, ссылки, заняли бы место под логотипом, но мы меняем естественный ход событий и для логотипа прописываем float: left, а для блока nav – float: right. Как бы разводим их по разные стороны хедера.

See the Pen Адаптивная шапка сайта (float) by porsake (@porsake) on CodePen.


Делаем шапку адаптивной

На ширине экрана 500 пикселей и выше, мы отменяем обтекание float, там где оно было. После отмены, ссылки меню повели себя так, как и должны – встали в столбик. Мы получили адаптивную шапку первым способом (float).

@media screen and (max-width: 500px) {
  header a {
    float: none;
    display: block;
     text-align: left;
  }
  nav {
     float: none;
  }
}

Демонстрация шапки на flex

Второй способ (flex)

HTML разметка

Здесь нам пришлось логотип обернуть в блок с классом wrap-logo, иначе не получиться развести логотип и меню по разные стороны, меню будет прилипать к логотипу.

<header>
  <div>
  <a href="#logo">Логотип сайта</a>
  </div>
  <nav>
    <a href="#home">Главная</a>
    <a href="#contact">Контакты</a>
    <a href="#about">О нас</a>
  </nav>
</header>

CSS код

Обратите внимание, что в селекторе header, появилось много дополнительных свойств, по сравнению с флоатами.

display: flex; /* Включаем режим Flexbox. */
flex-direction: row; /* Держим элементы в строке */
justify-content: space-between; /* Распределяем элементы внутри шапки */
flex-wrap: wrap; /* Разрешаем перенос элементов на новую строку */

See the Pen Адаптивная шапка сайта (flex) by porsake (@porsake) on CodePen.

Что у нас с адаптивностью? При уменьшении экрана, блок с ссылками меню, сам переносится на новую строку и встает под логотипом. Отвечает за это свойство flex-wrap: wrap. Иными словами мы получили адаптивную шапку без медиа-запросов.

Вывод

Плюсы флексов:

На экранах смартфонов, шапка на flex-ах почти в 2 раза занимает меньше места по высоте, это огромный плюс. Мы не тратили время на медиа-запросы.

Минусы флексов:

Нам пришлось создать лишний блок, написать больше кода в стилях.

Плюсы флоатов:

Простой и понятный код.

Минусы флоатов:

Необходимость в медиа-запросах и отмены флоатов (clearfix).

Плюсов и минусов примерно одинаково. Но если вы хорошо освоите флексы, то минусов не останется. Так, что я выбираю флексы.

Адаптивная шапка сайта (float vs flex).
  • Адаптивная шапка сайта (float vs flex). Создано 07.12.2018 10:30:00
  • Адаптивная шапка сайта (float vs flex). Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:
    <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Шапка страницы | htmlbook.ru

Основная сложность с резиновым макетом это обеспечить корректное отображение на разных разрешениях, от высокого до низкого. Поскольку мы ограничили ширину контента 760 пикселами, картинку в шапке стоит разместить так, чтобы более важная часть изображения вписывалась в этот размер. На рис. 6.3 показано, как это сделать. Тёмным цветом выделена центральная часть шириной 760px, буквой А обозначены одинаковые по ширине оставшиеся фрагменты.

Рис. 6.3. Ширина шапки

Само добавление картинки в шапке делается через фоновый рисунок, который необходимо выровнять по центру элемента <header>.

header {
 display: block; /* Для старых браузеров */
 height: 405px; /* Высота шапки */
 background: url(images/header-bg.png) no-repeat center bottom;
}

В идеале рисунок должен иметь большую ширину от 2000 пикселов, тогда практически при любом разрешении монитора рисунок будет показывать центральную часть, обрезая всё, что не помещается в окно. Но беда в том, что изначально картинка не настолько широкая, а рисовать бесконечно тянущиеся по бокам чёрные полоски не хочется. Один из вариантов решения это включить повторение фона по горизонтали. Те, у кого разрешение 1280 пикселов по ширине и меньше, увидят единственную картинку, а владельцы широких мониторов смогут полюбоваться сразу несколькими животными и одновременно заходящими солнцами. Здесь важно подредактировать рисунок так, чтобы он без стыков совмещался сам с собой по горизонтали (рис. 6.4). Градиент для наглядности спрятан.

Рис. 6.4. Совмещение изображения по горизонтали

На данном рисунке место стыка обозначено стрелкой и промежутком, чтобы стык можно было заметить. Если правильно отредактировать правую и левую часть фоновой картинки, то она будет повторяться по горизонтали без видимых стыков, как один сплошной рисунок. Остаётся слегка подправить стиль, заменив значение no-repeat (без повторения) на repeat-x (повторение по горизонтали).

header {
 display: block;
 height: 405px;
 background: url(images/header-bg.png) repeat-x center bottom;
}

На этом можно считать, что фоновый рисунок в шапке готов (рис. 6.5).

Рис. 6.5. Фоновая картинка для шапки

В формате PNG-24 файл с фоном размером 1325х405 пикселов занимает около 32 Кб, а в PNG-8 с 256-цветовой палитрой, где качество градиента несколько хуже — около 15 Кб. Можно разбить фон на две составные части — градиент и картинку и сохранить каждое изображение в своём формате, что должно привести к повышению качества отображения градиента. Впрочем, 32 Кб для столь большого изображения это немного и дополнительную оптимизацию кто-то посчитает «экономией на спичках». Тем не менее, альтернативный подход к созданию шапки сайта кому-то окажется полезным, а при желании вы можете его пропустить.

Оптимизация шапки

Поскольку градиент в шапке повторяется по горизонтали, его можно вырезать из макета и установить как фоновую картинку. На рис. 6.6 показан градиент высотой 405 пикселов, подготовленный для этой цели. Формат PNG-24 не вносит искажения в изображение, а градиенты хорошо сжимает (итоговый объем 402 байта), так что в этом случае однозначно следует использовать именно его. Рамка вокруг рисунка добавлена для наглядности.

Рис. 6.6. Градиентный рисунок (header-gradient.png)

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

Рис. 6.7. Фоновая картинка с прозрачностью (header-animal.png)

Поскольку сохранение этой картинки идет в формате PNG-8, у которого только один уровень прозрачности, в отличие от 256 уровней формата PNG-24, важно обеспечить корректное наложение на градиентный фон. Для этого при сохранении в Photoshop-е надо указать цвет краёв (Matte) близкий к средней части градиента, где идёт наложение силуэта. Примерно это цвет #9de1f0. В этом случае не возникнет грязных контуров вокруг деревьев и животных, а картинка при наложении на градиент будет восприниматься как единое целое.

Два рисунка для фона шапки подготовлены, пишем код HTML.

<header>
 <div>
  <img src="images/header-title.png" alt="Как поймать льва в пустыне">
 </div>
</header>

И стиль для элемента <header> и слоя header-bg.

header {
 background: #00b0d8 url(images/header-gradient.png) repeat-x;
}
.header-bg {
 background: url(images/header-animal.png) repeat-x center bottom; 
 height: 405px; 
}

В итоге объем файлов оказался 12,5 Кб, что даже меньше ожидаемого.

Название сайта

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

  1. Использовать формат PNG-24 при сохранении прозрачности.
  2. Сохранить рисунок в формате GIF или PNG-8 с фрагментом градиента, а затем наложить рисунок на градиент так, чтобы совпадение было с точностью до пиксела.

Очевидно, что второй способ имеет ряд недостатков — изображение нельзя сдвинуть даже на пару пикселов, оно привязано к градиенту, и если его градиент изменить, придётся менять и картинку. Так что сохраняем заголовок в формате PNG-24. Код HTML останется прежним, а стили расширятся.

header {
 background: #00b0d8 url(images/header-gradient.png) repeat-x;
}
.header-bg {
 background: url(images/header-animal.png) repeat-x center bottom; 
 height: 405px; /* Высота шапки */
 text-align: center; /* Выравнивание по центру */
}
.header-bg img {
 position: relative; /* Относительное позиционирование */
 top: 40px; /* Сдвигаем картинку вниз */
}

Выравнивание по центру делается через свойство text-align, добавляемое к родителю тега <img>, а сдвиг вниз через свойство top. Чтобы это свойство сработало, необходимо для картинки задать относительное позиционирование с помощью свойства position со значением relative.

На главной странице сайта картинка с названием выводится как обычно, на остальных страницах она служит ссылкой на главную страницу. Для этого достаточно слегка изменить код:

<a href="/"><img src="images/header-title.png" alt="Как поймать льва в пустыне"></a>

Значение / у атрибута href указывает на главную страницу и работает только на веб-сервере, но никак не локально.

Окончательный код для шапки приведён в примере 6.14.

Пример 6.14. Шапка сайта

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Как поймать льва в пустыне?</title>
  <!--[if lt IE 9]>      
   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  <style>
   body { margin: 0; }
   header {
    display: block;
    background: #00b0d8 url(images/header-gradient.png) repeat-x; 
                /* Градиент */
   }
   .header-bg {
    background: url(images/header-animal.png) repeat-x center bottom; 
                /* Животные */
    height: 405px; /* Высота шапки */
    text-align: center; /* Выравнивание по центру */
   }
   .header-bg img {
    position: relative; /* Относительное позиционирование */
    top: 40px; /* Сдвигаем картинку вниз */
   }
  </style>
 </head>
 <body>
  <header>
   <div>
    <img src="images/header-title.png" alt="Как поймать льва в пустыне"
   >
   </div>
  </header>
 </body>
</html>

Как создать отзывчивый заголовок


Узнайте, как создать адаптивный заголовок с помощью CSS.


Отзывчивый Заголовок

Измените дизайн заголовка в зависимости от размера экрана. Измените размер окна браузера, чтобы увидеть эффект.

Попробуйте сами »


Создать отзывчивый заголовок

Шаг 1) Добавить HTML:

Пример


CompanyLogo

Главная страница
Контакт
О программе


Шаг 2) Добавить CSS:

Пример

/ * Стиль заголовка с серым фоном и некоторыми отступами * /
.заголовок {
переполнение: скрытое;
цвет фона: # f1f1f1;
отступов: 20 пикселей 10px;
}

/ * Стиль заголовочных ссылок * /
.header a {
float: осталось;
цвет: черный;
выравнивание текста: по центру;
обивка: 12px;
текстовое оформление: нет;
размер шрифта: 18 пикселей;
высота строки: 25 пикселей;
-радиус границы: 4 пикселя;
}

/ * Стиль логотипа ссылка (обратите внимание, что мы устанавливаем одно и то же значение line-height и font-size в предотвратить увеличение заголовка при увеличении шрифта * /
,заголовок a.logo {
размер шрифта: 25 пикселей;
вес шрифта: жирный;
}

/ * Изменить цвет фона при наведении курсора * /
.header a: hover {
цвет фона: #ddd;
цвет: черный;
}

/ * Стиль активная / текущая ссылка * /
.header a.active {
Фоновый цвет: Dodgerblue;
цвет: белый;
}

/ * Float the ссылка на раздел справа * /
.header-right {
плавать: правильно;
}

/ * Добавить медиа-запросы для реагирования — когда Экран шириной 500 пикселей или меньше, размещайте ссылки друг над другом * /
@ экран мультимедиа и (максимальная ширина: 500 пикселей) {
,header a {
float: нет; Дисплей
: блок;
выравнивание текста: слева;
}
.header-right {
float: нет;
}
}

Попробуй сам »

Совет: Чтобы узнать больше о панелях навигации, перейдите к нашему учебному пособию по CSS-панели навигации.


,
PHP — как сделать заголовок сайта кликабельным и вернуться на домашнюю страницу Переполнение стека
  1. Товары
  2. Клиенты
  3. Случаи использования
  1. Переполнение стека Публичные вопросы и ответы
  2. Команды Частные вопросы и ответы для вашей команды
  3. предприятие Частные вопросы и ответы для вашего предприятия
  4. работы Программирование и связанные с ним технические возможности карьерного роста
  5. Талант Нанимать технический талант
  6. реклама Связаться с разработчиками по всему миру

Загрузка…

  1. Авторизоваться зарегистрироваться
.
CSS — Как добавить фиксированный верхний и нижний колонтитулы для динамического содержимого на каждой странице при печати в HTML? Переполнение стека
  1. Товары
  2. Клиенты
  3. Случаи использования
  1. Переполнение стека Публичные вопросы и ответы
  2. Команды Частные вопросы и ответы для вашей команды
  3. предприятие Частные вопросы и ответы для вашего предприятия
  4. работы Программирование и связанные с ним технические возможности карьерного роста
  5. Талант Нанимать технический талант
  6. Реклама
.

Fixed And Sticky Header — плагин WordPress

Описание

Плагин WordPress с фиксированными и липкими заголовками делает заголовок или меню видимым всегда.
Это отличная функция, которая позволяет людям просматривать быстрее и проще в использовании.

В параметре настройки (Фиксированный заголовок) на панели инструментов можно добавить фиксированный цвет фона заголовка, а также цвет текста фиксированного и закрепленного заголовка, чтобы он обеспечивал достаточный контраст по отношению к цвету фона.

Фиксированные и липкие опции заголовка.
  • Добавить фиксированный заголовок (класс или идентификатор)
  • Добавить Цвет фона
  • Добавить цвет текста
  • Фиксированный свиток заголовка
Основные функции этого плагина включают в себя
  1. Исправлен заголовок после добавления класса или идентификатора в настройках плагина.
  2. Добавить цвет фона для фиксированного заголовка.
  3. Добавить цвет текста.
  4. Исправлен заголовок для данного свитка
Понравился плагин?

Пожалуйста, проголосуйте, Ваши голоса действительно имеют значение! Спасибо.

Скриншоты

  • screenshot1.png
  • screenshot2.png
  • screenshot3.png

Установка

  1. Загрузите папку с фиксированными и закрепленными заголовками в каталог / wp-content / plugins / .
  2. Активируйте плагин через меню «Плагины» в WordPress.
  3. Перейти к настройке фиксированного заголовка в настройках на приборной панели, теперь добавьте «класс» или «идентификатор» вашего заголовка и сохраните настройки.

FAQ

Как установить плагин?

Плагин прост в установке:

  1. Загрузите папку с фиксированными и закрепленными заголовками в каталог / wp-content / plugins / .
  2. Активируйте плагин через меню «Плагины» в WordPress.

В чем преимущество использования этого плагина?

Еще одним преимуществом этого простого плагина является то, что он повышает удобство использования и количество просмотров страниц вашего сайта WordPress.

Отзывы

у меня сработало. спасибо

Прост в установке и настройке, но не на вершине.

Читать все 3 отзывы

Авторы и разработчики

«Fixed And Sticky Header» — это программное обеспечение с открытым исходным кодом. Следующие люди внесли свой вклад в этот плагин.

участников ,

Добавить комментарий

Ваш адрес email не будет опубликован.