Навигация
Главная
Поиск
Форум
FAQ's
Ссылки
Карта сайта
Чат программистов

Статьи
-Delphi
-C/C++
-Turbo Pascal
-Assembler
-Java/JS
-PHP
-Perl
-DHTML
-Prolog
-GPSS
-Сайтостроительство
-CMS: PHP Fusion
-Инвестирование

Файлы
-Для программистов
-Компонеты для Delphi
-Исходники на Delphi
-Исходники на C/C++
-Книги по Delphi
-Книги по С/С++
-Книги по JAVA/JS
-Книги по Basic/VB/.NET
-Книги по PHP/MySQL
-Книги по Assembler
-PHP Fusion MOD'ы
-by Kest
Professional Download System
Реклама
Услуги

Автоматическое добавление статей на сайты на Wordpress, Joomla, DLE
Заказать продвижение сайта
Программа для рисования блок-схем
Инженерный калькулятор онлайн
Таблица сложения онлайн
Популярные статьи
OpenGL и Delphi... 65535
Форум на вашем ... 65535
HACK F.A.Q 65535
Гостевая книга ... 65535
Содержание сайт... 65535
Вызов хранимых ... 65535
Эмулятор микроп... 65535
Бип из системно... 65333
Организация зап... 60923
Приложение «Про... 60919
Invision Power ... 60586
Оператор выбора... 59707
Подключение Mic... 58644
Модуль Forms 58595
Создание отчето... 58087
ТЕХНОЛОГИИ ДОСТ... 54353
Программируемая... 52878
Пример работы с... 50945
Имитационное мо... 49788
21 ошибка прогр... 44770
Реклама
Сейчас на сайте
Гостей: 9
На сайте нет зарегистрированных пользователей

Пользователей: 13,052
новичок: eugeniofonseca
Новости
Реклама
Выполняем курсовые и лабораторные по разным языкам программирования
Подробнее - курсовые и лабораторные на заказ
Delphi, Turbo Pascal, Assembler, C, C++, C#, Visual Basic, Java, GPSS, Prolog, 3D MAX, Компас 3D
Заказать программу для Windows Mobile, Symbian

Калькулятор на Delphi с переводом в другую систему исчисления + Блок схемы
База данных - рабочее место кассира на Delphi + бд Access
Моделирование процесса обработки заданий на вычислительном центре на GP...

Реклама



Подписывайся на YouTube канал о программировании, что бы не пропустить новые видео!

ПОДПИСЫВАЙСЯ на канал о программировании
Блочная верстка в css
Для начала, создадим базовую структуру HTML-страницы:


Код

<div id="wrap">
<div id="header"></div>
<div id="nav"></div>
<div id="main"></div>
<div id="sidebar"></div>
<div id="footer"></div>
</div>
После этого наполним секции некоторым содержимым для наглядности:


Код

<div id="wrap">
<div id="header"><h1>Заголовок страницы</h1></div>
<div id="nav">
<ul>
<li><a href="#">Раздел 1</a></li>
<li><a href="#">Раздел 2</a></li>
</ul>
</div>
<div id="main">
<h2>Колонка 1</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
</div>
<div id="sidebar">
<h3>Колонка 2</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<ul>
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
</ul>
</div>
<div id="footer">
<p>Подвал</p>
</div>
</div>
У нас получился XHTML-документ без стилей, со структурой, которая позволяет использовать CSS для любых изменений в его отображении.
Этот приём некоторые называют “ластик” - сброс параметров отступов на странице. Ну и заодно зададим основной цвет фона и текста.


Код

body, html {margin:0;padding:0;
background:#a7a09a;
color:#000;}
Теперь нужно расположить всё содержимое страницы в центре и задать ему ширину. Для этого у нас есть контейнер #wrap. Тут же зададим ему цвет фона.
Метод, который мы используем, основан на том, что если левый и правый отступы элемента определены как auto, то он всегда будет находиться в центре окна браузера.
А чтобы предотвратить проблемы в некоторых браузерах, связанные с тем, что окно может быть меньше контейнера #wrap, установим минимальную ширину и его и всей страницы.


Код

body,html {
margin:0;
padding:0;
background:#a7a09a;
color:#000;
}
body {
min-width:750px;
}
#wrap {
background:#99c;
margin:0 auto;
width:750px;
}
А для наглядности раскрасим фоны всех контейнеров в разные цвета.


