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

HTMLПоследнее время мы работаем над новым проектом и я увлеклась созданием страниц и изучением HTML Сначало казало, что это темный и страшный лес, а потом стало очень интересно. Особенно когда надо решить какую то задачку)))

Поэтому открываю новую рублику по верстке и буду сюда записывать, то что мне пригодилось

Итак сегодня посмотрим как закрепить на экране верхнее меню, что бы при прокрутке страницы оно оставалось наверху)))

Тут я закрепила наверху меню, ширеной на всю страницу и высотой 100px

<head><meta charset=»utf-8″>

<title>Фиксированный блок</title>

<style>

.menu {

position: fixed; /* Фиксированное положение */

    top: 0%; /* Расстояние сверху */

width: 100%; /* ширина блока */

padding: 10px; /* Поля вокруг текста */

background: #000; /* Цвет фона */

}

.text { height: 100px; } /* Высота блока */

</style>

</head>

<body>

<div class=»menu»>Ваш блок</div>

<div class=»text»></div>

</body>

</html>

Вот такой кусочек, выбирайте сами настройки которые нужны вам в конкретной задаче.

<head><meta charset=»utf-8″>

<title>Фиксированный блок</title>

<style>

.menu {

position: fixed; /* Фиксированное положение */

right: 10px; /* Расстояние от правого края окна браузера */

left: 10px; /* Расстояние от левого края окна браузера */

top: 10%; /* Расстояние сверху */

width: 100%; /* ширина блока */

padding: 10px; /* Поля вокруг текста */

background: #000; /* Цвет фона */

border: 1px solid #333; /* Параметры рамки */

}

.text { height: 100px; }  /* Высота блока */

</style>

</head>

<body>

<div class=»menu»>Ваш блок</div>

<div class=»text»></div>

</body>

</html>

До встречи в новых статьях на http://bizmam.allenyshka.net/

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

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