Html раскрывающийся блок – Как сделать, чтобы раскрывающийся div не сдвигал блоки снизу? — Хабр Q&A

Раскрывающиеся блоки для подсказок или дополнительной информации

Здравствуйте уважаемые начинающие веб мастера.

Очень часто возникает необходимость разместить на странице подсказку или дополнительную информацию к какому либо слову, словосочетанию или абзацу.

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

Объектом для клика может быть выделенная часть текста или кнопка "Справка" размещёная в удобном месте.

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

При повторном клике на выделенный текст или кнопку, вкладка с подсказкой закроется.

Примеры:

1. Выделенная часть текста.

Бла-бла-бла-бла-бла Справка бла-бла-бла-бла-бла

Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла

 
Код:

Html

<div>Бла-бла-бла-бла-бла-бла <input type="checkbox"/>

<label for="hd-1" >Справка</label> бла-бла-бла-бла-бла-бла
<span>
Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла
Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла
</span>
<div>

Css

.reference {
display: none;
}
.reference ~ .story {
display: none;
}
.reference + label {
font-size: 16px;
padding: 0;
color: green;
cursor: pointer;
display: inline-block;
}
.reference:checked ~ .story {
display: block;
background: Snow;
padding: 10px;
}

2. Кнопка, которую можно разместить в любой части контента.

Бла-бла-бла-бла-бла Справка бла-бла-бла-бла-бла

Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла

 
Код:

Html тот-же что и в первом примере.

Css

.reference {
display: none;
}
.reference ~ .story{
display: none;
}
.reference + label {
position: absolute;
top: 0;
left: 200px;
border: 1px solid #333;
border-radius: 4px;

background: #F0FFF0;
padding: 3px;
color: green;
font-size: 16px;
cursor: pointer;
display: inline-block;
}
.reference:checked ~ .story {
display: block;
background: Snow;
padding: 10px;
}
.spravca {
position: relative;
}

Можно дополнительно оформить раскрывающиеся блоки в css под стиль вашего сайта.

В HTML5 похожая опция заложена по умолчанию.

Реализуется она тегами

1. <details></details> — контейнер, который можно развернуть и свернуть.

2. <summary></summary> — заголовок, по которому можно щёлкнуть, чтоб развернуть контейнер. Повторный щелчёк сворачивает контейнер.

Смотрится и работает эта опция так:

Заголовок

текст текст текст текст

 

Код:


<details>
<summary>Заголовок</summary>
текст текст текст текст
</details>

Теги details и summary по умолчанию блочные элементы, поэтому, если нужно вставить контейнер в строку, ему нужно будет задать свойство display: inline-block;

Можно так же задать и другое стилевое оформление.

Желаю творческих успехов.

В раздел >>>

Рекомендую: Бесплатные HTML шаблоны на русском от TemplateMonster

Раскрывающиеся блоки с скрытым содержанием с помощью CSS3

HTML

<div> <div> <input type="radio" name="tabs" checked> <label for="tab1" title="Вкладка 1"> <p>Блок 1</p><div></div></label> <input type="radio" name="tabs"> <label for="tab2" title="Вкладка 2">Блок 2<div></div></label> <input type="radio" name="tabs"> <label for="tab3" title="Вкладка 3">Блок 3<div></div></label> <input type="radio" name="tabs"> <label for="tab4" title="Вкладка 4">Блок 4<div></div></label> <section> <p> Cодержание 1.... </p> </section> <section> <p> Содержание 2.... </p> </section> <section> <p> Содержание 3.... </p> </section> <section> <p> Содержание 4.... </p> </section> </div> </div>

CSS

