Html sidebar



Итак, шаблон — три колонки. Один сайдбар постоянной ширины для навигации, другой для, скажем,  объявлений Google или фотографий Flickr — центр для основного контента. Это обыкновенное расположение блоков для большинства сайтов и блогов, но с некоторыми отличиями от стандарта кода:

  • Боковые колонки имеют постоянный размер, а центральная растягивается между ними на весь экран
  • Центральная колонка расположена первой в коде
  • Все блоки равной высоты на весь экран
  • Минимум хаков под старые версии

Мы имеем стандартный шаблон со следующим кодом, но первым блоком контейнера идет центр:

LC width — ширина левого блока
RC width — ширина правого блока


1. Создадим фреймы

Для начала пропишем дивы шапки сайта, контейнер для основной начинки и подвал для различной информации:

Для блока контейнера выставляем отступы от краев, чтобы потом в них поместить сайдбары:

На картинке это выглядит следующим образом:

ris1

2. Добавление колонок

Теперь добавим колонки к существующему коду:

И отредактируем стили. Выставим ширину и позиционирование. Также добавим очищение позиционирования для подвала чтобы сохранить стилистику:

Отмечу что 100% ширина на центральной колонке относится к контейнеру div, но исключая отступы. Блоки выстраиваются по очереди, но поскольку центр занимает 100% ширины левая и правая колоки располагаются после центра, ниже.


ris2

3. Расстановка боковых колонок по местам

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

Теперь левая колонка накладывается на колонку центра, по ее левому краю и выглядит это так:

ris3

Чтобы выдвинуть остальную часть левую колонки, мы будем использовать относительное расположение с погашением, это — точно ширина левой колонки.

ris4

4. Устанавливаем правую колонку на место.

Левая колонка встала на свое место, теперь возьмемся за правую. Чтобы ее поставить на место мы должны установить отрицательный отступ справа по примеру левой колонки.


Теперь все колонки на своих местах, выстроены в линию и выглядит это так:

ris5

5. Немного улучшим дизайн.

Если размер окна браузера не на полный экран то центр сужается до непонятного размера и может быть вообще меньше боковых колонок. Чтобы это предотвратить зададим минимальную ширину блока равную сумме двойной ширины левой колонки и правой колонки. в IE6 эта функция к сожалению не работает…

Но мы используем хак для совместимости с IE6

Отступы внутри sidebar…

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

LC fullwidth — padding — Полная ширина левой колонки без отступа.
LC fullwidth — полная ширина левой колонки.


Отступы центра требует немного большей изобретательности. Отступы центра плюс ширина 100 % заставляет колонку центра расширяться вне своей ширины контейнера. Чтобы вернуть это место назад, нужно увеличить край общей суммой отступов. Это гарантирует, что колонка центра будет такого же размера как нам нужно. Сделаем отступ с каждой стороны по 10px+10px=20px, также по 10px+10px от центрального блока до сайдбаров. Итого 40px. Отступы снизу и сверху ставятся без проблем любого размера.

arozhk.ru

Значение и применение

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


 <article> <!-- начало статьи --> 	<p>Сегодня мы с семьей пересматривали фильм "Один дома 2"...</p> 		<aside> <!-- отступление (выносим информацию, например, на поля) --> 			<p>В одной из сцен фильма снялся будущий президент <abbr title = "Соединенные штаты Америки">США</abbr> - <i>Дональд Трамп</i></p> 		</aside>  </article> <!-- конец статьи --> 
Пример размещения тега <aside> на странице.
Пример размещения тега <aside> на странице.

Тег <div> имеет довольно общий характер — это просто элемент на уровне блока, используемый для разбиения страницы на разделы. Одна из целей HTML 5 заключается в предоставлении в распоряжение разработчиков широкого выбора из других, семантически более осмысленных тегов.

Рис. 43 Человек, который использует только тег <div>.
Рис. 43 Человек, который использует только тег <div>.

HTML 5 включает в себя множество различных тегов, чьи имена отражают тип их содержимого, и эти теги могут использоваться вместо тега <div>. HTML 5 предлагает новые блочные семантические элементы для определения различных частей веб-страницы, вы можете детально с ними познакомиться в статье учебника HTML 5 «Теги разметки страницы».

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


