HTML верстка. Урок 3: Ячейки Search и TopMenuТеперь будем делать верстку для ячеек Search и TopMenu. Пока не будем трогать тень под ними - с ней мы разберемся в следующем уроке.
Сделаем фон для каждой из ячеек.
В Search поместим вложенную таблицу. Ячейки таблицы будут с небольшим отступом справа (чтобы надпись "Search" не сливалась с формой ввода, а та - с кнопкой). Сама форма поиска, как и ячейка, в которой она находится, будет 100%-ширины. Откройте страницу с версткой и порастягивайте ее в ширину. Как видите, форма ввода тоже растягивается.
Но самое оригинальное мы сделаем с ячейкой, в которой должна быть надпись ":: SEARCH". Назовем ее hdr. Во-первых, в ней нужно указать параметры шрифта (верхний регистр, жирный). Во-вторых, изображение точек - dots.gif - сделаем его фоном ячейки. Причем фон можно точно позиционировать (background-position: 10px - отступ от левого края ячейки). И сделаем padding-left: 21px (отступ текста), чтобы текст не налезал на точки. Возможно, вам покажется, что это лишние сложности - не проще ли было бы:
или
В TopMenu мы тоже сделаем вложенную таблицу из пяти ячеек одинаковой ширины (по 20%). Возникает вопрос: как лучше сделать разделители между элементами меню? Можно сделать их изображениями шириной 1 пкс, добавить в таблицу еще 5 ячеек (по одной после каждого пункта меню) и поместить в них разделители. Но еще в первом уроке мы договорились как можно больше html-кода вынести в style.css. Так что сделаем div.jpg фоном ячеек Menuitem и привяжем его к правому краю. Для ссылок в меню пропишем свойства шрифта (10 пкс, верхниц регистр, белый, жирный, без подчеркивания).
Меню и строка поиска готовы. Посмотрите html-страницу, а также полный текст файлов index.html и style.css. Синим цветом в файлах помечен html-код, который мы добавили на этом уроке. Урок 1 | Урок 2 | Урок 3 | Урок 4 | Урок 5 | Урок 6 | Урок 7 | На главную страницу |