События в этот день
(даты, события, история)

Узнай про космос
(ввселенная, планеты, фазы луны)

Новые статьи:

Что такое родина? и как её понимают люди разных поколений?


Самые жестокие люди в истории мира


Самые глубокие места в мире


Объекты-призраки. Обман зрения.


Египет и Сирия в 19, 20 веке. Фотографии Как выглядели.


Что делать, чтобы вас ненавидели на работе или в вузе?


Все дороги ведут в Рим. Невский трезубец. Или "масоны" в Петербурге.


Как жили в Древнем Риме? День из жизни римлянина


Интересные сны, которые снились знаменитым людям.


Стамбул сегодня. Как выглядет бывший Константинопль. Фотографии. Фото


Защита сайта от СПАМА. проверка в форме.



“Высшая и самая характерная черта нашего народа – это чувство справедливости и жажда ее.”

Федор Достоевский

Следующая цитата »

Это факт!


Миллионный житель Москвы родился в 1897 году.

Следующий факт »

Ра оставил тебе послание!... (0о0)

Объеденить два блока в одном. css, html


html,css, блок, два в одном, блока, в один блок, встроить, объеденить, уместить, сделать, 2 в 1, объединение блоков, div, див, блок из, в одном, несколько,

Бывает, что нужно встроить два блока в один. Обычно это нужно, чтобы создать свою новостную ленту, кнопку, ссылку-блок или список статей сайта. Для того, чтобыы создать такой блок придется создать 3 блока и 2 маленьких блока всавить в один большой.
В итоге, после написания кода, у вас должно получиться что-то вроде этого блока:
блок 1
блок 2


Приступим. Создадим основной блок divnav. В него поместим маленький блок firstDiv и еще один чуть-чуть побольше блок secondDiv

<div class="divnav">
<div id='firstDiv'>первый блок</div>
<div id='secondDiv'>второй блок</div>
</div>


Вообщем-то это всё. Теперь, создадим стиливое оформление для блоков.

.divnav{ /*стиль общего блока*/
max-width:300px;/*ширина блока*/
display: flex;/*показываем, что это общий блок и в нем будут содержаться "влитые" 2 блока*/
}
#firstDiv { /*стиль 1-го блока*/
margin-bottom:5px;
text-align:center; /*текст по-центру*/
border-radius:8px 0 0 8px; /*скругляем края с левого края*/
float : left; /*показывает, что слияние блока идёт с левой стороны*/
}
#secondDiv { /*стиль 2-го блока*/
border-radius:0 8px 8px 0; /*скругляем края у второго блока, только справа*/
font-size:14px; /*размер текста*/
text-align:center; /*текст по-центру*/
margin-bottom:5px;
height:70px; /*задаем высоту блока*/
float : left; /*тоже показываем, что блок "приклеен" слева */
}




Вообщем-то блок готов! Вы можете вставить в него картинку или же сделать из него блок-ссылку или кнопку. Для этого просто вставьте в один из блоков img с картинкой, а для создания ссылки - блок div, общего блока, замените на тег *a href*.

<a class="divnav" href="ссылка">
<div id='firstDiv'>первый блок</div>
<div id='secondDiv'>второй блок</div>
</a>







ОТКРЫТЬ КОММЕНТАРИИ Закрыть комментарии




Введите ЛЮБОЕ число ЦИФРОЙ от НУЛЯ до ДЕСЯТИ (проверка на бота)



P.S. сайт и некоторые статьи и сказки (с ошибками, неполные) корректируются, дорабатываются и удаляются.
Желательно, чтобы вы добавили в комментарий, то что бы вы хотели бы исправить, удалить или наоборот добавить на портал (сайт) , такие комментарии читаются и обязательно учитываются добрым админом :). (например: "добавьте раздел поэзии", "исправьте ошибку на странице: (recsgames.ru/example44)", "добавьте функцию такую-то" и прочее).
С уважением, создатель портала. :)





Почитать интересные истории:




Сырно написано? Заложи страницу в закладки :)








×

Рассказы из категории: Создание сайта (html,css,php,js)



info:

Bonjour Mon'Amie! Спасибо за прочтение!
Всем веселья и добра! :)