что такое табы html
Делаем адаптивные табы без javascript и грязных хаков
В продолжение предыдущего поста про стилизацию элементов выбора, хотел бы рассказать как сделать полностью адаптивные табы без использования javascript, абсолютного позиционирования и хаков с ссылками.
Для начала хотел бы сказать, что я не призываю отказаться от javascript в пользу лишь CSS, ниже будет представлен лишь один из способов реализации табов. Существует множество ситуаций, когда такой подход вам не подойдёт и где без JS не обойтись, но сейчас не об этом.
Давайте поймём что мы хотим видеть в качестве результата работы и какие требования мы выдвигаем к нему:
Визуально должно получиться что-то подобное:
Перед тем как показать свой вариант табов без JS, я хотел бы рассказать о некоторых вариантах реализаций, которые я нашёл в процессе решения этой задачи.
Вариант первый
Человек придумавший этот способ либо явно хотел поиздеваться над пользователями, либо он один из посетителей реддита, который создавал те самые «удобные» регуляторы громкости. У меня подобный подход вызывает нервный тик.
Суть метода заключается в следующем:
Как вы могли заметить мы имеем кое-какие проблемы с использованием данного метода:
Делаем оправданный вывод: этот метод нам не подходит так как не удовлетворят большей части требований. Реализации ужасная и я не советовал бы её использовать.
Вариант второй
Вот как это работает:
Как вы могли заметить, в этом примере мы используем position: absolute; для того, чтобы разместить заголовки вкладок сверху, а контент вкладки снизу. Это создаёт определённые проблемы:
Конечно, в некоторых случаях этот метод можно применять, на пример, когда вы заранее знаете количество вкладок и объём контента внутри них. Но мы ищем универсальное решение, поэтому данный подход не применим в нашем случае.
Решение
Третий вариант, и он же решение, является модификацией второго метода. Работает он точно так же, однако мы не будем использовать абсолютное позиционирование и свойство float для заголовков.
Данный подход работает во всех современных браузерах, включая мобильные. Из, непривычных для многих, свойств используется только Flexbox, а он уже давно имеет широкую поддержку. В браузерах FireFox, Chrome, Safari и Opera мною не было обнаружено каких-либо проблем с работой вкладок.
Я добавил немного стилей, чтобы вкладки выглядели поинтересней.
Вы можете проверить данный подход на jsfiddle, или на своих проектах. Буду рад увидеть и другие предложения решений данной проблемы в комментариях.
Создание вкладок (табов). Урок 1
Дата публикации: 2013-10-10
От автора: в данном уроке мы с Вами поговорим о создании табов на сайте. Табы — это ни что иное, как вкладки, позволяющие вместить большой объем информации, используя минимальный объем места. Вкладки очень естественно смотрятся, к примеру, в интернет-магазинах. Там в них часто помещают информацию о товаре: характеристики, описание товара и т.д.
Библиотека jQuery UI предлагает нам виджет Табы (//jqueryui.com/tabs/), позволяющий с легкостью реализовать необходимый функционал. Однако, если вы не хотите подключать дополнительную библиотеку, если хотите реализовать вкладки, что называется с нуля, то данный урок как раз то, что вам нужно.
В данном уроке мы с вами создадим необходимую для табов разметку, а также напишем стили, позволяющие оформить табы соответствующим образом. При этом это не обязательно может быть «табовое» оформление… мы вполне можем использовать функционал урока для создания сайта-визитки, где контент страницы — это контент вкладки, ну а каждая конкретная вкладка — это ни что иное, как пункт меню. В общем, мы ограничены лишь нашей фантазией.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Итак, давайте начнем с разметки, которая может быть примерно такой:
Табы (вкладки) для сайта на CSS и JavaScript – 3 способа
В этой статье рассмотрим примеры вкладок для сайта, выполненных как с использованием только CSS, так и с применением JavaScript.
Что такое табы
На странице очень часто бывает необходимо вывести большое количество информации.
Для того чтобы эту информацию не отображать всю сразу, её можно разделить на части и выводить пользователю в определённый момент времени только одну из них.
Табы (вкладки) – это как раз и есть тот элемент интерфейса, который позволяет пользователю переключаться между контентом, разбитым на несколько определённых частей.
В вебе табы – это просто набор ссылок или других HTML элементов, которые визуально можно представить по-разному: в виде вкладок, группы кнопок и другими способами. По сути, они просто включают видимость какого-то одного блока с контентом, скрывая при этом другие.
Табы предназначены для экономии места и более удобного представления информации на сайте (по названию вкладки можно определить какой контент отобразится на странице, если нажать на неё).
Вкладки на чистом CSS
Рассмотрим несколько способов создания табов на CSS.
Первый способ построен на радиокнопках ( input с type=»radio» ) и CSS селекторе checked.
HTML и CSS код таба:
Отображение и скрытие контента, связанного с вкладками, выполняется очень просто. По умолчанию элементы, содержащие контент, не отображаются. Показ того или иного элемента с контентом осуществляется только в том случае, если селектор в следующем правиле позволяет выбрать его:
CSS код для создания адаптивных вкладок в виде кнопок:
В этом примере вкладки визуально представлены в виде хэштегов :
Второй способ основывается на использовании псевдокласса :target.
Пример HTML и CSS кода для создания адаптивных вкладок, механизм работы которых организован через :target :
Логика этих табов основана на следующих моментах. Первый момент заключается в добавлении хэша к URL-адресу страницы при нажатии на ссылку (вкладку). Второй – это стилизация элементов, выбор которых осуществляется в зависимости от хэша в URL-адресе. Выбрать элемент, идентификатор которого соответствует хэшу в URL-адресе в CSS можно выполнить посредством псевдокласса :target. С помощью него мы можем написать селектор не только для получения элемента, на который он указывает, но и для выбора других элементов, которые каким-то определённым образом связаны с ним.
Например, выбрать вкладку, которая должна быть активной для элемента на который указывает :target можно так:
В зависимости от дизайна проекта табы можно визуально представить так, как вам это нужно.
Например, чтобы сделать вкладки вертикальными их код можно изменить на следующий:
При этом табы отображаются вертикально только на больших экранах, а на маленьких (мобильных) они отображаются горизонтально. Адаптивность табов в коде реализуется с помощью медиа-запросов.
Табы с использованием JavaScript
В этом разделе разберём как можно создать табы на чистом JavaScript (без использования библиотеки jQuery).
Способ реализации вкладок с использованием JavaScript может потребоваться, когда в них нужно, например показывать динамический контент, получаемый через AJAX.
HTML и CSS код вкладок:
При этом инициализирован будет только первый контейнер с вкладками, имеющий указанный класс.
Для того чтобы на странице инициализировать сразу все вкладки, имеющие этот класс, можно, например, использовать следующий код:
Примеры
1. Пример, в котором данные о последней открытой вкладки таба будем сохранять в LocalStorage, а затем использовать эту информацию при открытии страницы для переключения на неё:
2. Пример синхронизации вкладок на разных открытых страницах, относящихся к одному источнику (через LocalStorage):
3. Пример, в котором показано как на одной странице можно вывести несколько табов с сохранением их состояний (активных вкладок) в LocalSorage:
4. Табы, содержащие видео с YouTube. При переходе на другую вкладку будет приостанавливаться воспроизведение текущего видеофайла.
Загрузку API IFrame Player будем выполнять асинхронно. Для этого напишем следующий код:
Создание и проигрывателя YouTube будем выполнять после загрузки кода API посредством функции onYouTubeIframeAPIReady :
Описание исходного JavaScript кода
Как сделать адаптивные табы (вкладки) на css без использования скриптов
Добрый вечер! Сегодня я вам расскажу, каким образом можно сделать табы (вкладки) на чистом css3 без какого-либо использования jquery или других скриптов. Как вы уже знаете, чем меньше вы будете использовать скриптов, тем лучше для вашего сайта, и тем быстрее он будет работать. А скорость сайта сегодня один из самых важных показателей его ранжирования в поисковых системах.
Адаптивные вкладки (табы) на чистом css и без скриптов
Сегодня табы есть практически на любом сайте. Они необходимы для того, чтобы отображать несколько областей контента без перехода пользователя на другие страницы. Например, на одном из моих проектов по разработке интернет-магазина на Joomla было добавление двух табов, которые будут отображать по 3 товара двух типов: «хиты продаж» и «последние». Принято решение делать их на чистом css без перезагрузки сайта ненужными скриптами.
HTML код для табов с использованием css3 по пунктам
1. В первую очередь нам необходимо создать div с классом «tabs».
2. Добавляем непосредственно кнопки-переключали с именем «tabs», при нажатии на которые они будут включать содержимое наших табов.
type = «radio» name = «tabs» id = «tab-first» checked >
3. Добавляем их название через label
4. Под кнопками, которые мы с Вами сделали в пунктах 1-3, мы добавляем уже непосредственно контент, который нам нужно выводить. В моем случае это три последних товара и три лучших товара.
Каждый блок у нас имеет класс tab-content и идентификаторы tab-content-1 и tab-content-2.
Итоговый HTML наших будущих табов
На этом мы закончили с написанием нашего html. Согласитесь, ничего сложного тут не было. Итак, идем дальше.
CSS стили для табов с использованием css3 по пунктам
Теперь самое интересное и сложное. Нам нужно наши табы сделать табами, которые будут переключаться при клике 🙂
Так как у нас будет два таба, то нам нужно назначить им такую ширину, чтобы они помещались на экране и не вылазили за его черту. Для этого мы прописываем ширину 50%. Если у вас будет другое число табов, то и ширину рассчитывайте отталкиваясь от их числа.
Также, обратите внимание, что по умолчанию, мы делаем наши кнопки-переключатели невидимыми
Как заставить это работать
Добавляем следующий css код
Строками выше мы добавляем особы стиль для активного таба используя :checked + label
Далее мы уже проверяем, какой наш переключатель имеет статус checked и отображаем содержимое, которое у нас прикреплено за ним, используя его id.
#tab-content-1 — данная строка говорит о том, что нам нужно отобразить контент, который имеет id=»tab-content-1″, если tab-first имеет статус checked.
Делаем наши табы адаптивными
Ну вот по сути и все. Наши табы готовы :). Вы их можете менять как угодно, добавлять-удалять. Спасибо за внимание 🙂
Tabs (табы) | CSS
CSS Tabs с переходом по клику
CSS Tabs, с переходом по щелчку
CSS табы с переходом по наведению курсора мышки. Результат изменения сохраняется
Если :hover заменить на :active, то будет самый чистый HTML код табов, где смена содержимого осуществляется нажатием на вкладку.
Меню вкладками, где смена блоков происходит при наведении мышки. Появляющееся поле не фиксируется и как только курсор уходит с формы, снова видимой становится первая часть
Для копирования текста используйте комбинацию клавиш CTRL+C.
Меню вкладками, где поле изначально скрыто. Появляется или при наведении, или по клику. Если щелкнуть вне меню, то оно свернётся.
165 комментариев:
Протестировала, всё работает, даже в Опера.Мини. RusyLev Очень интересный обзор, на некоторых своих сайтах именно ваши табы и использую.
Но возник вопрос, как можно модифицировать 1-ый пример табов, чтобы сами табы были слева?
Пример: https://dl.dropboxusercontent.com/u/1104627/articles/CSS/vertical_tabs/index.html RusyLev или как здесь http://www.slotvoyager.com/list/videopokers/games/videopokerama NMitra Дополнила статью ещё одним примером Rusylev Браво! Огромное спасибо! Rusylev поставил на сайт, попытался вставить изображения в табы, но что-то ничего не выходит толкового. Невозможно настроить отступ снизу от картинок, они налазят друг на друга.
В хроме (в мозиле рамка чуть меньше, чем в хроме. Хорошо), всё отлично, к большому удивления в Яндекс браузере рамка на четверть текста, в ИЕ и в Опере тоже самое, а вот в Опере-мини отображает коректно.
Подскажите пожалуйста, как это решить?
ЯПлакать. Анонимный Забыл представиться, Михаил. NMitra height: 209px; заменить на height: 339px; Анонимный NMitra, вы прелесть и 41 раз умница! Большое Вам спасибо
Михаил Анонимный Здравствуйте. Подскажите пожалуйста, как в четвёртом примере добавить ещё span (колонки). У меня нарушается порядок их перехода или не работает вовсе.
Спасибо. NMitra Здравствуйте
.korpus
.korpus label
.korpus input[type=»radio»]:checked + label
.korpus > input:nth-of-type(1):checked
div:nth-of-type(3)
не подскажете, почему не получается 4-й вариант сделать с 6-ю вкладками?
.korpus1 > span + span:hover + span + span + span + span
div:nth-of-type(2),
.korpus1 > span + span + span:hover + span + span + span
div:nth-of-type(3),
.korpus1 > span + span + span + span:hover + span + span
div:nth-of-type(4),
.korpus1 > span + span + span + span + span:hover + span
div:nth-of-type(5),
.korpus1 > span + span + span + span + span + span:hover
.korpus1 > span:hover + span + span + span + span + span
div:nth-of-type(2),
.korpus1 > span:hover + span + span + span + span + span
div:nth-of-type(3),
.korpus1 > span:hover + span + span + span + span + span
div:nth-of-type(4),
.korpus1 > span:hover + span + span + span + span + span
div:nth-of-type(5),
.korpus1 > span:hover + span + span + span + span + span
.korpus1 > span + span:hover + span + span + span + span
div:nth-of-type(3),
.korpus1 > span + span:hover + span + span + span + span
div:nth-of-type(4),
.korpus1 > span + span:hover + span + span + span + span
div:nth-of-type(5),
.korpus1 > span + span:hover + span + span + span + span
.korpus1 > span + span + span:hover + span + span + span
div:nth-of-type(2),
.korpus1 > span + span + span:hover + span + span + span
div:nth-of-type(4),
.korpus1 > span + span + span:hover + span + span + span
div:nth-of-type(5),
.korpus1 > span + span + span:hover + span + span + span
.korpus1 > span + span + span + span:hover + span + span
div:nth-of-type(2),
.korpus1 > span + span + span + span:hover + span + span
div:nth-of-type(3),
.korpus1 > span + span + span + span:hover + span + span
div:nth-of-type(5),
.korpus1 > span + span + span + span:hover + span + span
.korpus1 > span + span + span + span + span:hover + span
div:nth-of-type(2),
.korpus1 > span + span + span + span + span:hover + span
div:nth-of-type(3),
.korpus1 > span + span + span + span + span:hover + span
div:nth-of-type(4),
.korpus1 > span + span + span + span + span:hover + span
.korpus1 > span + span + span + span + span + span:hover
div:nth-of-type(2),
.korpus1 > span + span + span + span + span + span:hover
div:nth-of-type(3),
.korpus1 > span + span + span + span + span + span:hover
div:nth-of-type(4),
.korpus1 > span + span + span + span + span + span:hover
NMitra Рабочий вариант:
Заранее благодарю за внимание. Денис Демин жду ответа. Еще раз спасибо. 🙂 NMitra Здравствуйте, так и размещайте 🙂 Александра Помойницкая Добрый день! Подскажите, пожалуйста, как сделать, чтобы в примере номер 1 при загрузке, верхней была вторая вкладка, а не первая. В вашем примере сейчас CSS верхняя, а как сделать, чтобы HTML была верхней? Спасибо! NMitra Добрый день. checked=»checked» нужно убрать из
и поставить в
Александра Помойницкая Спасибо огромнейшее. maritca Добрый день, не работает в ИЕ и Сафари. вкладки просто не переключаются. NMitra Добрый день. Все последние версии браузеров поддерживают. Проблема может быть у старых версий, не поддерживающих селекторы. MarQs Li Потрясающе!
Поломал немного голову над четвертым вар. с семью вкладками, но оно того стоило, автор логику изложил отлично.
СПАСИБО! Анонимный не работает первый пример в IE 6 как можно сделать чтобы заработало? NMitra Увы, это невозможно. В IE6 подобные вещи делаются только с участием JavaScript Анонимный а не подскажите какой скрипт нужно вставить для корректной работы? Заранее благодарен Анонимный а не подскажите какой скрипт нужно вставить для корректной работы? Заранее благодарен NMitra Что-то типа такого http://shpargalkablog.ru/2011/01/forma-s-vkladkami.html Хотя в IE не проверяла Анонимный а куда прописывается этот скрипт для примера 1? 🙂 NMitra Лучше измените CSS этого http://shpargalkablog.ru/2011/01/forma-s-vkladkami.html Анонимный дело в том что сверстано уже не одна страница по примеру один и нужно как-то исправить этот БАГ 🙁 NMitra Подумаю NMitra Противный IE6, там вроде нужно будет всем прописывать id. Пробуйте:
Анонимный Прошу прощения за мою наглость и за чайничество 🙂 Вот к примеру страничка http://compol.ru/linoleum/travertine.php куда тут нужно дописать этот скрипт?) везде нормально показывает а на 6 версии как и описал выше не корректно NMitra Сначала попробуйте после
NMitra Я ещё раз проверила на IE, всё работает. У вас не работают примеры именно с моей страницы или когда вы добавляете их на свой сайт? Используете Windows? Александра Помойницкая Добрый вечер! Подскажите пожалуйста как сделать первый вариант с 9-ью вкладками.
так прописала и ничего не работает..просто все 9 дивов в столбик выстроились.
Подскажите пожалуйста как прописать. Спасибо. NMitra
div:nth-of-type(3) < display: block; padding: 5px; border: 1px solid #aaa; >NMitra См. комментарий 65 Денис Здравствуйте, NMitra. Подскажите пожалуйста как сделать 3-й вариант с 25 вкладками, а то я уже 3-й день мучаюсь, всё никак не получается ( NMitra
NMitra Чтобы в IE работало
.menu1 > a,
.menu1 #tab2:target
#tab2,
#tab3,
.menu1 > div,
.menu1 #tab2:target
.menu1 > div:nth-of-type(1),
.menu1 #tab2:target
.menu1 > a:nth-of-type(1),
.menu1 #tab2:target
Как тут добавить вкладки
NMitra См http://jsfiddle.net/NMitra/jxwkrabq/ Анонимный Спасибо. Помогите в 3-ем примере сделать вертикальные табы. NMitra Какой именно вариант, там где написано «Реализация попроще «? Влад «Реализация попроще». Да. Будьте добры. «Помогите в 3-ем примере сделать вертикальные табы.» NMitra HTML тот же, а CSS (см. http://jsfiddle.net/NMitra/5znb1ok0/ )
a:nth-of-type(3) < background: green; >Анонимный Здравствуйте. А как в третьем варианте зафиксировать выбранную вкладку, чтобы после перезагрузки страницы, она оставалась выбранной? NMitra Здравствуйте, тот, который при наведении курсора мышки? Анонимный То есть второй, там где по клику. Анонимный Или так получится только, если через инпуты делать? NMitra Попробуйте добавить скрипт
div:nth-of-type(1),
.korpus > input:nth-of-type(2):checked
div:nth-of-type(2),
.korpus > input:nth-of-type(3):checked
Вот картинки, иллюстрирующие это:
http://i71.fastpic.ru/big/2015/0520/9d/0c7e30bff1267a0613611e8d641b3a9d.jpg
http://i71.fastpic.ru/big/2015/0520/36/f40cf2603d8964fdcb74898d9e3ee836.jpg
http://i71.fastpic.ru/big/2015/0520/5c/d6b58e1ad8d84b8b564129e688b2d15c.jpg
Помогите, пожалуйста, уже голову сломал, не могу понять почему так происходит. NMitra label вкладок нужно присвоить класс и в коде только этому классу присваивать значения или (не для IE7-) перед label поставить символ > (см. http://shpargalkablog.ru/2011/10/css-selectors.html). Пример http://jsfiddle.net/NMitra/6fnkaafz/
.korpus0 > label <> Александр Все именно так и сделано:
Сорри, сюда код запостить не смог, html-теги не пропускает. Положил нужную часть сюда:
http://jsfiddle.net/Gealut/j4p58wr4/
Но вы можете использовать любой, убрав стили для первой вкладки, например, http://jsfiddle.net/f8c8rzbd/ Вопрос только в том, как он будет сворачиваться при ненадобности.
Или нужно смотреть в сторону JS. Муслим Гасанов Спасибо. А есть возможность использовать каскадом? Чтобы открыли по клику, потом еще и еще и еще и до скончания. )) Что-то типа таб внутри таба как-то не выходит(. NMitra Можно, но, увы, у меня не так много свободного времени. Посмотрите пример тут http://jsfiddle.net/NMitra/5uarcff5/ ( http://shpargalkablog.ru/2010/11/poyavlyayushchiesya-commentarii.html ) или проще воспользуйтесь тегом details http://shpargalkablog.ru/2013/04/details-html.html Муслим Гасанов Спасибо Анонимный а вот во 2-м варианте (CSS Tabs, с переходом по щелчку) реально ли как то поставить ширину вкладки в пикселях?) под текст ширина вкладки легко самоподстраивается, а вот когда на странице 2 вкладки, смотрится не очень красиво(( Анонимный под шириной вкладки я имел ввиду, чтоб кнопку (к примеру tab1) по ширине зафиксировать в пикселях. NMitra Так?
Вопрос №1. Как сделать матрешку из вкладок с этим кодом (ссылка выше)? а то пытался и бестолку(
На сайте хочу сделать одну огромную страницу, в которой приблизительно по прикидкам в сумме будет 24 вкладки. Указано в примере ниже.
Вопрос №2. Как сделать ширину для кнопок (т.е. у каждого слоя матрешки вкладок будет разная ширина, как про цвета написал ниже.), чтоб они подстраивались не только под размер текста, но и под ширину страницы.
Ширина страницы 830px, но для кнопок она должна быть 800px (т.е. чтоб небольшие отступы все же были от краев страницы; желательно, но не обязательно).
Хотя как вариант сделать в % размер кнопок, который и будет зависить от ширины страницы.
Вопрос №3. Как сделать разные цвета в разных слоях матрешки вкладок? Указано в примере ниже.
P.S. как вариант, можете добавить в саму статью про это, не думаю, что только у меня такие вопросы возникают или возникнут.
Пример:
1) профессия 1 Подразделяется на: [цвет1]
1.1) вкладка 1.1
1.2) вкладка 1.2 [цвет3; у этих 4 вкладок]
1.3) вкладка 1.3
1.4) вкладка 1.4
2) профессия 2 Подразделяется на: [цвет1]
2.1) вкладка 2.1 Подразделяется на: [цвет2]
2.1.1) вкладка 2.1.1
2.1.2) вкладка 2.1.2 [цвет3; у этих 4 вкладок]
2.1.3) вкладка 2.1.3
2.1.4) вкладка 2.1.4
2.2) вкладка 2.2 Подразделяется на: [цвет2]
2.2.1) вкладка 2.2.1
2.2.2) вкладка 2.2.2 [цвет3; у этих 4 вкладок]
2.2.3) вкладка 2.2.3
2.2.4) вкладка 2.2.4
3) профессия 3 Подразделяется на: [цвет1]
3.1) вкладка 3.1
3.2) вкладка 3.2
3.3) вкладка 3.3
3.4) вкладка 3.4 [цвет3; у этих 7 вкладок]
3.5) вкладка 3.5
3.6) вкладка 3.6
3.7) вкладка 3.7
4) профессия 4 Подразделяется на: [цвет1]
4.1) вкладка 4.1
4.2) вкладка 4.2
4.3) вкладка 4.3 [цвет3; у этих 5 вкладок]
4.4) вкладка 4.4
4.5) вкладка 4.5
5) профессия 5 Подразделяется на: [цвет1]
5.1) вкладка 5.1
5.2) вкладка 5.2 [цвет3; у этих 2 вкладок]
Анонимный Ах да, забыл.
br короче
Иначе будет прокручивать окно к id akula-z Здравствуйте!
Скажите, пожапуйста, как убрать рамку вокруг табов? NMitra Здравствуйте, какой именно вариант? Какая именно рамка, общая? Рамку делает свойство border: http://shpargalkablog.ru/2013/12/border.html akula-z Да, общая рамка, вокруг текста.
То есть, мне надо просто удалить border: http://shpargalkablog.ru/2013/12/border.html NMitra Верно, в нужном месте убрать border или border-top и т.п. sat Добавил табы по наведению в joomshopping, в карточку товара. Все работает отлично, но вкладки при открытии не растягивают страницу вниз, как было, когда стояли в коде, а выводят содержимое сверху. Подскажите, плиз, что сделать, чтобы было правильно? NMitra Покажите URL с кодом, возможно стили конфликтуют sat На компе делаю.Вот, на скорую руку, закинул http://satinternet.ru/explore/features/2013-04-03-13-04-04/shoping/product/view/9/1 NMitra Обёртку сделайте внутри div с
overflow: auto;
height: 208px; /* ваша высота */ sat То есть, весь это код таба обернуть?
NMitra Нет, внутри div, например, не
sat Спасибо, получилось. Извиняюсь за дерзость)), а есть столь же простой вариант, чтобы без прокрутки? NMitra Предыдущий комментарий не к той статье написала 🙂
Увеличьте высоту height: 300px;
В CSS:
#raz < /* корпус */
position: relative;
height: 300px; /* корпус */
border-top: 30px solid #fff;
>
Лёха
слэш в конце это пережиток Doctype XHTML1.0
в html5 не нужен он