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

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

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

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

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

Ответ
 
Опции темы Поиск в этой теме
Старый 12.07.2013, 00:04   #1
Masafi
Форумчанин
 
Регистрация: 12.03.2011
Сообщений: 113
По умолчанию Div'ы и разрешение экрана

Что есть:
Сайт, с отступами по бокам для размещения рекламы (заранее подогнанные под размеры этой самой рекламы)
Что надо:
Чтобы в отступах была реклама и при разрешении ниже определенного (к примеру 1024*768) реклама и отступы убирались
Что в итоге:
Не могу разместить ничего в отступы, т.к. не знаю как. С разрешением тоже самое, не знаю как его узнать и как реализовать "исчезание" отступов.
Что хочу от вас:
Помочь с выше перечисленными проблемами (ссылками на форумы, учебники и т.д.)

Код HTML:
<html>
	<head>
		<title>
			
		</title>
	<link rel="stylesheet" type="text/css" href="css/index.css" />
	</head>
	<body class="body">
		<div class="bodydiv">
			<div align="center">
				<img src="images/pixel.gif" title='' width="100%" height="100">
			</div>
			<div>
				
			</div>
			<div>
				
			</div>
		</div>
	</body>
</html>
Цитата:
.bodydiv{
margin: 0px 240px 0px 160px;
background-color: #990000;
}
.body{
background-color: #CC0000;
}
Masafi вне форума Ответить с цитированием
Старый 15.07.2013, 21:39   #2
MindWork
Пользователь
 
Регистрация: 08.04.2009
Сообщений: 11
По умолчанию

Для разной вёрстки сайта при разных разрешениях экрана можно воспользоваться правилом @media, в данном случае оно будет выглядеть так:

Код:
@media only screen and (max-width: 1024px) {
	<элемент который хотим изменить> {
		cвойство: значение;
	}
}
Пример со скрытием боковых элементов при ширине экрана меньше чем 1024px:
Код HTML:
<!doctype html>
<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
		#container {
			border: 1px solid #000;
			height: 100px;
			margin: 0 auto;
			width: 780px;
		}
		.banner {
			border: 1px solid #000;
			height: 600px;
			position: absolute;
			width: 112px;
		}
		#banner-left {
			float: left;
			left: 50%;
			margin-left: -512px;
		}
		#banner-right {
			float: right;
			margin-right: -512px;
			right: 50%;
		}
		@media only screen and (max-width: 1024px) {
			.banner {
				display: none;
			}
		}
	</style>
</head>
	<body>
		<div class="banner" id="banner-left"></div>
		<div class="banner" id="banner-right"></div>
		<div id="container"></div>
	</body>
</html>
Демо:http://jsbin.com/isenos/1/
MindWork вне форума Ответить с цитированием
Старый 17.07.2013, 13:58   #3
Masafi
Форумчанин
 
Регистрация: 12.03.2011
Сообщений: 113
По умолчанию

Цитата:
Сообщение от MindWork Посмотреть сообщение
Для разной вёрстки сайта при разных разрешениях экрана можно воспользоваться правилом @media, в данном случае оно будет выглядеть так:

Код:
@media only screen and (max-width: 1024px) {
	<элемент который хотим изменить> {
		cвойство: значение;
	}
}
Пример со скрытием боковых элементов при ширине экрана меньше чем 1024px:
Код HTML:
<!doctype html>
<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
		#container {
			border: 1px solid #000;
			height: 100px;
			margin: 0 auto;
			width: 780px;
		}
		.banner {
			border: 1px solid #000;
			height: 600px;
			position: absolute;
			width: 112px;
		}
		#banner-left {
			float: left;
			left: 50%;
			margin-left: -512px;
		}
		#banner-right {
			float: right;
			margin-right: -512px;
			right: 50%;
		}
		@media only screen and (max-width: 1024px) {
			.banner {
				display: none;
			}
		}
	</style>
</head>
	<body>
		<div class="banner" id="banner-left"></div>
		<div class="banner" id="banner-right"></div>
		<div id="container"></div>
	</body>
</html>
Демо:http://jsbin.com/isenos/1/
Спасибо, спас! На весы кликнул
Masafi вне форума Ответить с цитированием
Ответ


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

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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Разрешение экрана Kasper1 JavaScript, Ajax 0 21.02.2011 19:48
Разрешение экрана Копоть Артём Помощь студентам 15 04.08.2009 18:12
Разрешение экрана Sweta HTML и CSS 4 06.09.2008 10:05
Разрешение экрана Михаил Юрьевич Общие вопросы Delphi 3 11.07.2008 21:33
Разрешение экрана -=<[Evklidd]>=- Общие вопросы Delphi 1 20.02.2008 10:55