Как сделать отступы от границ экрана?

N1KY · 07.05.2010, 19:37

Люди! Здравствуйте! Возник вопрос.. как сделать чтобы в окне браузера флэшка была на некотором расстоянии от границ браузера? Ну т.е. сдеать отступы.. Фишка в том, что если написать:

Код:

 

<style type="text/css">

body {
		margin: 5px;
		margin-right: 5px;  /* Отступ справа */
   		margin-left: 5px;  /* Отступ слева */
   		margin-top: 5px;
   		margin-bottom: 5px;
		background-color: #666666;
   	}

</style>

то отступы появляются только сверху и слева, и флэшка как бы сдвигается вправо и вниз на эти самые 5 пикселей.. Как исправить? Хочется чтобы отступы были со всех сторон..

membrilius · 07.05.2010, 21:33

Если не хватает места в окне, браузер кушает margin справа и снизу.

один вариант размещать прозрачную картинку снизу и справа ) в качестве отступа....
отвратительный вариант...

или делать вот так:

CSS:

Код:

body {
	margin: 0px;
}

#main {
	padding: 5px;
}

.test {
	height: 50px;
	background-color: #000000;
}

HTML:

Код:

<body>

    <div id="main">
    
        <div class="test"></div>
        
    </div>
    
</body>

вообщем загонять всё в контейнер который имеет отступ изнутри (padding)...

N1KY · 08.05.2010, 04:48

Блин, что-то не очень понятно что такое ".test" и почему там "height:50px" ..
и даже если так сделать, то все равно не выходит...

( Встраиваю через SWFObject..

Сейчас выглядит так, но не работает:

Код:

<style type="text/css">
	/*hide from ie on mac\*/
	html {
		height: 100%;
		overflow: hidden
	}
	#flashcontent {
		padding: 5px;
		width: 100%;
		height: 100%;
	}
	/* end hide */
	.test {
		height: 50px;
	}
	
	body {
		margin: 0px;
		background-color: #666666;
   	}
</style>
</head>
<body>
	<div id="flashcontent" style="position: absolute; bottom: 0; margin-right: 5px;">
		<div class="test"></div>
	</div>
</body>

membrilius · 09.05.2010, 00:58

.test это для примера. Содержимое контейнера, показывает что есть отступы.

вместо него, всё что угодно там у Вас )

Код:

html {
		height: 100%;
		overflow: hidden
	}

это Вам не надо... кстати если использовать overflow: hidden; то элемент на который поставлено это свойство будет поглощать своё содержимое, которое не влезает справа.

и "position: absolute;" тоже не зачем. Или зачем он Вам? У Вас Флешка позиционирует по всех всего?

Если флешка не растягивается и Вам допустим нужно расположить её посередине экрана позиционированием

можно сделать так:

Код:

#flashcontent {
	position: absolute; 
	top: 50%; 
	left: 50%; 
	margin-left: -Npx; // половина ширины флеш-контейнера (отрицательные значения)
	margin-top: -Npx; // половина высоты флеш-контейнера (отрицательные значения)
}

Можно не Абсолютный позиционированием, a "position: relative" .. это позиционирование относительно элемента в котором расположен flashcontent

Там вообще много нюансов, в плане сочетания свойств, вложенности элементов друг в друга и расположения их в потоке.. )

Добавлено через 3 минуты
...и

Код:

width: 100%;
height: 100%;

DIV растягивается на ВСЕ 100% экрана или элемента в котором он находится.. ему абсолютно всёровно есть там margin или padding...

N1KY · 09.05.2010, 20:31

Цитата:

Сообщение от membrilius

.test это для примера. Содержимое контейнера, показывает что есть отступы.

вместо него, всё что угодно там у Вас )

Мм.. мне угодно чтобы там флэшка моя была, а как засунуть её в этот контейнер?

) Не понимаю..) У меня флэшка одна, растягивающая на весь экран, но нужно чтобы были отступы со всех сторон. Сорри, но я в HTML/CSS полный ноль, практически ничего не понимаю

Добавлено через 8 минут
ЗЫ: Получилось так что справа и снизу флэшка уже не обрезается, и отступы есть, но появились скроллы, как от них можно избавиться?

membrilius · 09.05.2010, 21:29

CSS

Код:

body {
	margin: 0px;
}

#flashcontent {
	padding: 5px;
}

HTML

Код:

<div id="flashcontent">
    
        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%">
            <param name="movie" value="flashka.swf" />
            <embed src="flashka.swf" type="application/x-shockwave-flash" width="100%" height="100%" ></embed>
		</object>
        
    </div>

У меня работает так..

Если Вы используете для встраивания флешки SWFObject... встраивайте через него.. Я лично не пользуюсь.. раньше использовал версию 1.5, сейчас есть 2.2... Там абсолютно новый API ... смотреть времени нету.

Там должно быть что-то вроде такого:

Код:

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
	swfobject.embedSWF("flashka.swf", "flashcontent", "100%", "100%", "10");
</script>
<div id="flashcontent">
    Что-то тут, если не установлен флеш-плеер
</div>

Добавлено через 7 минут
А и есть всётаки через SWFObject

то нужно добавить в CSS

Код:

html {
		width: 100%;
		height: 100%;
}
	
body {
		width: 100%;
		height: 100%;
}

Добавлено через 13 минут
а на счёт скрола окна..

попробуйте бороться вот так:

Код:

#flashcontent {
	padding: 10px 0px 0px 10px;
	margin: -5px;
}