Код

#header {background:#ddd;}
#nav {background:#c99;}
#main {background:#9c9;}
#sidebar {background:#c9c;}
#footer {background:#cc9;}
Чтобы две колонки (#main и #sidebar) отображались рядом, определим для них фиксированную ширину.


Код

#main {
background:#9c9;
float:left;
width:500px;}
#sidebar {
background:#99c;
float:right;
width:250px;
}
Чтобы опустить секцию подвала в низ страницы, используем свойство clear, определяющее невозможность нахождения элементов на одной строке с текущим.


Код

#footer {
background:#cc9;
clear:both;
}
Контейнер #nav содержит список ссылок. Расположим его более правильно.


Код

#nav ul{
margin:0;
padding:0;
list-style:none;
}
#nav li{
display:inline;
margin:0;
padding:0;
}
Почти готово. Небольшой тюнинг отступов элементов для лучшего отображения.


Код

#header h1 {
padding:5px;
margin:0;
}
#nav {
background:#c99;
padding:5px;
}
#main h2, #main h3, #main p {
padding:0 10px;
}
#sidebar {
background:#99c;
float:right;
width:240px;
}
#sidebar ul {
margin-bottom:0;
}
#sidebar h3, #sidebar p {
padding:0 10px 0 0;
}
#footer p {
padding:5px;
margin:0;
}
Ну вот и готово. Полученный код можно использовать как основу для серьёзного дизайна, который можно будет изменить простой правкой CSS-файла.
Опубликовал Kest October 27 2008 12:48:35 · 0 Комментариев · 6104 Прочтений · Для печати

• Не нашли ответ на свой вопрос? Тогда задайте вопрос в комментариях или на форуме! •


Комментарии
Нет комментариев.
Добавить комментарий
Имя:



smiley smiley smiley smiley smiley smiley smiley smiley smiley
Запретить смайлики в комментариях

Введите проверочный код:* =
Рейтинги
Рейтинг доступен только для пользователей.

Пожалуйста, залогиньтесь или зарегистрируйтесь для голосования.

Нет данных для оценки.
Гость
Имя

Пароль



Вы не зарегистрированны?
Нажмите здесь для регистрации.

Забыли пароль?
Запросите новый здесь.
Поделиться ссылкой
Фолловь меня в Твиттере! • Смотрите канал о путешествияхКак приготовить мидии в тайланде?
Загрузки
Новые загрузки
iChat v.7.0 Final...
iComm v.6.1 - выв...
Visual Studio 200...
CodeGear RAD Stud...
Шаблон для новост...

Случайные загрузки
PBEditPack
Ics
Библия хакера 2 К...
RAS
PCX
Шейдеры в Delphi
С/C++ Программиро...
База Allsubmitter...
Аватары в комме...
Averaging [Исходн...
Распознавание иде...
Dreamsoft Progres...
Zoom [Исходник на...
DeleteEdit
ЯЗЫК ПРОГРАММИРОВ...
CoolHints2k
Plasma
Indy in Depth Глу...
TrayIcon
Программа предназ...

Топ загрузок
Приложение Клие... 100347
Delphi 7 Enterp... 81003
Converter AMR<-... 20031
Borland C++Buil... 10890
GPSS World Stud... 9994
Borland Delphi ... 7930
Turbo Pascal fo... 6930
Visual Studio 2... 4937
Калькулятор [Ис... 4187
FreeSMS v1.3.1 3494
Случайные статьи
На чем основан поиск
Оглядывайтесь назад
Каковы шансы у про...
Информационные про...
Асбестоцементные т...
ПРИЛОЖЕНИЕ F. СИС...
— снижение рисков ...
Деревья со ссылками
INLINE error
Стандарты программ...
• Computer (Компью...
Свойства ARM
Получая пакеты, бр...
Играть в автоматы,...
Последнее подразум...
Xbox
Детская одежда
Взлом Хотмыла
Bases for Allsubmi...
Формат отображения...
Удостоверьтесь, чт...
Краткое введение в...
Юридическая консул...
_.„, Сервер удален...
Элементы управлени...
Статистика



Друзья сайта
Программы, игры


Полезно
В какую объединенную сеть входит классовая сеть? Суммирование маршрутов Занимают ли таблицы память маршрутизатора?