Авторский знак. Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.

октябрь 2020
Пн Вт Ср Чт Пт Сб Вс
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31


Чувашия-это моя Россия

С двумя колонками структура страницы.

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

При этом как оформляется файл каскадных таблиц стилей приводится чуть ниже и там же все объясняется.

                 @charset "utf-8";
                 /* CSS Document */

                   body {
	                       background: #FFFFFF;
	                       background-image: url(../fon/bkgnd.jpg);
	                       margin: 0;
                         }
	               div#nav {
	                       width: 85%;
		                   position: relative;
		                   left: 7.5%;
		                   background: #F5F5F8;
		                   background-image: url(../fon/b14.jpg);
		                   padding-top: 50px;
		                   padding-bottom: 50px;
		                   font-family: Georgia, "Times New Roman", Times, serif;
		                   font-size: 28px;
		                   color: #636;
		                   text-align: center;
                                }
                   table  {
	                        width: 100%;
		                    height: 72%;
	                        border-spacing: 0px 0px;
	                        margin: 0 0 0 -2px; 
	                       }
                   td#tdleft {
	                          }
                   td#tdcenter  {
	                        width: 75%;
	                        position: relative;
	                        left: 7.5%;
	                        background: #FCDC99;
	                        }
                   td#tdright {
	                        width: 25%;
	                        position: relative;
	                        right: 7.5%;
                            background: #CCC;
	                        background-image: url(../fon/628.jpg);
	                       }
                   div#copy  {
                            width: 85%;
		                    position: relative;
		                    left: 7.5%;
		                    background: #FCF;
		                    background-image: url(../fon/09.jpg);
		                    padding-top: 20px;
		                    padding-bottom: 20px;
		                    font-family: Verdana, Geneva, sans-serif;
		                    font-size: 18px;
		                    color: #FFF;
		                    text-align: center;
		                    margin: -1px; 
	                       }

Суммарную ширину колонок сделаем равной 85% от окна и тела страницы сайта.

Ширина блока div#copy( верхняя часть) задается width: 85%; Тогда с двух сторон остаются полосы по 7.5% шириной. По умолчанию обычно все начинается слева, поэтому мы должны сдвинуть блок на 7.5% от левой стороны и это задается строкой position: relative; left: 7.5%; . Убираем двойную рамку border-style: double; в блоке, чтобы Вас она не смущала при расчетах( double - двойная рамка увеличивает на несколько пикселей размер блока). Все остальное на странице сайта оставляем не тронутым.

Ширина table должна быть width: 100%; , как обычно, межблочное расстояние( вертикальное и горизонтальное) убираем border-spacing: 0px 0px; . Остальное также.

Ширина центральной колонки страницы td#tdcenter пусть будет 75% width: 75%; , сдвигаем на величину полоски 7.5% position: relative; left: 7.5%; . Остальное оставляем.

Тогда ширина правой колонки td#tdright останется 25% width: 25%; . Правую колонку сдвигать на ширину полосы придется с правой стороны, то есть position: relative; right: 7.5%; . Остальное не трогаем.

"Подвал", то есть блок div#copy должен как и верхний блок быть шириной 85% width: 85%; , сдвигается слева position: relative; left: 7.5%; . Все.

Теперь Вы убедились, что зная функциональные возможности каскадных таблиц стилей можно легко и просто видоизменять страницу сайта. Нет занудных и кропотливо-долгих историй созидания. Есть интересный и вдохновляющий труд при создании сайта. Просто и быстро, легко и интересно создавать сайт собственными руками и головой. Пробуйте и творите согласно Вашему вкусу и желанию. Выбирайте яркие и приятные краски. Строгие и в то же время ласкающие глаза тона и цвета страниц сайта. Здесь нужна мера и умеренность. Хотя на вкус и цвет - ... . О каскадных таблиц стилях читайте здесь. Удачи в добрых начинаниях.

Думаю, нам пора переходить к разметкам и стилевому содержанию текстовых документов: строкам, абзацам, текстам и к многим еще приятным и интересным занятиям.


seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...

обратно на главную   назад   дальше   вперед

ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: