Подгонка ширины

ЕСТЬ РЕШЕНИЕ ЗАКРЫТО

Функция подгонки ширины контента, если закончилось меню

#1 15 февраля 2012 в 18:24

Здравствуйте, Уважаемое сообщество!
Может быть кто-то уже сделал такую функцию, что если при прокрутке вниз, заканчивается меню, то контент расширяется автоматически. Реализовано в контакте:

Потом, когда прокручиваем вниз, получаем:

То есть, контент подогнался по ширине свободного места.

#2 16 февраля 2012 в 01:59

Ну вообще то эта функция реализована в html+css. Если блоку "МЕНЮ" присвоить float:left, то весь строчный контент содержащийся в блоке "КОНТЕНТ" будет обтекать его в точности так, как показано на скриншоте. Или я чего-то не понял?

Skype: pasha--g

#3 16 февраля 2012 в 10:02

Мне кажется, что нет, потому, что дефлоитный шаблон instantcms, в IE показывался так, что даже вверху, меню и контент были разделены… К тому же, float:lef реализован у многих, но эффекта я такого не встречал на сайтах… Может я не правильно говорю, но я исхожу из того, что знаю.

Сегодня в 00:29

#4 16 февраля 2012 в 12:23

При чем тут шаблон который идет по умолчению. Вы ведь все равно его переделываете… Смотрите пример:

Спойлер

 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Отступы</title>
		<style type="text/css">
			*{margin:0;padding:0}
			body{background:#eeeff0;font-size:26px}
			#wrapper{width:1000px;margin:0 auto;background:#ccc}
			#menu{width:300px;height:300px;padding:20px;background:#ccc;text-align:center;float:left}
			.title{padding:5px;background:red}
		</style>
	</head>
	<body>
		<div id="wrapper">
			<div id="menu">
				<div class="title">
					<p>БЛОК МЕНЮ</p><br/>
					<ul>
						<li>Пункт 1</li>
						<li>Пунтк 2</li>
						<li>Пункт 3</li>
						<li>Пункт 4</li>
					</ul>
				</div>
			</div>
			<div id="content">
				<div class="title">Lorem ipsum dolor sit amet</div>
				<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
				<div class="title">Lorem ipsum dolor sit amet</div>
				<p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p>
			</div>
		</div>
	</body>
</html>

Skype: pasha--g

#5 16 февраля 2012 в 12:33

Да, точно, он обтекает… zst

Жаль, что это нельзя сделать в шаблоне… У меня там, как мне кажется, табличная верстка… Спасибо за разъяснение, я думал, что это сделано с помощью java.

#6 16 февраля 2012 в 12:42

Нет. В шаблоне по умолчению верстка не табличная. Табличная она у компонентов и модулей. Вообщем если расскажите что конкретно Вы хотите сделать я возможно Вам помогу.

Skype: pasha--g

#7 16 февраля 2012 в 12:46

У меня не шаблон по умолчанию… Я бы хотел, чтобы опускаясь на странице, когда заканчивалось меню слева, то текст становился бы по заданной ширине. А сейчас это не так, если я опускаюсь, и заканчивается правая колонка, то контент становится узким. Мой сайт tanat.info.

#8 16 февраля 2012 в 13:40

Ну так и в чем проблема? Убейте таблицу с id="bodytable", заменив её дивами. Получите ровно тоже самое, но с желаемым эффектом. Для чего туда вообще таблицу вставили?

Skype: pasha--g

#9 16 февраля 2012 в 13:52

Ох… :((( я поменял на див… получилось, что все съехало… :(( Был такой код:

<table width="100%" border="0" cellpadding="0" cellspacing="0" id="bodytable"><tr><?php if (cmsCountModules("left")) { ?> <td valign="top" id="left"><?php cmsModule("left"); ?></td><?php }

Я сделал такой:

<div id="bodytable"><tr><?php if (cmsCountModules("left")) { ?> <td valign="top" id="left"><?php cmsModule("left"); ?></td><?php }

И получилось, что все съехало:

#10 16 февраля 2012 в 14:17

Не, ну нельзя же так прямо в лоб тег table на div менять. smile

У меня еще полчаса есть сегодня, давайте свой файл template.php, я набросок сделаю. ICQ 192562615

Skype: pasha--g

#11 16 февраля 2012 в 14:29

О, слово тег… Это для меня прозвучало как Никотинамидадениндинуклеотидфосфат :)))

#12 18 февраля 2012 в 02:57

Спасибо, Уважаемый Pasha, все работает, чуть напильником попробую подпилить и будет все гуд. :)

как прописать фон и шрифт к ti

Верстка под Opera Mobile

Подгонка ширины

Похожие темы

[ЕСТЬ РЕШЕНИЕ] Увеличить ширину ряда в шаблоне Modern

Ширина столбцов GRID

ширина стандартной темы / шаблона оформления

Как сделать default шаблон резиновым?

Ширина строки

[ЕСТЬ РЕШЕНИЕ] Как изменить ширину шаблона Modern?

InstantCMS Team

О проекте

Поддержка

Дополнения