Div-ные слои и мой новый дизайн

Ещё раз захотелось сверстать макет без использования таблиц. Ну, там где надо представить табличные данные, я таблицей воспользуюсь, а вот для создания дизайна небольшому сайту-визитке я хочу попробовать воспользоваться только DIV и CSS. Собственно, цель этой заметки записать как делается классический дизайн с примером использования. Просто я часто забываю по какой причине я использовал тот или иной приём. И так, в связи с этим я хочу ввести ряд изменений.

Проведу небольшой экскурс в прошлое. Почему я располагал каскадные таблицы стилей в теле страницы. Дело в том, что мои пользователи часто сохраняли странички сайта в виде обычного HTML текста. Дабы мои пользователи не страдали от того, что страничка у них дома отображается не так как через интернет, я решил включить CSS внутрь тела самих страничек. Пользователи были рады этому решению и оно сохранилось на протяжении многих лет работы моего сайта. Но дело в том, что я использую маленькие CSS и продолжаю их вклинивать в тело страничек. Но я думаю, что пора ломать подобные стереотипы и выводить CSS во внешние файлы. Ещё один косяк выплывает при выводе CSS кода во внешний файл и он заключается в том, что я подставляю все цвета в виде констант которые прописаны в ASP. Чисто принципиально я от них могу избавиться, но если я от них избавлюсь в CSS, то придётся прошерстить все страницы сайта и заменить их в тексте всех страничек. Будет чем заняться долгими зимними вечерами...

По дизайну: я хочу оставить резиновый дизайн с фиксированной левой колонкой.

И так, слои вроде бы располагаются только горизонтально, но на самом деле их можно сдвигать и накладывать друг на друга. Чтобы их сдвинуть в лево или право, нужно воспользоваться свойством float. Например, колонка шириной в 127 пикселей и сдвигом в лево реализуется следующим набором свойств:

#menubar {float: left; width: 127px; padding: 5px; margin: 0px 5px 20px 0px;}

За одно добавлены свойства padding для установки полей вокруг текста и выставлены свойства отступов блока: сверху — 0, справа — 5, снизу — 20 и слева — 0 пикселей. Цвет фона я не указываю, так как они будут использоваться из основного фона заданного в CSS.

Колонка с контентом будет растягиваться по всей ширине и занимать всё свободное место. Для неё я буду использовать следующий код:

#content {margin: 0px 5px 0px 137px; padding: 5px; border-left: 1px solid #000;}

При создании этого контейнера есть маленькая тонкость. Он выводится над предыдущим слоем и затирает его содержимое. Чтобы не произошло затирание левой колонки, необходимо задать свойство отступа слева. Он у меня получится: 127+5+5+5. В него входят обтекание текста и отступ справа. В дальнейшем возможно будут подвижки по размерам. Разделительную линию я сделал с использованием одиночной линии в виде левой стороны рамки.

Короче визуально получится тоже самое, что и было ранее. Но уменьшится размер файлов для скачивания, а так же будет возможность более гибко настраивать дизайн под разные случаи жизни. Возможно получится подружить мой сайт со смартфонами с малюсенькими экранчиками. Недавно столкнулся с тем, что на смартфонах с маленькими экранами Internet Explorer разбивает табличный дизайн на несколько составляющих и выводит только самый широкий из них, а для работы с меню и прочими радостями жизни приходится полчаса лазить по запутанному меню и навигации. Так, что я попробую победить данную проблему.

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

Будет время, попробую разобраться с тем как от этого разрыва избавиться. Может дополнительные контейнеры создать или свойство прописать для фиксации высоты.

Планы на корректировку сайта

И так, новые планы на реализацию:

• Вынос CSS во внешний файл.
• Избавиться от цветовых констант в скриптах.
• Поискать решение проблемы с разрывом вертикальной линии.
• Сделать перемещаемое меню.

Разъясню, по поводу манипуляций с меню. Я хочу сделать так, чтобы при низких разрешениях менюшка выводилась не с боку, а сверху (сразу под логотипом). Это можно сделать на javaScript, но я хочу поискать вариант решения на чистом CSS. Вроде бы так сделано у Степанищева, но мне пока некогда лазить по исходникам и вычитывать моменты для реализации аналогичной функциональности.

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

Параллельно я перевожу архив на HTML5, но это движется крайне медленно. Осталось ещё несколько разделов отвечающих за несколько лет. А ещё меня интересует, упадёт ли тИЦ и PR, после основательного редизайна. Дело в том, что люди-то не заметят разницы между новым и старым дизайном, а вот поисковые системы увидят очень сильно переработанную страничку, которая сильно изменилась в глазах роботов.

Тэги: SEO

Отредактировано:2020-09-28 08:17:12