ПРОДОЛЖЕНИЕ
НАЧАЛО В ПРЕДЫДУЩЕЙ СТАТЬЕ
Я разделил статью на две части, что-бы чтение не утомляло человека своими лолгими и нудными расужденичми. вторая часть логически продолжит первую часть, тка, как в ней нехватает самого главноного, а именно стилей разметки страницы. И вот сейчас побыстрому пройдёмся по стилям и я постараюсь не докучать своими рассказами как они тут устроены. И вот так выглядят стили к первой части статьи.
В первой строчке обрубаются все margin:0; padding:0; Все поля и отступы устанавливаются в ноль. Что, бы не мешались своим присутствием, а если где и нужны будут, то выставим столько сколькотнадо.
Устанавливается в NAV-bare GRID: 1, Логотип; 1. название сайта; возможное место для строки поиска, ну и последнее меню. Да ещё делается почсветеа NV-bara туманом, что-б соотвествовало названию сайта. Меню тоже состоит из пяти пунктов и выравнивается GRID.
Меню-mini обычное выравнивеание нужнодля того , что-бы при сжатии экрана пряталось основное меню и выскакивало мини-меню для телефонов. В каком месте оно будет появлятся подкручивается:
top: 10px; left: 175px; width: 150px; height: 340px; margin: 10px; - вот этими крутилками
Механизм регулирования когда нужно исчезать основному меню, а появляться МИНИ-МЕНЮ и наоборот замучен вот здесь.
Если размер экрана достигает 800px, то основной"меню-бар" исчезает, а появляется "мини-меню", или наоборот, если экран становится от 800px и больше то "мини-меню исчезает" и появляется основное меню.
Всё остальное в стилях описывать не буду, так, как нужно уже догадываться самим. через "могучий и великий яндекс".
Там находятся сам HTML конструктор и вместе с ним файл стилей с картинками связанные друг с другом: Ссылки на оригинал материала