Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #21 (permalink)  
Старый 18.08.2011, 20:16
Аватар для Gozar
Отправить личное сообщение для Gozar Посмотреть профиль Найти все сообщения от Gozar
 
Регистрация: 07.06.2007
Сообщений: 7,504

Сообщение от devote Посмотреть сообщение
Вот и я о том же.
Мы о разном.
__________________
Последний раз редактировалось Gozar, Сегодня в 24:14.
Ответить с цитированием
  #22 (permalink)  
Старый 19.08.2011, 00:11
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

Сообщение от devote
Покажите пример? Вот из того варианта что дал Octane, сделайте что бы при сжатии страницы у меня контент был сверху а рюшечки/менюшечки снизу??? Лично я этого не добился. Поправьте меня, может я что делаю не так.
Я писал:
Сообщение от Octane
через media queries для устройств с небольшим дисплеем будет удобно в одну колонку сайт вытянуть
В том коде нет media queries, поэтому ничего и не происходит.

Вот: Screenshot
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>…</title>
<!--[if lt IE 9 ]>
	<script>
	(function ($) {
		$("header");
		$("footer");
		$("article");
		$("section");
		$("aside");
		$("hgroup");
	}(document.createElement));
	</script>
<![endif]-->
	<style>
	header, footer, section, article, aside, hgroup {
		display: block;
	}
	header {
		background: #cff;
	}
	.wrapper {
		background: #fcc;
	}
	.wrapper .inner-wrapper {
		background: #fcf;
	}
	.wrapper article {
		background: #fee;
	}
	.wrapper .sidebar-1 {
		background: #cfc;
	}
	.sidebar-2 {
		background: #ccf;
	}
	footer {
		background: #ffc;
	}
	@media only screen and (min-width: 240px) {

		body {
			margin: 0;
		}
		header {
			height: 80px;
		}
		.wrapper {
			float: left;
			width: 100%;
			margin-left: -200px;
		}
		.wrapper .inner-wrapper {
			float: right;
			width: 100%;
			margin-left: -400px;
		}
		.wrapper article {
			margin-left: 400px;
		}
		.wrapper .sidebar-1 {
			float: left;
			width: 200px;
			margin-left: 200px;
		}
		.sidebar-2 {
			float: right;
			width: 200px;
		}
		footer {
			clear: both;
			height: 80px;
		}

	}
	</style>
</head>
<body>
	<header>header</header>
	<div class="wrapper">
		<div class="inner-wrapper">
			<article>content content content content content content content content content content content content content content content content content content content content content content content content content content content content</article>
		</div>
		<aside class="sidebar-1">sidebar 1</aside>
	</div>
	<aside class="sidebar-2">sidebar 2</aside>
	<footer>footer</footer>
</body>
</html>
Ответить с цитированием
  #23 (permalink)  
Старый 19.08.2011, 16:35
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Сообщение от Octane
Вот: Screenshot
Ну теперь я молчу, вижу что вариант реально работает. Хотя для мобилок сайты пока не пишу, но для себя примерчик оставлю. Octane, Спасибо.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
есть ли резиновый слайдер контента на jQuery Enxiro jQuery 10 28.02.2014 12:15
Дизайн строительной компании Vantedur Ваши сайты и скрипты 17 03.08.2012 02:03
Новый дизайн JavaScript.ru Илья Кантор Сайт Javascript.ru 27 23.06.2011 14:49
Оцените супер дизайн моего шаблона для сайта. Каупервудик Ваши сайты и скрипты 3 27.02.2011 22:08
Заказать сайт, Заказать программу, Заказать дизайн N_L Работа 32 29.09.2009 19:46