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

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

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

Причины появления депрессии.


Орущие коты мешают спать. Онлайн игра.


Почему в Англии левостороннее движение?


Голубой город. Сиди-Бу-Саид. Тунис.


вирус dinoraptzor.org (динорапторзор) как удалить? Простое РЕШЕНИЕ как удалить вирус!


Как разместить несколько блоков css? (разные варианты)


Были ли Американцы на Луне? Почему развивается флаг?


Регулярные выражения в notepad++


правильно или неправильно вы живёте?


Делаем индикатор загрузки (progress bar)на css,js,html.


Водопровод в Древнем Риме. Что такое Акведук, как работает.



“Русский народ стоит перед неотвратимой и великой задачей создать для себя формы общежития, основанные на духовной свободе и самодеятельности. В муках вынашивает он этот созревающий в нем плод; но первый опыт рождения кончился бесплодными, губительными потугами и судорогами большевистской революции. Поняв свободу как бесчинство разнузданности, он обрел лишь новый и жесточайший деспотизм, неслыханный по глубине и универсальности своего действия.”

Семен Франк

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

Это факт!


 Самый необычный случай выживания в авиакатастрофе произошел 26 января 1972 года. Хорватские террористы взорвали пассажирский самолет *McDonnell Douglas DC-9* авиакомпании *Yugoslav Airlines*, когда он находился на высоте 10 160 м. 27 пассажиров и членов экипажа погибли, однако 22-летняя стюардесса Весна Вулович осталась жива, упав с высоты более 10 км. Самолет упал на заснеженный склон холма, а на месте катастрофы оказался квалифицированный медик, который распознал у Весны признаки жизни и спас ее.

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

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

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



Теги: #статьи портала #Создание сайта (html,css,php,js)


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! Спасибо за прочтение!
Всем веселья и добра! :)