Html шапка: Шапка | HTML | CodeBasics

html — Якорь и шапка сайта

Доброго времени суток! Столкнулся с небольшой проблемой. Есть html страница, на ней расположена шапка. Под ней основной контент, который может вертикально прокручиваться. Также имеется ссылка вида

<a href='#some'>Navigate to</a>

При клике на ссылку происходит переход к элементу с id = some. Проблема в том, что header страницы закрывает верхнюю часть (у него position fixed), и получается, что элемент some перекрывается header’ом, и чтобы его увидеть ,нужно немного прокрутить страницу вверх. Если для header’a сделать display=none, то навигация происходит корректно. Вот здесь код. Подскажите пожалуйста, что нужно сделать, чтобы навигация работала корректно? Заранее спасибо!

• html
• css
• bootstrap
• header

0

body{margin: 0;}
.fixed{background: red; position: fixed; left: 0; top: 0; right: 0; height: 50px;}
.  spacer{height: 100px;}
.spacer2{height: 600px;}
#some{margin-top: -50px; padding-top: 50px;}

<div></div>
<div></div>
<div>some</div>
<a href="#some">Link</a>
<div></div>

Используйте отрицательный верхний margin и равный ему верхний padding на блоке #some, которые равны высоте фиксированного блока. Таким образом играясь с величинами можно делать также дополнительный отступ сверху при навигации.

Как вариант:

Использовать вспомогательный блок с position: relative; top: -60px;

.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}

.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.

  
 main {
  padding: 16px;
  margin-top: 30px;
  height: 1500px;
}

#anchor {
  color: red;
}

<div>
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</div>

<div>
  <a href='#anylink'>Navigate to anchor</a>

  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <div>
    <div></div>
    <p>Some text some text some text some text..</p>
  </div>
  <p>Some text some text some text some text.   .</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>

</div>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

HTML :: Подробнее о структуре html-документа

• Основные элементы разметки html-документа
• «Шапка» сайта, тег <header>
• Основное содержимое страницы, тег <main>
• «Подвал» сайта, тег <footer>
• Боковая панель сайта, тег <aside>
• Создание блоков навигации, тег <nav>
• Создание тематических разделов, тег <section>
• Выделение раздела для новости или статьи, тег <article>

Основные элементы разметки html-документа

Как мы уже знаем, любой html-документ содержит заголовок документа «head», предназначенный для хранения служебной информации, и тело документа «body», в котором располагается информация, предназначенная для вывода на экран пользователя. Однако с развитием языка HTML он все больше стал отвечать за логическую разметку документа, что привело к появлению ряда новых тегов и сформированных ими элементов: «header», <main>, «footer», «aside», «nav», «section», «article» (см. пример. №1). Все они находятся в теле документа и по необходимости делят его на логические блоки, которые соответствующим образом воспринимаются поисковыми машинами. Отметим, что своих атрибутов, за исключением глобальных, данные элементы не имеют, а браузеры по умолчанию отображают их, как блочные элементы.

HTML htmlCodes

<!-- Указываем тип документа -->
<!DOCTYPE html>
<!-- Начало документа --> 
<html>
<!-- Раздел служебной информации -->
<head>
	<!--  Соощаем браузеру кодировку документа -->
	<meta charset="utf-8">	
	<!-- Задаем базовый адрес текущего документа -->
	<base href="http://fruits.comm/">
	<!-- Заголовок страницы -->
	<title>Все о яблоках</title>
	<!-- Подключаем таблицу стилей CSS -->
	<link href="css/styles.  css" rel="stylesheet">
	<!-- Подключаем внешний js-скрипт -->
	<script src="javascript/scripts.js"></script>
</head>
<!-- Тело документа -->
<body>
		
<!-- -------------- Шапка сайта ----------------------- -->
<header>
	
	<!-- Имя сайта делаем заголовком верхнего уровня -->
	<h2>fruits.comm</h2>
	
	<!-- Другое содержимое шапки сайта  -->
	Логотип, поисковая панель и др. информация		
	
	<!--  Панель навигации по сайту  -->
	<nav> 
		<!-- Ссылки на страницы сайта -->
		<a href="apples.html">Яблоки</a>
		<a href="oranges.html">Апельсины</a>
	</nav>
	
</header> 
		
<!-- -------- Боковая панель -------------------- -->
<aside>
	
	<div>
		Например, 1-й блок для сопутствующей рекламы.
	</div>
	
	<div>
		Например, 2-й блок для сопутствующей рекламы.
	</div>
	
</aside>
<!-- ----------- Уникальный контент страницы -------------- -->
<main>
	
	<!-- Делаем разметку для статьи о яблоках -->		
	<article>
		
		<!-- Собственная шапка -->
		<header>
			<!-- Задаем собственный заголовок 2-го уровня -->
			<h3>Красные или зеленые яблоки?</h3>
			
			<!-- Внутренняя навигация по статье -->
			<nav>
				<ul>
					<li><a href="#red_apples">О красных сортах яблок</a></li>
					<li><a href="#green_apples">О зеленых сортах яблок</a></li>
				</ul>
			</nav>
		</header>
		
		<!-- ----------- 1-й раздел статьи ---------- -->
		<section>
			<!-- Задаем собственный заголовок 3-го уровня -->
			<h4>О красных сортах яблок</h4>
			<p>
				Не для кого не секрет, что красные сорта яблок. 

  
 
 ..
			</p>
		</section>
		
		<!-- ---------- 2-й раздел статьи ----------- -->
		<section>
			<!-- Задаем собственный заголовок 3-го уровня -->
			<h4>О зеленых сортах яблок</h4>
			<p>
				Зеленые сорта яблок...
			</p>
		</section>
				
		<!-- ---------- «Подвал» всей статьи ----------------------- -->
		<footer>
			
			<p>
				Дата публикации: <time datetime="2015-05-15 19:00">15 мая</time>
     		</p>
			
			<!-- Информация об авторе -->
			<address>
				Автор: Иванов Иван Иванович<br>
				Тел. +375-444-44-44 (до 23-00)
			</address> 
		</footer>
	</article>
	
	<!-- ... и другие статьи, например, о пирогах с яблоками -->
	