.main { width:100%; min-width:360px; } /* Базовый контейнер табов */ .tabs { width: 100%; padding: 0px; margin: 0 auto; } /* стили вкладок (табов) */ .tabs label { display: table-cell; width:1%; height:50px; margin: 0 0 -1px; padding: 15px 15px; font-weight: bold; text-transform: uppercase; text-align: center; vertical-align:middle; color: #aaa; background: #f1f1f1; } /* изменения стиля заголовков вкладок при наведении */ .tabs label:hover { color: #888; cursor: pointer; } /* стили для активной вкладки */ .tabs input:checked + label { color: #555; background: #fff; } .tabs input:checked + label > div:after { content: ''; position: absolute; width:0; height:0; top:80px; border: 15px solid transparent; margin-left:-15px; border-top-color: #292929; } /* активация секций с помощью переключателя :checked */ #tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3, #tab4:checked ~ #content4 { display: block; } /* стили секций с содержанием */ section { display: none; padding: 15px; background: #fff; } .tabs input { display: none; }

JAVASCRIPT

Плавающий блок CSS

Наведи курсор

Здравствуйте уважаемые начинающие веб-мастера.

Всем встречались оживающие пункты меню и другие элементы при наведении курсора.

Создаётся такой эффект свойством CSS transition, а 3D эффект свойством box-shadow.

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

Пример элемента в начале статьи.

Код:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
.element {
color: rgba(0, 0, 0, 0.8);
padding: 30px 5px 0 5px;
position: relative;
display: inline-block;
width: 100px;
height: 80px;
background-color: #fff;
border-radius: 5px;
border: 2px solid rgba(0, 0, 0, 0.5);
-webkit-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.element:after {
content: "";
border-radius: 5px;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
opacity: 0;
-webkit-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1));
transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.element:hover {
-webkit-transform: translate(10px);
transform: translate(10px);
}

.element:hover:after {
opacity: 1;

}
</style>
</head>
<body>
<div>Наведи курсор</div>
</body>
</html>

Обратите внимание как в этом примере реализован 3D эффект. Тень заданная в псевдоэлементе :after присутствует с самого начала, но полностью прозрачная.

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

Желаю творческих успехов.

Рекомендую: Бесплатные HTML шаблоны на русском от TemplateMonster

Запись опубликована в рубрике CSS основы. Добавьте в закладки постоянную ссылку.

Как сделать блок по центру в css, а также сделать его невидимым

Как сделать блок по центру в css

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

Центрирование

Есть много элементов на веб-странице, которые могут по дизайну стоять по центру. Например, заголовки, логотип в шапке или информация в футере. Но как выровнять ее идеально по центру? Конечно, нужно понимать, что высчитывать вручную отступы или применять позиционирование не стоит, когда есть замечательное значение свойства margin – auto:

.block{ margin: 0 auto; }

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

Как сделать блок по центру в css

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Элементу нужно задать ширину. Обязательно. Я объясню почему. Например, он находится в общем контейнере шириной 980 пикселей. И если вы не зададите явную ширину блоку, то как он выровняется по центру, если он и без этого занимает всю ширину? В общем, достаточно записать width или max-width и центровка будет работать.

Таким же способом можно отцентрировать и те блоки, которые будут вложены уже в этот. Вообще уровень вложенности никак не помешает центровке.

Как создать блок в css и его внешний вид

Я уже говорил в одной из предыдущих статей, что блочные элементы создаются тегом div. Он парный. Это просто пустой контейнер для содержимого. Ему нужно также задать стилевой класс или идентификатор, чтобы получить возможность обращаться к нему через css. Допустим, так:

<div class = "post-anonce"></div>

<div class = "post-anonce"></div>

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

.post-anonce{ margin: 10px; padding: 15px; background: #ccc; border-radius: 15px; width: 250px; height: 220px; }

.post-anonce{

margin: 10px;

padding: 15px;

background: #ccc;

border-radius: 15px;

width: 250px;

height: 220px;

}

Мы дали нашему фрагменту много разных правил. Например, внешние и внутренние отступы, фон, закругление углов, а также основные размеры – ширину и высоту.

Как сделать блок по центру в css

Добавим содержимое

Мы создали блок для анонса, но самого анонса в нем пока нет. Давайте его добавим, чтобы было как на реальном сайте. Что вообще включает в себя анонс? Обычно дату публикации и имя автора, заголовок статьи, картинку-миниатюру и кнопку читать далее. Но давайте сделаем простой анонс: заголовок, картинка и кнопка.

<div class = "post-anonce"> <img src = "html.png"> <h2>Заголовок статьи</h2> <p>Это текст анонса, обычно в него помещаются первые 40-50 слов из статьи, Чтобы читатель мог примерно понять, о чем она будет.</p> <a href = "#">Читать полностью</a> </div>

<div class = "post-anonce">

<img src = "html.png">

<h2>Заголовок статьи</h2>

<p>Это текст анонса, обычно в него помещаются первые 40-50 слов из статьи,

Чтобы читатель мог примерно понять, о чем она будет.</p>

<a href = "#">Читать полностью</a>

</div>

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

Картинку мы задали, как будто она лежит в той же папке, что и css-файл, в котором задаются эти стили. Теперь остается оформить ее:

Как сделать блок по центру в css

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

.post-anonce img{ width: 64px; height: 64px; padding: 10px; float: left }

.post-anonce img{

width: 64px;

height: 64px;

padding: 10px;

float: left

}

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

Как сделать блок по центру в css

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

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

Как сделать блок невидимым в css

В начале я обещал вам еще несколько манипуляций с блоками. Рассмотрим их коротко, они касаются видимости элемента на странице. Например, добавим только что созданному блоку такое свойство: display: none;

Обновите страницу и вы увидите, что на ней ничего нет – блок исчез. Другой способ убрать его – сделать прозрачным. За это отвечает свойство opacity. По умолчанию все элементы на странице непрозрачные, то есть имеют opacity: 1. Если задать opacity: 0, то блок станет полностью прозрачным. Также можно задавать значения между этими цифрами.

Применение на практике

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

<div class = "show-anonce">Наведи сюда, чтобы увидеть анонс</div>

<div class = "show-anonce">Наведи сюда, чтобы увидеть анонс</div>

Так мы создали нужный блок.

.post-anonce{ Opacity: 0; }

.post-anonce{

Opacity: 0;

}

Сделали анонс прозрачным.

.show-anonce:hover + .post-anonce{ opacity: 1; } .post-anonce:hover{ opacity: 1; }

.show-anonce:hover + .post-anonce{

opacity: 1;

}

.post-anonce:hover{

opacity: 1;

}

Эти правила означают следующее: при наведении на блок show-anonce наш анонс будет становиться непрозрачным, то есть полностью видимым. Тоже произойдет и когда курсор наведен на сам анонс, чтобы он не пропадал из виду сразу.

Как сделать блок по центру в css

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

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

Как сделать блок по центру в css

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее Как сделать блок по центру в css

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

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

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