Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 10.03.2015, 11:28   #1
SQLPowerUser
Форумчанин
 
Аватар для SQLPowerUser
 
Регистрация: 19.01.2015
Сообщений: 158
Вопрос Подскажите с версткой

Возможно ли без Javascript сделать такую верстку, как на картинке? Сложность в том, что верхние заголовки могут слегка меняться по высоте. Устроит вариант и с таблицами и с дивами...
Код HTML:
<!DOCTYPE html>
<html> <head> <style>
* {margin:0; padding:0; font:11pt Arial;}
.main {position:absolute; width:100%; height:100%;}
.main > div {
	padding:10px;
	position:absolute;
	left:0; right:0;
}
.h1 {
	top:0;
	background:#ffff00;
}
.h2 {
	top:37px;
	background:#A1C5EB;
}
.content {
	top:91px;
	bottom:50px;
	background:#F08080;
	overflow-y:scroll;
}
.footer {
	bottom:0;
	height:30px;
	background:#00ae00;
}
</style>
</head>
<body>
<div class="main">
	<div class="h1">Первый заголовок высотой 1-2 строчки</div>
	<div class="h2">Второй заголовок<br>высотой 1-2 строчки</div>
	<div class="content">Всё оставшееся пространство до подвала</div>
	<div class="footer">Подвал, высота 30px</div>
</div>
</body> </html>
Изображения
Тип файла: jpg q.jpg (10.4 Кб, 143 просмотров)
SQLPowerUser вне форума Ответить с цитированием
Старый 12.03.2015, 19:37   #2
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Попробуй flex-box с фолбэком таблицами для старых ишаков.
Слоями кросс-браузерно тут затрахашся решать.
Треш-вариант: через трансформ-ротейт + плавающие элементы)
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 12.03.2015, 21:52   #3
Санеккк
Пользователь
 
Регистрация: 06.11.2013
Сообщений: 81
По умолчанию

Так таблицу и делай. Две строки с нужными цветами бекграунда с тегами заголовков. А высота строк будет подстраиваться под высоту букв, если это правильно указать, а не задавать размеры.
Санеккк вне форума Ответить с цитированием
Старый 13.03.2015, 09:44   #4
SQLPowerUser
Форумчанин
 
Аватар для SQLPowerUser
 
Регистрация: 19.01.2015
Сообщений: 158
По умолчанию

Всем спасибо за подсказки! У нас на фирме в основном IE9+, некоторые юзают нормальные браузеры... В общем, остановился на таком решении
Код HTML:
<!DOCTYPE html>
<html> <head> <style>
* {margin:0; padding:0; font:11pt Arial;}
html, body {width:100%; height:100%}
.main {
  border-collapse:collapse;
  width:100%;
  height:100%;
}
.main td {vertical-align:top;}
.h1 {
  height:2px;
  background:#ffff00;
}
.h2 {
  height:2px;
  background:#A1C5EB;
}
.content {background:#F08080;}
.footer {
  height:30px;
  background:#00ae00;
}
</style> </head>
<body>
<table class="main">
  <tr> <td class="h1">Первый заголовок высотой 1-2 строчки</td> </tr>
  <tr> <td class="h2">Второй заголовок<br>высотой 1-2 строчки</td> </tr>
  <tr> <td class="content">Всё оставшееся пространство до подвала</td> </tr>
  <tr> <td class="footer">Подвал, высота 30px</td> </tr>
</table>
</body> </html>
SQLPowerUser вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помощь с версткой Masafi HTML и CSS 1 09.01.2014 17:26
Проблема с версткой!!! Екатерина_21 HTML и CSS 1 19.09.2011 15:17
Проблема с версткой vitaljaa HTML и CSS 7 03.07.2011 11:06
проблемы с версткой AlexanderSolo HTML и CSS 1 20.11.2010 20:21