</main>
<!-- ---------- «Подвал» сайта ----------------------- -->
<footer>
	<!-- Информация о владельце -->
	<address>Петр Романовский, Минск, 2016-2099.</address> 
</footer>
	
</body>
</html>

Пример №1. Использование элементов структурной разметки

«Шапка» сайта, тег <header>

Элемент «header» формируется парным тегом <header> (от англ. header – шапка, верхний колонтитул) и устанавливает шапку веб-страницы или раздела. Если он выступает в роли шапки сайта, то в нем обычно располагаются имя сайта, логотип, меню, поисковая панель или дополнительная информация (см. пример №1). Кроме того, он может формировать заголовки разделов (секций) html-страницы. Внутри данного элемента запрещается располагать элемент «main» или другой элемент «header». При этом сам элемент «header» запрещается вкладывать внутрь элементов «footer» и «address».

Основное содержимое страницы, тег <main>

Элемент «main» формируется парным тегом <main> (от англ. main – главный, основной) и предназначен для выделения основного содержимого веб-страницы (см. пример №1). На странице разрешается использовать только один элемент «main», внутри которого нужно размещать уникальную информацию текущей страницы, а не повторяющиеся разделы вроде поисковой или навигационной панели сайта. Кроме того, запрещается располагать элемент внутри элементов «header», «footer», «section», «article», «nav» или «aside».

«Подвал» сайта, тег <footer>

Для размещения сведений об авторских правах, контактной информации, даты последнего обновления документа или раздела, дополнительной навигации и прочей информации, относящейся к служебной информации всего сайта или раздела, а не к основному контенту страницы или раздела, используется элемент «footer», который формируется соответствующим парным тегом <footer> (от англ. footer – нижний колонтитул, подвал). На жаргоне веб-разработчиков элемент «footer» называют «подвалом» сайта или раздела (см. пример №1).

Боковая панель сайта.

Тег <aside>

Элемент «aside» формируется парным тегом <aside> (от англ. aside – в стороне) и устанавливает боковую панель («сайдбар») веб-страницы. Боковая панель предназначается для размещения сопутствующей, дополнительной информации, которую можно удалить без ущерба для понимания основного содержимого всей страницы или раздела, но в тоже время косвенно связанной с этим содержимым (см. пример №1). Например, боковая панель может содержать блок категорий, рубрик или ссылок по данной теме, блок ссылок на архив или может содержать рекламу, тематически связанную с содержимым страницы или раздела, или даже полноценную статью. Главное, повторимся, что удаление содержимого боковой панели не должно наносить вред пониманию основного содержимого, но вместе с тем, должно быть связано с основным содержимым. При этом не рекомендуется, хотя и допускается, использовать элемент «aside» в качестве боковой панели навигации по сайту, поскольку для этих целей существует специальный элемент «nav», который описывается в следующем пункте.

Создание блоков навигации, тег <nav>

Элемент «nav» формируется парным тегом <nav> (от англ. navigation – навигация) и применяется для создания блока навигации, ссылки которого могут указывать как на разделы самого сайта, так и на внешние ресурсы (см. пример №1). Самих блоков может быть несколько и расположены они могут быть в любом месте тела документа, за исключением элемента «address». При этом рекомендуется использовать его именно в качестве основного меню, чтобы пользователи могли с его помощью свободно перемещаться по разделам сайта. Также элемент «nav» хорошо подходит для навигации по очень большой (длинной) статье, пусть даже и расположенной на одной странице, но содержащей много разделов и заголовков различных уровней.

Создание тематических разделов, тег <section>

Для того, чтобы можно было разбить веб-страницу на тематические разделы, в HTML был введен еще один элемент разметки «section». Формируется он соответствующим парным тегом <section> (от англ. section – секция, раздел). Данные тематические разделы подразумевают, как правило, наличие собственных заголовков. В качестве тематических разделов могут выступать, например, пункты данного параграфа, главы содержимого страницы или блоки с кратким описанием разделов сайта на домашней странице (см. пример №1). Отметим, что данный элемент должен применяться для явного разделения страницы на разделы, чтобы они различались по содержанию и смыслу. Разрешается использовать одни элементы «section» внутри других.

Выделение раздела для новости или статьи, тег <article>

Элемент «article» выделяет независимый фрагмент веб-страницы, который можно отнести к статье, новости, сообщению на форуме или записи комментария. При этом содержимое элемента должно быть связано с общим содержимым страницы, но также иметь и свой собственный смысл. Формируется элемент при помощи соответствующего парного тега <article> (от англ. article – статья). В данных элементах может присутствовать собственный заголовок одного из уровней h2-h6, а также собственные локальные элементы «header», «footer», «section», «nav» или «aside» (см. пример №1). Более того, разрешается использовать одни элементы «article» внутри других.

Быстрый переход к другим страницам

• Группировка элементов формы, теги <fieldset> и <legend>
• Основные элементы разметки html-документа
• Понятие файловой структуры сайта
• Вернуться к оглавлению учебника

Тег заголовка HTML

❮ Предыдущий Полный справочник HTML Далее ❯

Пример

Заголовок для <статьи>:

<статья>
  <заголовок>

Здесь заголовок

   

Автор: Джон Doe

   

Дополнительная информация здесь

 
 

Lorem Ipsum dolor set amet….