Для блочного макета нужно раздвигать центральную колонку по ширине, правая не должна уходить под центральную - Веб-строительство

266

mff

3 января 2012, 16:23

#41

dkameleon:
1. огласите бюджет.

20$

dkameleon:
2. огласите необходимую реакцию каждого блока на переполнение контентом по горизонтали/вертикали.

Центральная колонка в макете предложенном господином vryb в посте № 15, должна растягиваться и правая колонка не должна при этом уходить под центральную. То есть как это происходит с таблицей в 3-х колоночном макете. Если центральная колонка шире, она отодвигает правую колонку.

386

dkameleon

3 января 2012, 18:25

#42

mff:
То есть как это происходит с таблицей в 3-х колоночном макете.

стопроцентное поведение таблицы может гарантировать только таблица.

для блочного макета необходимо задавать свои условия, и уж тем более они не должны звучать "как там" :)


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<style type="text/css">
* { margin: 0; padding: 0; border: 0; }
html, body { height: 100%; }

#wrapper { min-height: 100%; position: relative; }
#sideLeft1 { position: absolute; z-index: 1; left: 0; top: 120px; bottom: 60px; width: 200px; background-color: #f00; }
#sideRight1 { position: absolute; z-index: 1; right: 0; top: 120px; bottom: 60px; width: 200px; background-color: #f00; }

#header { poition: relative; z-index: 2; height: 120px; background-color: #06c; }
#footer { poition: relative; z-index: 2; position: absolute; left: 0; bottom: 0; right: 0; height: 60px; background-color: #888; }

#container { position: relative; z-index: 2; margin: 0; padding-bottom: 60px; overflow: hidden; }
#sideLeft2 { float: left; width: 200px; overflow: hidden; }
#sideRight2 { float: right; width: 200px; overflow: hidden; }
#content   { margin: 0 200px; overflow: hidden; }
</style>

</head>

<body>

<div id="wrapper">
	<div id="sideLeft1"></div>
	<div id="sideRight1"></div>

	<div id="header">шапка-ушанка</div>
	
	
	<div id="container">
		<div id="sideLeft2">колонка слева</div>

		<div id="sideRight2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>

		<div id="content">
		Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
		</div>
	</div>


	<div id="footer">скатерть-самобратнка</div>

</div>
</body>
</html>

пробуйте.

1

Дизайн интерьера (http://balabukha.com/)

266

mff

4 января 2012, 09:13

#43

dkameleon:
пробуйте.

Спасибо, но не работает. Вставил после <div id="content"> картинку шириной 1280 px -

<img src="http://www.borealisbroadband.net/DTN/dtnsemega.jpg" width="1280" height="960" />

центральная колонка не раздвигается, правая не отодвигается...

71

palladin_jedi

4 января 2012, 09:24

#44

zhitov:
ТС, используйте таблицу и не мучайтесь.

Точно, иногда лучше сделать "как проще". Иначе эффект удовлетворения от работы не отобьет затраченных на неё человекочасов. :)

Сайт о web-разработке и прочем (http://seazo.net)||Продвижение статьями под Google (http://short.seazo.net/ght4zf) Бесплатные консультации рефералам Sape (http://www.sape.ru/r.SWfwWOblBo.php) PHP и JS скрипты на заказ, создание сайтов с нуля и на CMS.

266

mff

4 января 2012, 09:58

#45

Таблица отпадает. Вёрстка таблицей имеет один очень большой минус: пока не подгрузятся все элементы таблицы - она не отображается полностью, из-за чего пол сайта по диагонали долго не появляется. Интересует вёрстка на HTML5. Меня полностью устраивает макет в посте 15 за исключением вот этого глюка с растяжением центрального столбца и сдвижением правого вправо.

386

dkameleon

4 января 2012, 10:04

#46

mff:
Спасибо, но не работает. Вставил после <div id="content"> картинку шириной 1280 px

блоки не будут раздвигаться под контент и в то же время занимать доступное пространство по ширине/высоте и взаимодействовать с соседними блоками.

как я уже говорил - ставьте четкие задачи.

если бы вы четко описали, какого поведения ожидаете - получили бы сразу четкий ответ.

1

C

0

Catvas

4 января 2012, 11:57

#47

Какая верстка таблицами в HTML5? По-моему, таблицы - это прошлое столетие

219

zhitov

4 января 2012, 12:21

#48

mff:
Вёрстка таблицей имеет один очень большой минус: пока не подгрузятся все элементы таблицы - она не отображается полностью

Единственный минус. Но времена диал-апа практически прошли.

Catvas:
По-моему, таблицы - это прошлое столетие

Ну да, вы еще скажите, что верстать на дивах модно и круто :D .

Как там правило звучит? Если что-то нормально работает, то лучше его не трогать...

Строительные калькуляторы ( https://www.zhitov.com/ )

266

mff

5 января 2012, 11:33

#49

dkameleon:
если бы вы четко описали, какого поведения ожидаете - получили бы сразу четкий ответ.

dkameleon вы издевайтесь? Я же четко описал что мне нужно. У меня в центральной колонке будут объекты разной ширины, от 200 до 2000 px. Соответственно эти объекты должны раздвигать колонку по ширине. Если раздвигается центральная колонку по ширине, она должна отодвигать правую колонку. Тут чётче не распишешь ожидаемого поведения.

zhitov:
Единственный минус.

Полностью с вами согласен!

zhitov:
Но времена диал-апа практически прошли.

Да, но бывает такое: У меня на сайте трансляции идут, есть кнопки социалок, счетчики и прочее. Бывает из-за этих сторонних объектов не открывается пол сайта, сверстанного таблицей. А если не таблицей - всё четко, просто блок с не погрузившимися объектами будет пустой. Специфика нашего сайта ставит этот вопрос остро. Решение уже принято, весь сайт переверстан по шаблону предложенному в этом топике. Всё идеально, во всех браузерах, всё устраивает, но вот этот косяк с "не раздвиганием" центральной колонки, и с "не отодвиганием" правой колонки - всё убивает.

HELP! Поднял бюджет до 30$.

C

277

Chukcha

5 января 2012, 11:58

#50

а можно в личку ссылочку на сайт

Т.е. вам нужно три колонки

левая и правая - фикс

центр - резина.

Или есть еще какие-то требования (лень читать пять страниц, искать "тз")

Вышел новый Яндекс Браузер с YandexGPT и YandexART

Маркетинг для шоколадной фабрики. На 34% выше средний чек

HTML5 и CSS3