Рассмотрим пример в котором сделаем простую разметку для сайта, используя современный стандарт гипертекстовой разметки HTML5.

 <!DOCTYPE html> <html> 	<head> 		<title>Разметка страницы</title> 	</head> 	<body> 		<header style = "background-color:khaki; height:100px"> 			<p>Верхний колонтитул (тег <header>)</p> 		</header> 		<nav style = "background-color:coral; height:75px"> 			<a href = "#">Ссылка 1</a> | 			<a href = "#">Ссылка 2</a> | 			<a href = "#">Ссылка 3</a> | 		<p>Панель навигации (тег <nav>)</p> 		</nav> 		<aside style = "float:right; width:200px; height:250px; background-color:tan"> 			<p>Справа мы разместили тег <aside></p> 		</aside> 		<main style = "height:250px"> 			<h1>Главный заголовок сайта</h1> 			<p>Основное содержимое (тег <main>)</p> 			<section style = "background-color:grey; height:75px"> 				<h2>Заголовок второго уровня</h2> 				<p>Раздел 1 (тег <section>)</p> 			</section> 			<section style = "background-color:grey; height:75px"> 				<h2>Заголовок второго уровня</h2> 				<p>Раздел 2 (тег <section>)</p> 			</section> 		</main> 		<footer style = "background-color:khaki; height:80px"> 			<p>Нижний колонтитул (подвал) тег <footer></p>  			<address>Пример с сайта basicweb.ru</address> 		</footer> 	</body> </html> 

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

И так по порядку, что мы сделали в этом документе:

  • Для элемента <header>html5 (верхний колонтитул) мы задали цвет заднего фона khaki и установили высоту элемента равную 100 пикселям.
  • Следующим на странице мы разместили элемент <nav>html5 (навигация), для которого задали те же встроенные CSS свойства, но указали цвет заднего фона coral, а высоту элемента 75 пикселей.
  • Далее мы разместили элемент <aside>html5, который мы сделали плавающим и сместили в правую сторону (CSS свойство float со значением right), задали ему цвет заднего фона (tan), ширину (200 пикселей) и высоту (250 пикселей). Как вы можете заметить другие элементы его обтекают, не смотря на то, что они блочные. Таким образом происходит верстка плавающими элементами. Подробно изучить работу с плавающими элементами вы можете в учебнике CSS в статье «Плавающие элементы».

  • Добавили на страницу элемент <main>html5 в который мы добавили заголовок первого уровня (тег <h1>). Прдеполагается, что внутри этого элемента будет содержаться основной контент.
  • Внутри элемента <main>html5 мы добавили два тематических раздела (тег <section>html5), поместили внутри этих элементов заголовки второго уровня (тег <h2>), задали им цвет заднего фона grey и высоту блоков по 75 пикселей.
  • После основного содержимого мы разместили элемент <footer>html5 (нижний колонтитул), по аналогии с предыдущими элементами задали ему цвет заднего фона (khaki) и высоту (80 пикселей). Внутри него разместили тег <address>, в котором указали контактные данные, которые по умолчанию отображаются курсивом.

Результат нашего примера:

Разметка страницы на HTML 5

Разметка страницы на HTML 5.

Значение CSS по умолчанию

 aside { display: block; } 

Поддержка глобальных атрибутов

Элемент поддерживает «глобальные атрибуты».

basicweb.ru

topВ сегодняшней статье мы собираемся создать страницу блога, используя техники нового поколения – HTML5 и CSS3. Статья продемонстрирует вам процесс разработки веб-сайтов, после того как окончательно утвердят спецификации и поставщики браузеров начнут их поддерживать. Если вы знакомы с HTML и CSS, то вам будет легко продолжить обучение.

Что мы собираемся создавать

Вот так будет выглядеть наша страница, когда мы закончим:

rezult

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


HTML 5

HTML 5 является следующей версией HTML. Он включает в себя множество новых элементов, которые сделают наши страницы более семантическими. Это значительно облегчит навигацию по странице для поисковых систем и голосовых модулей. Кроме того, HTML 5 также будет включать API для рисования графиков на экране, хранения данных на клиенте, технологию drag-and-drop, и многое другое. Давайте начнем разметку для нашего блога.

Основная структура

Прежде чем мы создадим разметку страницы, нужно представить общую структуру:

basic

В HTML5 есть специальные тэги для создания разметки заголовка, навигации, сайдбара и подвала. Сначала взгляните на разметку, а затем я объясню, что это значит:

  <!doctype html>   <html>   <head>    <title>Page title</title>   </head>   <body>    <header>    <h1>Page title</h1>    </header>    <nav>    <!-- Navigation -->    </nav>    <section id="intro">    <!-- Introduction -->    </section>    <section>    <!-- Main content area -->    </section>    <aside>    <!-- Sidebar -->    </aside>    <footer>    <!-- Footer -->    </footer>      </body>   </html>   

Это выглядит как обычная HTML-разметка, но есть несколько моментов, которые стоит отметить:

  • В HTML 5, есть только один doctype. Он объявляется в начале страницы через <!doctype html!>. Он просто сообщает браузеру, как интерпретировать HTML-документ.
  • Новый тэг header, является контейнером для вступительных элементов, таких как заголовок или логотип. Он также может содержать оглавление или поисковую форму. Каждый заголовок обычно содержит теги заголовков от <h1> до <h6>. В данном случае заголовок используется только для представления страницы, немного позднее мы добавим его в различные секции страницы.
  • Тэг nav используется для содержания навигационных элементов, таких как основная навигация сайта или более специализированная навигация, как ссылки на следующую/предыдущую страницы.
  • aside – используется для обертывания содержимого, связанного с основным контентом страницы, которое всегда находится на одном месте. В данном случае мы используем его для сайдбара.
  • Тэг section используется для обозначения секции документа. Он может содержать все виды разметки, и множество секций могут быть вложены друг в друга.
  • Тэг footer должен содержать дополнительную информацию об основном контенте, такую как информацию об авторе, копирайты, ссылки на похожие документы и тому подобное.

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

