аукцион / FPR / donate / услуги / RSS / распечатать / вход 
Мой мир
Вконтакте
Одноклассники

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

[15 декабря 2011 | 16 декабря 2011 | 19 декабря 2011]

Ещё раз захотелось сверстать макет без использования таблиц. Ну, там где надо представить табличные данные, я таблицей воспользуюсь, а вот для создания дизайна небольшому сайту-визитке я хочу попробовать воспользоваться только 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 разбивает табличный дизайн на несколько составляющих и выводит только самый широкий из них, а для работы с меню и прочими радостями жизни приходится полчаса лазить по запутанному меню и навигации. Так, что я попробую победить данную проблему.

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

Глюк с высотой вертикальной линии.

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

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

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

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

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

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

Тэги: SEO

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




5 комментариев
Имя: Вадим 🖉
Попробовал зайти через оперумини, то все осталось по прежнему, но вот на iphone (жаль, но не мой) все работало отлично.
Комментарий оставлен: 2011-12-16 00:00:00


Имя: Orcinus Orca 🖉
Опера — не корректно поддерживает CSS. Эта игра слов зародилась на одной из конференций в Новосибирске, это слово я от Тёмы Лебедева услышал.
Комментарий оставлен: 2011-12-16 00:00:00


Имя: Вадим 🖉
div-ные слои — интересная игра слов ;)
Комментарий оставлен: 2011-12-16 00:00:00


Имя: West Blogger 🖉
Я вот никогда не проверял свой блог на кросс браузерность, а уж тем более на то как он выглядит в различных самртфонах пр. Залезал через свой телефон (опера мини) ничего не заметил фатального, единственное что шапка высоковата, неудобно прокручивать, но там для того чтобы от поста до поста добраться тоже приходится долго ездить, разрешение экрана, как никак...

По поводу ТиЦ имхо можешь не беспокоится, самое главное урлы у страниц не менять, а вот ПР... хм, не знаю даже. Можно в интернете покапаться на эту тему, м.б. был у кого опыт переезда с таблиц на дивы.
Комментарий оставлен: 2011-12-17 00:00:00


Имя: Orcinus Orca 🖉
West Blogger, подобные смены дизайна некоторые поисковики считают за то, что домен был куплен другим человеком и потом появился контент с одинаковыми урлами. Я в своё время аналогичную фигню на Яндексе видел.

А вот по поводу кросс-браузерности, опера мини не воспринимает команду @media handheld в CSS, вот по этому она не смогла корректно отработать мою логику. Но если эти команды не поддерживаются каким-либо браузером, мой дизайн просто остаётся старым.
Комментарий оставлен: 2011-12-17 00:00:00



Этот сайт использует файлы cookies, чтобы упростить вашу навигацию по сайту, предлагать только интересную информацию и упростить заполнение форм. Я предполагаю, что, если вы продолжаете использовать мой сайт, то вы согласны с использованием мной файлов cookies. Вы в любое время можете удалить и/или запретить их использование изменив настройки своего интернет-браузера.

Сообщайте мне о замеченных ошибках на: web@orcinus.ru. Все пожелания и советы будут учтены при дальнейшем проектировании сайта. Я готов сотрудничать со всеми желающими. В некоторых случаях, мнение автора может не совпадать с мнением автора! Phone: +7-902-924-70-49.

Top.Mail.Ru
Top.Mail.Ru LiveInternet Rambler's Top100 Яндекс.Метрика