Добрый день, и так, в этом уроке приступим настраивать дизайн для сайта ucoz, тот наш дизайн который я установил пару уроков назад. Первым делом что я хотел-бы в нём поменять, это центральную колонку, то-есть ту где будет находится плеер флеш игры и сам текст к игре.

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

Реклама:

На данный момент центральная колонка моего шаблона равна 715 пикселям, а насколько мне известно, некоторые игры которые будут собираться на моём сайте, имеют ширину 800 и больше пикселей. Высота нам не интересна.

Правую-же колонку которую мы называем сайдбар я снесу, или может оставлю, мне этого ещё неизвестно.

В этом уроке я покажу вам несколько инструментов, которые помогают обычному веб мастеру настраивать свой дизайн, а так-же поговорим о некоторых CSS правилах, которые помогают настраивать элементы на сайте, такие как блоки, ссылки, картинки и т.д.

Исследуем элемент.

Первым делом нам нужно исследовать элемент который мы будем расширять. Для этого пройдём в раздел онлайн игры и нажмём на игру, которую мы добавили в прошлом уроке.

Как видите ниже на картинке, у нас центральный блок сейчас выглядит вот так

Его нужно расширить что-бы он заканчивался у нас не перед сайд баром, а за ним. Ну примерно вот так.

Для этого нам нужно узнать стиль который задаёт ширину нашему центральному блоку.

Нам поможет очень хороший инструмент, который позволяет исследовать такие блоки на сайте, и подскажет что за стиль отвечает за настройку блока, в моём случае это центральный блок.

Благо устанавливать этот инструмент на компьютер не надо, он уже давно был установлен в месте с вашим браузером, просто вы о нём не знали.

Так - вот, нажмите на клавиатуре кнопку F12 и волшебный инструмент раскроется. Так-же его можно открыть, если нажать на правую кнопку мыши и выбрать пункт исследовать элемент. Это подходит для браузеров FireFox и Google Chrome, другие браузеры не проверял.

После того как нажали F12, должно было появится дополнительное окно в низу вашего сайта. Выглядит это примерно вот так -

У данного инструмента есть маленькая кнопка, которая помогает выбрать элемент со страницы. Нажмите на эту кнопку и на ведите на тот элемент у которого хотите узнать код, и нажмите на этот элемент.

В инструменте произойдёт следующие, в HTML коде выделится тег, в моём случаи это 'div'. У блока див есть стилевое название 'post', а с право, там где указывает длинная стрелочка, мы видим стили css, которые задают моему тегу DIV (то-есть нашему центральному блоку) стили.

Название "post" связывает данный тег див со стилями, и всё что прописано между фигурных скобок {Здесь} и задаёт нашему блоку стили. На картинке ниже стили обведены в синею рамочку.

Но блок который я выбрал, он нам не подходит! Дело в том что, блок который я выбрал не задаёт ширину нашему центральному блоку, наш центральный блок находится выше в коде, и как бы обворачивает тот блок который я выбрал.

В HTML коде нужно пройти немного выше и найти тот блок который нужен и нажать на него мышкой, для того чтобы он активировался и в правом углу появились его стили.

Обычно такие блоки приходится искать в ручную, их можно определить только по стилям, и если вы разбираетесь в языке Css.

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

В моём случае я просто отключил стиль который отвечает за ширину центрального блока и мой блок стал меньше. Всё теперь для меня стало ясно что я нашёл именно тот блок который мне был нужен, осталось его настроить под себя.

Пропишем новые стили для блока.

Всё нужный блок обнаружен, теперь нужно определить какое название у стиля для этого блока, и найти где прописан этот стиль.

Это тоже делается совсем не сложно, название стиля мы уже знаем как найти, в моём случае это #content {Стили}

Теперь нужно отыскать где этот стиль прописан на нашем сайте. Это тоже делается очень просто, видите на картинке ниже, напротив стилей есть такая строчка my.css:164.

Так вот, это говорит что данный стиль находится в файле my.css на строчке 164.

Как отыскать этот стиль?

Для этого зайдите в панель управления, и нажмите на кнопку дизайн и кнопку управление дизайном (CSS)

Откроется страница со стилями.

На ней нужно отыскать 164 строчку, на которой будет название нашего стиля. Мой стиль как вы помните называется #content.

Ниже я создал код который нужно вставить за место старого.

Разберём немного код.

Как видите код не сложный, мне нужно было удалить старый код float (Который отвечал за обтекание) и изменить код width который задаёт ширину в css.

В нём я изменил всего пиксели на проценты, поставил 100%. Теперь мой блок растягивается на всю ширину родительского окна, родительское окно это центральный блок всего сайта.

Вот что получилось.

Вот пожалуй и всё, в этом уроке я добился что-бы блок растягивался на всю ширину сайта. В следующем уроке уберём сайдбар (БОКОВУЮ КОЛОНКУ) которая в данный момент находится внизу сайта.

В следующем уроке поговорим почему так произошло.

Важно! Если вдруг у вас получилось настроить сайт с помощью моих уроков, и вам уже не в первый раз он помогает разобраться с разными задачами, тогда не забудьте поблагодарить Автора в комментариях! После благодарности Автор знает что труд был ценен и полезен, а то время которое было затрачено на урок, не потрачено в пустую и пригодилось хорошим людям.
Спасибо за внимание и понимание.
Реклама:

1. Благодарность бывает разная, поддержка проекта в денежном выражении.
2. Поделится ссылкой, на пример на своём сайте или в соц сетях.
3. Оставить комментарий на сайте.

Есть много разных вариантов как отблагодарить Автора.