Разметка для Навигации

Разметка навигации создается точно так же как и в HTML 4 или XHTML, с использованием маркированного списка. Ключ в том, что этот список располагается внутри тэгов nav.

  <nav>    <ul>    <li><a href="#">Blog</a></li>    <li><a href="#">About</a></li>    <li><a href="#">Archives</a></li>    <li><a href="#">Contact</a></li>    <li class="subscribe"><a href="#">Subscribe via. RSS</a></li>    </ul>   </nav>   

Разметка для Вступления

Мы уже описали новую секцию документа, используя тег section. Теперь просто добавим немного контента.

  <section id="intro">    <header>    <h2>Do you love flowers as much as we do?</h2>    </header>    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>   </section>   

Мы добавили ID к тэгу section, чтобы потом можно было назначить ему определенный стиль. Мы используем тэг header, для заключения элемента h2. Кроме описания основного документа, тэги заголовков всегда должны использоваться для описания отдельных секций.

Разметка Основного контента

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

Разметка для Записи

Посмотрите разметку, и я расскажу о новых элементах ниже.

  <section>    <article class="blogPost">    <header>    <h2>This is the title of a blog post</h2>    <p>Posted on <time datetime="2009-06-29T23:31:45+01:00">June 29th 2009</time> by <a href="#">Mads Kjaer</a> - <a href="#comments">3 comments</a></p>    </header>    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus odio, ultricies eu pharetra dictum, laoreet id odio...</p>    </article>   </section>   

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

Элемент header, используется для представления заголовка и метаданных о записи. Мы сообщаем пользователю, когда статья была написана, кто ее написал, и как много комментариев она имеет. Обратите внимание, что время заключено в соответствующий тэг. Этот тег также новый в HTML 5, и используется для разметки определенного участка во времени. Содержимое атрибута datetime должно быть следующим:

time

Год, затем тире (знак минус)

  1. Месяц, затем тире
  2. Дата
  3. Прописная T, для определения того, что мы собираемся указывать местное время
  4. Местное время в формате hh:mm:ss
  5. Часовой пояс по Гринвичу. Я нахожусь в Дании, где GMT+1, поэтому я пишу +01.

Разметка для Комментариев

Разметка для комментариев очень простая. Никаких новых тэгов и атрибутов не используется.

  <section id="comments">    <header>    <h3>Comments</h3>    </header>    <article>    <header>    <a href="#">George Washington</a> on <time datetime="2009-06-29T23:35:20+01:00">June 29th 2009 at 23:35</time>    </header>    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>    </article>    <article>    <header>    <a href="#">Benjamin Franklin</a> on <time datetime="2009-06-29T23:40:09+01:00">June 29th 2009 at 23:40</time>    </header>    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>    </article>   </section>   

Разметка для Формы Комментирования

В HTML 5 был представлен ряд усовершенствования для форм. Вам больше не нужно заботиться о валидации необходимых полей на клиентской стороне. Браузер все сделает за вас.

  <form action="#" method="post">    <h3>Post a comment</h3>    <p>    <label for="name">Name</label>    <input name="name" id="name" type="text" required />    </p>    <p>    <label for="email">E-mail</label>    <input name="email" id="email" type="email" required />    </p>    <p>    <label for="website">Website</label>    <input name="website" id="website" type="url" />    </p>    <p>    <label for="comment">Comment</label>    <textarea name="comment" id="comment" required></textarea>    </p>    <p><input type="submit" value="Post comment" /></p>   </form>   

Появилось два новых типа input-ов, email и url. Email указывает на то, что пользователь должен ввести валидный E-mail, а в поле url — валидный адрес сайта. Если вы добавите атрибут required, пользователь не сможет отправить пустое поле. «Required» — это логический атрибут, новый в HTML 5. Это всего лишь значит, что поле обязательно должно иметь какое-то значение.

Разметка Сайдбара и Подвала

Разметка сайдбара и подвала очень простая. Несколько секций, с некоторым контентом, внутри соответствующих тэгов aside и footer.

Вы можете взглянуть на окончательный результат разметки. Теперь перейдем к стилям.

Стилизация с CSS3

CSS 3 основывается на принципах стиля, селекторов и каскада, как нам хорошо известно из предыдущих версий CSS. CSS3 содержит множество новых функций, селекторов, псевдо-классов и свойств. Использование новых возможностей, значительно облегчит верстку ваших макетов. Давайте начнем.

Основные настройки

