Обо всём мне близком и далёком

Лучше скажи мало,
но хорошо. Козьма Прутков

Как я самостоятельно создавал этот сайт.

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

Вертикальное меню

Меню страницы

Главное меню
Стили в заголовке HTML-документа
Вертикальное меню
Нижнее меню
Вспомогательное меню

Ниже блока главного меню слева я вставил блок вертикального меню, в котором у меня будет восемь пунктов, а справа от вертикального меню - блок, в котором я буду помещать контент (содержание страницы).

В тег <style> в заголовке страницы я добавил три селектора:

Селектор .vertical_menu - это класс оформления прямоугольной области под пункты вертикального меню, этим классом оформления я задал тегу <div> ширину, равную 20% от ширины родительского тега (это тот тег, напоминаю себе, который задаёт размеры и фон моей странички - тег с селектором .page), фон background-color: я временно, как и в случае с горизонтальным меню, сделал красным, и атрибутом float: указал браузеру, что этот блок должен быть расположен слева в окне браузера, а остальные элементы должны обтекать этот блок справа.
Селектор .vertical_menu_item - это класс оформления пунктов вертикального меню, здесь я задал высоту пункта height: , ширину не указывал, поэтому блок пункта вертикального меню будет иметь ширину родительского блока - ширину области, выделенной под вертикальное меню; фон пункта меню я временно, как и в случае с горизонтальным меню, сделал зелёным, и атрибутом margin-bottom: задал поле под пунктом меню, равное 4px.
Третий селектор .content - это класс оформления области, где я буду размещать основное содержание страницы (сейчас там будут находится остатки моих идей!). Я задал этой области желтоватый фон, окаймил рамкой с округлёнными углами и указал слева поле атрибутом margin-left:, равное 21% от ширины родительского блока (то есть, поле от внутренней границы рамки тега с селектором .page до внешней границы рамки тега с селектором .content).

Я выделил новые элементы в тексте моего HTML-документа жёлтым фоном.

<html>
    <head>
       <title> Моя первая страница сайта </title>
       <style type= "text/css">
           body {background-color: #557bac;}
           .page {width: 1268px; height: 97%; background-image: url('images/site_bottom1300.jpg');
                background-repeat: no-repeat; background-position: center bottom;}
           .chief_menu {margin-top: 10px; padding-top: 2px; height: 36px; width: 758px;}
           .chief_menu_item {margin-left: 10px; margin-right: 10px; margin-top: 2px; margin-bottom: 2px;
                width: 165px; height: 30px; padding-left: 0px; color: #fff; border-left-width: 2px;
                border-left-color: #fff9bd; border-left-style: solid; border-right-width: 2px;
                border-right-color: #fff9bd; border-right-style: solid; float: left;}

      .vertical_menu { background-color: red; width: 20%; float: left;}
           .vertical_menu_item { background-color: green; height: 26px; margin-bottom: 4px; }
           .content { background-color: #fcfadd; margin-left: 21%; width: 76.5%; height: 68%; border: 1px;
                border-color: #719cbf; border-style: solid; border-radius: 10px;
                box-shadow: 3px 3px 5px 0px #719cbf; font-family: 'Times New Roman', Times, serif; }

</style>
    </head>
    <body>
    <center>
       <div class = "page">


<div style = "background-color: #557bac; font-style: bold; font-size: 15px; color: #fff; border-bottom-width: 2px; border-bottom-color: #fff9bd; border-bottom-style: solid;">
<img style = "width: 500px; padding-right: 40px; float: left;" src="images/lblSadovoe.jpg" alt="Заголовок сайта">
<p style = "padding-top: 2px;">Ленинградская область, Всеволожский район, Лесколовская волость, район деревни Верхние Осельки, ж/с Пери </p>
</div>


    <div class = "chief_menu">
          <div class = "chief_menu_item">О товариществе</div>
          <div class = "chief_menu_item">Законодательство</div>
          <div class = "chief_menu_item">Помощь садоводу</div>
          <div class = "chief_menu_item">Интересные ссылки</div>
   </div>

<div class = "vertical_menu">
          <div class = "vertical_menu_item">Учредительные документы</div>
          <div class = "vertical_menu_item">Протоколы</div>
          <div class = "vertical_menu_item">Доска информации</div>
          <div class = "vertical_menu_item">План СНТ</div>
          <div class = "vertical_menu_item">Электросеть СНТ</div>
          <div class = "vertical_menu_item">Дороги СНТ</div>
          <div class = "vertical_menu_item">Водопровод</div>
          <div class = "vertical_menu_item">Реквизиты</div>
   </div>

       <h1> Вот что я задумал сделать: </h1>
          <p style ="background-color: silver; font-weight: bold; text-decoration: underline;"> 2. Ниже горизонтальное меню для перехода на страницы главных разделов сайта;</p>
          <p style ="background-color: pink; padding: 30px; font-size: 15pt; font-family: 'Arial';"> 3. Ещё ниже вертикальное меню для перехода на страницы внутри раздела сайта и справа от вертикального меню само содержание страницы, ради чего она и создавалась;</p>
          <p style ="background-color: silver; width: 250px; color: red;"> 4. Ещё ниже - нижнее меню,</p>

</div>

      </div>
    </center>
    </body>
</html>

Я сохранил этот текст, как обычно, в файле make_site_how.html, и открыл этот файл в браузере Firefox. На экране появилась моя первая страничка, с зелёными пунктами вертикального меню на красном фоне.

Под вертикальным меню и контентом я расположу нижнее меню.

Сайт основан в августе 2012 - 2024 г. © Все права на материалы сайта принадлежат Правлению садоводческого некоммерческого товарищества «Садовое».
Ленинградская область, Всеволожский район, Лесколовская волость, район деревни Верхние Осельки, ж/с Пери
Плагиат не преследуется!