PHP.SU

Программирование на PHP, MySQL и другие веб-технологии

PHP.SU Портал

Главная

Помощь

Поиск

Поиск Яндекс Вакансии

Пользователи

Здравствуйте, Гость

( Вход · Регистрация · Правила форума )

Забыли пароль?

Блочная верстка

Форумы портала PHP.SU » Клиентская разработка » HTML, Дизайн & CSS (Модераторы: ALEN, armancho7777777)

Страниц (1): [1]

Без описания

Поиск в теме | Версия для печати

Bio man	Отправлено: 06 Июня, 2012 - 13:03:30
Постоянный участник Покинул форум Сообщений всего: 2751 Дата рег-ции: Июль 2010 Откуда: Даугавпилс, Латвия Помог: 52 раз(а)	Как сделать страницу с 3 колонками? Есть шапка, левый блок, центр, правый блок, футер. Пробовал, пробовал, не получилось. И да, нужно, что бы левый блок, центр, правый блок были одной высоты, то есть растягивались бы относительно самого большого блока. Код можете не писать, просто объясните как такое делается.

DlTA	Отправлено: 06 Июня, 2012 - 13:34:46
Постоянный участник Покинул форум Сообщений всего: 2952 Дата рег-ции: Окт. 2010 Помог: 53 раз(а)	http://htmlbook[dot]ru/layout

Bio man	Отправлено: 06 Июня, 2012 - 13:35:08
Постоянный участник Покинул форум Сообщений всего: 2751 Дата рег-ции: Июль 2010 Откуда: Даугавпилс, Латвия Помог: 52 раз(а)	Первый вопрос отпал. Актуально: Bio man пишет: нужно, что бы левый блок, центр, правый блок были одной высоты, то есть растягивались бы относительно самого большого блока. Код HTML Спойлер (Отобразить) CODE (html): скопировать код в буфер обмена <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Основы блочной верстки (Div верстки)</title> <link href="main2.css" rel="stylesheet" type="text/css"> </head> <body> <div id="maket"> <div id="header"> Шапка </div> <div id="left"> Левая колонка Меню Меню Меню Меню </div> <div id="right"> Правая колонка Меню Меню Меню Меню </div> <div id="content"> Содержимое страницы Содержимое страницы Содержимое страницы Содержимое страницы </div> <div id="footer">Подвал</div> </div> </body> </html> CSS Спойлер (Отобразить) CODE (html): скопировать код в буфер обмена body, html { margin: 0px; padding: 0px; } #maket { width: 1024px; margin: 0 auto; } #header{ background-color: #C0C000; } #left{ background-color: #00C0C0; width: 20%; float: left; } #right{ width: 20%; background-color: #FFFF00; float: right; } #content{ background-color: #8080FF; margin-left: 20.2%; margin-right: 20.2%; } #footer{ background-color: #FFC0FF; clear: both; } (Добавление) DlTA Спасибо!

IllusionMH	Отправлено: 06 Июня, 2012 - 16:23:25
Активный участник Покинул форум Сообщений всего: 4254 Дата рег-ции: Февр. 2011 Откуда: .kh.ua Помог: 242 раз(а)	Bio man, одной высоты проблематично(по крайней мере в блочной верствке) Можно фоном сделать ощущение, что это колонки одинаковой высоты(как в примере по ссылке выше) Чтобы растянуть блок с содержимым, если оно меньше высоты боковой части, то код немного меняется CODE (CSS): скопировать код в буфер обмена #content{ background-color: #8080FF; margin-left: 20.2%; margin-right: 20.2%; } #content:after { content: ""; display: block; clear: both; } #footer{ background-color: #FFC0FF; } (Отредактировано автором: 06 Июня, 2012 - 16:23:51)

DelphinPRO	Отправлено: 06 Июня, 2012 - 20:36:24
Активный участник Покинул форум Сообщений всего: 7187 Дата рег-ции: Февр. 2012 Помог: 353 раз(а)	http://xhtml[dot]ru/instr/3col_creator/index[dot]html (Добавление) http://csstemplater[dot]com/ ----- Чем больше узнаю, тем больше я не знаю.

etoYA	Отправлено: 07 Июня, 2012 - 00:16:07
Участник Покинул форум Сообщений всего: 1859 Дата рег-ции: Июль 2011 Откуда: Крым Помог: 21 раз(а)	Bio man пишет: И да, нужно, что бы левый блок, центр, правый блок были одной высоты, то есть растягивались бы относительно самого большого блока. Принципиально css? Я обычно использую jQuery, погугли equal heights

sKaa	Отправлено: 07 Июня, 2012 - 08:10:53
Частый посетитель Покинул форум Сообщений всего: 979 Дата рег-ции: Окт. 2011 Откуда: Россия г. Нижний Новгород Помог: 25 раз(а) [+]	http://csstemplater[dot]com/

Поиск в теме | Версия для печати

Страниц (1): [1]

Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)

« HTML, Дизайн & CSS »

Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.