Для начала, нам понадобится определить некоторые основные правила, касающиеся типографии, фонового цвета страницы и т.д. Все это должно быть вам известно еще из CSS 2.1.

  /* Makeshift CSS Reset */   {    margin: 0;    padding: 0;   }      /* Tell the browser to render HTML 5 elements as block */   header, footer, aside, nav, article {    display: block;   }      body {    margin: 0 auto;    width: 940px;    font: 13px/22px Helvetica, Arial, sans-serif;    background: #f0f0f0;   }      h2 {    font-size: 28px;    line-height: 44px;    padding: 22px 0;   }      h3 {    font-size: 18px;    line-height: 22px;    padding: 11px 0;   }      p {    padding-bottom: 22px;   }   

Сначала мы, простым правилом, обнуляем значения свойств margin— и padding-.

Затем, мы указываем браузеру, возвращать все новые элементы HTML 5 в качестве блоков. Браузеры нормально относятся к неизвестным элементам, но им неизвестно как эти элементы должны быть отрисованы по умолчанию. Нам придется сообщать об этом браузерам до тех пор, пока HTML 5 официально не будет утвержден.

Также обратите внимание, что я выбрал размер шрифта в пикселях, вместо em или %. Это сделано специально, для придания статье прогрессивного характера. Когда, в один прекрасные день, все основные браузеры будут осуществлять полную поддержку HTML 5 и CSS3, у нас появится возможность масштабирования страницы, вместо простого ресайзинга текста. Благодаря этому исчезнет необходимость указывать единицы измерения в относительных единицах, поскольку браузер в любом случае сможет масштабировать страницу.

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

Стилизация Навигации

Обязательно обратите внимание, что ширина у body задана 940px, и он располагается по центру. Нашему блоку навигации нужно растянуться по всей доступной ширине окна, так что мы должны применить необходимые для этого стили:

  nav {    position: absolute;    left: 0;    width: 100%;    background: url("nav_background");   }   

Мы позиционировали элемент nav абсолютно, выровняли его по левому краю окна и растянули по всей доступной ширине. Теперь центрируем вложенный список, для его отображения в границах нашей раскладки:

  nav ul {    margin: 0 auto;    width: 940px;    list-style: none;   }   

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

  nav ul li {    float: left;   }       nav ul li a {    display: block;    margin-right: 20px;    width: 140px;    font-size: 14px;    line-height: 44px;    text-align: center;    text-decoration: none;    color: #777;    }       nav ul li a:hover {    color: #fff;    }       nav ul li.selected a {    color: #fff;    }       nav ul li.subscribe a {    margin-left: 22px;    padding-left: 33px;    text-align: left;    background: url("rss.png") left center no-repeat;    }   

Стилизация Предисловия

Разметка для предисловия очень простая. Секция с заголовком и абзацем текста. Тем не менее, мы будем использовать немного новых CSS3-свойств, чтобы сделать ее более привлекательной.

  #intro {    margin-top: 66px;    padding: 44px;    background: #467612 url("intro_background.png") repeat-x;    background-size: 100%;    border-radius: 22px;   }   

Мы использовали два новых свойства. Первое, это backgroundsize, которое позволит вам масштабировать фоновое изображение. В нашем случае, мы будем масштабировать его на 100% по обеим осям. Если при добавлении контента, бокс растянется, то лежащий в фоне градиент будет масштабироваться вместе с боксом. Это как раз то, что нельзя реализовать в CSS 2.1 не нарушая семантики разметки.

images_myВторое новое свойство это – borderradius, которое применяет закругленные углы к элементу. Радиус наших закругленных углов равен 22px, для каждого угла. Вы можете назначить различные значения для любого угла, или назначить закругленными только определенные углы.

image

К сожалению, ни одно из этих свойств, полностью не поддерживается в популярных браузерах. Тем не менее, мы можем получить некоторую поддержку, используя специфические расширения для браузеров. Backgroundsize поддерживается в последней версии Safari, Opera и Konqueror. Borderradius поддерживается в последней версии Safari и Firefox.

  #intro {    ...    /* Background-size not implemented yet */    -webkit-background-size: 100%;    -o-background-size: 100%;    -khtml-background-size: 100%;       /* Border-radius not implemented yet */    -moz-border-radius: 22px;    -webkit-border-radius: 22px;   }   

После того как мы указали свойство backgroundcolor, можно не боятся проблем с отображением страницы в браузерах, не поддерживающих backgroundsize, таких как Firefox. Теперь нам нужно стилизовать заголовок и текст.

  #intro h2, #intro p {    width: 336px;   }      #intro h2 {    padding: 0 0 22px 0;    font-weight: normal    color: #fff;   }      #intro p {    padding: 0;    color: #d9f499;   }   

Картинку цветка можно легко поместить на страницу, путем добавления второго фонового изображения, то, что поддерживается в CSS3, для секции #intro.

  #intro {    ...    background: #467612 url("intro_background.png") top left (287px 100%) repeat-x,    url("intro_flower.png") top rightright (653px 100%) no-repeat;    ...   }   

Мы назначили два фоновых изображения, измерив напоследок, чтобы убедиться, что они не перекрывают друг друга. Обратите внимание на короткую запись свойства background-size.

image2

К сожалению ни один из браузеров полностью не поддерживает этого. Поэтому нам пока придется действовать по старинке: будем использовать картинку и позиционировать ее с использованием CSS.

Стилизация Контента и Сайдбара

Контент и сайдбар должны быть расположены рядом друг с другом. Обычно это делается с помощью float, но в CSS3 это можно сделать с помощью таблиц!

«Что?! Таблицы?», наверное, удивитесь вы. Потому что давным-давно знаете, что использование таблиц для создания раскладки очень и очень плохая идея, и это до сих пор так. Вы никогда не должны использовать элементы таблицы для верстки раскладки. Однако, с помощью CSS3, мы можем сделать элементы похожими на таблицы, без появления таблиц в разметке. Для начала, нам потребуется немного элементов div, чтобы сгруппировать секции, более логичным образом.

  <div id="content">    <div id="mainContent">    <section>    <!-- Blog post -->    </section>    <section id="comments">    <!-- Comments -->    </section>    <form>    <!-- Comment form -->    </form>    </div>    <aside>    <!-- Sidebar -->    </aside>   </div>   

Вся разметка остается семантической, но теперь мы можем ее стилизовать. Нам нужно сделать блок #content похожим на таблицу, с колонками из блоков #mainContent и aside. С CSS3 это очень легко:

css

  #content {    display: table;   }       #mainContent {    display: table-cell;    width: 620px;    padding-right: 22px;    }       aside {    display: table-cell;    width: 300px;    }   

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

Стилизация Записи

Стилизация заголовка записи вполне тривиальна, поэтому я пропущу ее и перейду к интересной части: многоколоночная раскладка.

Множественные колонки

Множественные колонки текста раньше невозможно было создать без ручного разделения текста, но с CSS3 это очень просто, все, что нам понадобится это завернуть параграфы в элемент div, для работы с текущими браузерами.

  <div>    <p>Lorem ipsum dolor sit amet...</p>    <p>Pellentesque ut sapien arcu...</p>    <p>Vivamus vitae nulla dolor...</p>    ...   </div>   

Теперь мы можем добавить два простых свойства.

  .blogPost div {    column-count: 2;    column-gap: 22px;   }   

Нам нужно создать 2 колонки с расстоянием 22px между ними. Дополнительный div нужен, потому что на данный момент нет поддерживаемого способа выстраивания элементов в несколько колонок. В будущем, возможно, вам будет достаточно указать свойство column—span, и написать всего лишь:

  .blogPost {    column-count: 2;    column-gap: 22px;   }       .blogPost header {    column-span: all;    }   

Конечно, свойства column—count и column—gap поддерживаются только некоторыми браузерами, Safari и Firefox. Нам, пока что, придется использовать специальные расширения браузеров.

  .blogPost div {    /* Column-count not implemented yet */    -moz-column-count: 2;    -webkit-column-count: 2;       /* Column-gap not implemented yet */    -moz-column-gap: 22px;    -webkit-column-gap: 22px;   }   

Box-shadow

Если вы внимательно взгляните на картинку статьи, вы увидите тень. Мы можем сгенерировать ее используя CSS3 и свойство boxshadow.

  .blogPost img {    margin: 22px 0;    box-shadow: 3px 3px 7px #777;   }   

shadow_rendering_my

Первые «3px» сообщают браузеру, где мы хотим расположить тень по горизонтали. Вторые «3px», сообщают, где мы хоти расположить тень по вертикали. Последние «7px», как должна быть размыта рамка. Если вы установите последнее значение в ноль, рамка будет сплошной. Последнее, но не по значению, указывается основной цвет тени. Этот цвет конечно тускнеет, в зависимости от того насколько большое размытие тени вы установили.

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

  .blogPost img {    margin: 22px 0;    -webkit-box-shadow: 3px 3px 7px #777;   }   

Полосатые Комментарии

Полосатая раскраска или подсветка каждого второго элемента в последовательности, традиционно связана с выбором всех элементов, с помощью JavaScript, затем прогон их в цикле и подсветка всех четных элементов. CSS3 предоставляет псевдо-класс «nth—child», который делает это до смешного легко, без использования JavaScript. Мы используем его для полосатой раскраски комментариев.

  section#comments article:nth-child(2n+1) {    padding: 21px;    background: #E3E3E3;    border: 1px solid #d7d7d7;       /* Border-radius not implemented yet */    -moz-border-radius: 11px;    -webkit-border-radius: 11px;   }   

Таинственное значение «2n+1», на самом деле очень простое, если вы понимаете что это значит:

2n – выбор каждого второго элемента списка. Если вы напишете 3n, будет выбран каждый третий элемент, 4n – четвертый, и так далее.

+1 сообщает браузеру, что начать нужно с первого элемента. Если вы знакомы с программированием, то должны знать, что все массивы начинаются с 0, здесь точно так же. Это значит что элемент с номером 1, на самом деле второй элемент в последовательности.

В качестве альтернативы, вы можете написать просто:

  section#comments article:nth-child(odd) { ... }   

Здесь используется один из наиболее часто используемых стандартных значений, odd и even. Стилизация остальной части комментариев довольно проста для понимания, с вашими новыми знаниями.

Стилизация Формы отправки комментариев, Подвала и Сайдбара

Для стилизации подвала сайдбара и формы комментариев, была использована пара CSS3-техник. В форме комментариев и в подвале, я использовал ту же технику табличной раскладки, что и в основном макете. В сайдбаре использовался border—radius, для добавления закругленных углов различным секциям.

Финальный Дизайн

Смотрите результат нашей работы, со всеми стилями.

Заключение

Когда HTML 5 и CSS3 однажды начнут поддерживать все браузеры, жизнь разработчика веб-сайтов станет гораздо проще. Мы, наконец, перестанем использовать флоаты для раскладки (которые вообще не предназначены для этого), терять значительное количество времени на написание JavaScript-кода, для масштабирования фоновых изображений, или полосатой раскраски таблиц.

Перевод статьи «HTML5 and CSS3: The Techniques You’ll Soon Be Using«, автор Mads Kjaer.

dreamhelg.ru

I’ve found a lot of discussions and questions littered around the internet pertaining to this question, however, none of them seem to match my case and solutions are highly specific to a certain situation.

I have a header element with a height of 100px at the top of the page. I have a div#sidebar element floated left with a width of 250px, and finally a div#main element also floated left.

The height of html, body, and div#sidebar is 100%.

My goal is to get div#sidebar to extend all the way down to the bottom of the page regardless of browser size or content size. Obviously, if the content is longer than the viewable page height it should act normally and push past the end of the page, introducing scroll bars.

However, as it stands now, it seems the page height has been calculated as 100% + 100px, introducing scrollbars even though there is no content that would push div#sidebar down. So far I have found no solutions that work, or perhaps I have missed it or messed a solution up; regardless, I’ve been at this for well over an hour and I’m about to rip my hair out.

Is there a non-JavaScript method of getting this to work properly to stop the header‘s height being added to 100%?


Here is my HTML/CSS — although I included all relevant details above, this should help.

<!DOCTYPE html> <html lang="en">  <head>  <meta charset="utf-8" />  <title>My Awesome Template!</title>  <link href="./stylesheet.css" rel="stylesheet" />  </head>  <body>  <header id="primary">  <h1>My Awesome Template!</h1>  </header>  <div id="sidebar">  <h1>Sidebar</h1>  </div>  <div id="main">  <h1>Main</h1>  </div>  </body> </html> 

CSS:

html, body {  margin: 0;  padding: 0;  height: 100%; }  body {  background: #fff;  font: 14px/1.333 sans-serif;  color: #080000; }  header#primary {  width: 100%;  height: 100px;  background: #313131;  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d4d4d), to(#313131));  background-image: -moz-linear-gradient(#4d4d4d, #313131);  background-image: -o-linear-gradient(#4d4d4d, #313131);  background-image: linear-gradient(#4d4d4d, #313131); } header#primary h1 {  margin: 0px 0px 0px 20px;  padding: 0px;  line-height: 100px;  color: #ffffff; }  #sidebar {  float: left;  width: 250px;  background: #ccc;  min-height: 100%; }  #main {  float: left; } 

stackoverflow.com

HTML-разметка простой страницы

 <div class="header">HEADER</div> <div class="content">CONTENT</div> <div class="sidebar">FIXED SIDEBAR</div> <div class="footer">FOOTER</div> 

CSS-стили для блоков контента

 .header {  width: 100%;  background: purple;  height: 80px; } .content {  width: 80%;  background: blue;  height: 800px;  float: left; } .sidebar {  width: 20%;  background: green;  height: 100px;  float: right; } .sidebar.fixed {  position: fixed;  right: 50%;  margin-right: -50%; } .footer {  width: 100%;  background: gray;  height: 500px;  clear: both; } 

JS-скрипт для фиксированного сайдбара при прокрутке страницы

Не забываем подключить jQuery

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

Скрипт:

 $(function() {  var $window = $(window);  var $sidebar = $(".sidebar");  var $sidebarTop = $sidebar.position().top;  var $sidebarHeight = $sidebar.height();  var $footer = $('.footer');  var $footerTop = $footer.position().top;   $window.scroll(function(event) {  $sidebar.addClass("fixed");  var $scrollTop = $window.scrollTop();  var $topPosition = Math.max(0, $sidebarTop - $scrollTop);    if ($scrollTop + $sidebarHeight > $footerTop) {  var $topPosition = Math.min($topPosition, $footerTop - $scrollTop - $sidebarHeight);  }   $sidebar.css("top", $topPosition);  }); }); 

denis-creative.com

Для чего нужен сайдбар

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

Сайдбар можно использовать по-разному:

  • В качестве навигации.
  • В качестве рекламного блока.
  • Расположить здесь виджеты для быстрого доступа к разделам.
  • Расположить информационные блоки.
  • Предлагать дополнительные услуги и товары.
  • Расположить полезные инструменты: строку поиска, корзину и так далее.

Количество сайдбаров

  • 1 сайдбар. Когда интерент-сайты только набирали обороты, наибольшей популярностью пользовались варианты с одним сайдбаром. Сегодня они не утратили актуальности.

Html sidebar

  • 2 сайдбара. Чаще их применяют для интернет-магазинов или корпоративных ресурсов. Как правило, это быстро развивающиеся сервисы, которые хотят предоставить своим клиентам как можно больше полезной информации.
  • 3-4. Вспомогательные панели располагаются по бокам, а также внизу и вверху. Важно не перестараться и не сделать элементы маленькими, иначе пользователям будет неудобно просматривать сайт со смартфона и прочих гаджетов.
  • 0. Можно и полностью отказаться от сайдбара, однако по функциональности такой ресурс будет несколько уступать. Лучше «на запас» оставить для него место при разработке.

Как сделать сайдбар привлекательным

Html sidebar
Чтобы sidebar был действительно полезным, в первую очередь, он должен быть заметным. Чтобы добиться желаемого результата нужно следовать следующим рекомендациям:

Размеры

Первостепенное значение имеет ширина. Боковая панель не должна затмевать основной контент. 20-30% от ширины области контента — оптимальный показатель. Суммы всех сайдбаров не должна быть более 50% от ширины области контента. По высоте боковая панель должна целиком помещаться на экран, без прокручивания.

Графические изображения и цветовая палитра

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

Шрифт

Кегль рекомендуется выбрать на 10-20% больше, чем кегль главного текста, так он будет привлекать, но не отвлекать от основного материала.

semantica.in

Create a hidden sidebar with a special component.

About

New in 4.2.7

Often you can see the component that hides on the side of the content and contains a menu and is displayed on demand. Such a component is called a sidebar. You can create it with Metro 4 sidebar component.

Create sidebar

To create sidebar you must write valid html structure and to behavior with sidebar, add role data-role="sidebar". The sidebar contains two main blocks: header and menu.

  <aside class="sidebar" data-role="sidebar">  <div class="sidebar-header">  ...  </div>  <ul class="sidebar-menu">  ...  </ul>  </aside>  

Sidebar header

Sidebar header can contains next elements: .sub-action, .avatar, .title and .subtitle.

  <div class="sidebar-header">  <a href="/" class="fg-white sub-action"  onclick="Metro.sidebar.close('#sb1'); return false;">  <span class="mif-arrow-left mif-2x"></span>  </a>  <div class="avatar">  <img data-role="gravatar" data-email="sergey@pimenov.com.ua">  </div>  <span class="title">Metro 4 Components Library</span>  <span class="subtitle"> 2018 © Sergey Pimenov</span>  </div>  
Sidebar header background

By default, sidebar header have a white background color. To change it you must use color classes, add custom style or to, set image background, use special attribute data-image="...".

  <div class="sidebar-header bg-red">  ...  </div>   ...or...   <div class="sidebar-header" style="background-color: red;">  ...  </div>   ...or...   <div class="sidebar-header" data-image="images/sb-bg-1.jpg">  ...  </div>  

Sidebar menu

Sidebar menu contains links to site pages or other any targets. The menu is a list with links.

  <ul class="sidebar-menu">  <li><a><span class="mif-home icon"></span>Home</a></li>  <li><a><span class="mif-books icon"></span>Guide</a></li>  <li><a><span class="mif-files-empty icon"></span>Examples</a></li>  <li class="divider"></li>  <li><a><span class="mif-images icon"></span>Icons</a></li>  </ul>  
Sidebar menu — grouping items

You can grouping menu items. To mark group, use <li> with classes .group-title and .divider

  <ul class="sidebar-menu">  <li class="group-title">Group one</li>  <li><a>Item 1</a></li>  <li><a>Item 2</a></li>  <li><a>Item 3</a></li>  <li class="divider"></li>  <li><a>Item 4</a></li>  <li><a>Item 5</a></li>   <li class="group-title">Group two</li>  <li><a>Item 6</a></li>  <li><a>Item 7</a></li>  </ul>  

Sidebar toggle

You can set sidebar toggle with special attribute data-toggle="...". Value for this attribute must be a valid element selector id or class. For sidebar toggle Metro 4 bind click event, who toggle sidebar state.

  <aside class="sidebar pos-absolute z-2" data-role="sidebar" data-toggle="#sidebar-toggle-2">  <div class="sidebar-header" data-image="images/sb-bg-1.jpg">  <div class="avatar">  <img data-role="gravatar" data-email="sergey@pimenov.com.ua">  </div>  <span class="title fg-white">Metro 4 Components Library</span>  <span class="subtitle fg-white"> 2018 © Sergey Pimenov</span>  </div>  <ul class="sidebar-menu">  <li><a><span class="mif-home icon"></span>Home</a></li>  <li><a><span class="mif-books icon"></span>Guide</a></li>  <li><a><span class="mif-files-empty icon"></span>Examples</a></li>  <li class="divider"></li>  <li><a><span class="mif-images icon"></span>Icons</a></li>  </ul>  </aside>  <div class="h-100 p-ab">  <button class="button square pos-absolute pos-top-right"  id="sidebar-toggle-2">  <span class="mif-menu"></span>  </button>  </div>  

Shifting content

You can use attribute data-shift="..." to create shifting content effect.

  <aside class="sidebar pos-absolute z-2"  data-role="sidebar"  data-toggle="#sidebar-toggle-3"  id="sb3"  data-shift=".shifted-content">  <div class="sidebar-header" data-image="images/sb-bg-1.jpg">  <div class="avatar">  <img data-role="gravatar" data-email="sergey@pimenov.com.ua">  </div>  <span class="title fg-white">Metro 4 Components Library</span>  <span class="subtitle fg-white"> 2018 © Sergey Pimenov</span>  </div>  <ul class="sidebar-menu">  <li><a><span class="mif-home icon"></span>Home</a></li>  <li><a><span class="mif-books icon"></span>Guide</a></li>  <li><a><span class="mif-files-empty icon"></span>Examples</a></li>  <li class="divider"></li>  <li><a><span class="mif-images icon"></span>Icons</a></li>  </ul>  </aside>  <div class="shifted-content h-100 p-ab">  <div class="app-bar pos-absolute bg-red z-1" data-role="appbar">  <button class="app-bar-item c-pointer" id="sidebar-toggle-3">  <span class="mif-menu fg-white"></span>  </button>  </div>   <div class="h-100 p-4">  <p class="h1">What is Lorem Ipsum?</p>  <p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry.  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s  ...  </p>  </div>  </div>  

Static sidebar

You can set attribute data-static="..." with one of media points md, lg, xl, xxl to set rule when sidebar will be opened always. Also you can define elements, who must shifted when sidebar receive static state with attribute data-static-shift="...".

  <aside class="sidebar pos-absolute z-2"  data-role="sidebar"  data-toggle="#sidebar-toggle-4"  id="sb4"  data-shift=".shifted-content-2"  data-static-shift=".shifted-content-2"  data-static="md">  <div class="sidebar-header" data-image="images/sb-bg-1.jpg">  <div class="avatar">  <img data-role="gravatar" data-email="sergey@pimenov.com.ua">  </div>  <span class="title fg-white">Metro 4 Components Library</span>  <span class="subtitle fg-white"> 2018 © Sergey Pimenov</span>  </div>  <ul class="sidebar-menu">  <li><a><span class="mif-home icon"></span>Home</a></li>  <li><a><span class="mif-books icon"></span>Guide</a></li>  <li><a><span class="mif-files-empty icon"></span>Examples</a></li>  <li class="divider"></li>  <li><a><span class="mif-images icon"></span>Icons</a></li>  </ul>  </aside>  <div class="shifted-content-2 h-100 p-ab">  <div class="appbar pos-absolute bg-red z-1" data-role="appbar">  <button class="app-bar-item c-pointer" id="sidebar-toggle-4">  <span class="mif-menu fg-white"></span>  </button>  </div>   <div class="h-100 p-4">  <p class="h1">What is Lorem Ipsum?</p>  <p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry.  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...  </p>  </div>  </div>  

Options

You can set any options for sidebar:

Options Data-* Default Description
shift data-shift Set elements selectors who will be shifted
staticShift data-static-shift Set elements selectors who will be shifted when sidebar in static mode
toggle data-toggle Set sidebar toggle element
static data-static Set media point for static mode
menuItemClick data-menu-item-click true If true, sidebar will be closed when user click on sidebar menu item

Events

When sidebar works, his generate events. You can use a callback for these events to interact with a stepper.

Event Data-* Desc
onOpen(sb) data-on-open Fired when sidebar open
onClose(sb) data-on-close Fired when sidebar close
onToggle(sb) data-on-toggle Fired when sidebar toggle state
onStaticSet(sb) data-on-static-set Fired when sidebar receive static state
onStaticLoss(sb) data-on-static-loss Fired when sidebar loss static state
onSidebarCreate(element) data-on-sidebar-create Fired when sidebar created

Methods

To interact with component you can use methods:

Method Desc
open() Open sidebar
close() Close sidebar
toggle() Toggle sidebar state
isOpen() Use this method to check sidebar state

Sidebar object

Metro 4 contains special object Metro.sidebar to manipulate Sidebars. This object contains next methods:

  • open(el) — open Sidebar
  • close(el) — close Sidebar
  • toggle(el) — toggle Sidebar state
  • isSidebar(el) — check if element is Sidebar instance
  • isOpen(el) — check if sidebar is open

metroui.org.ua


You May Also Like

About the Author: admind

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.