Форум Flasher.ru - Как сделать отступы от границ экрана?

Форум Flasher.ru (http://www.flasher.ru/forum/index.php)

- HTML/DHTML/CSS/JS/VB (http://www.flasher.ru/forum/forumdisplay.php?f=66)

- - Как сделать отступы от границ экрана? (http://www.flasher.ru/forum/showthread.php?t=139670)

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

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

Код:

 



<style type="text/css">



body {

                margin: 5px;

                margin-right: 5px;  /* Отступ справа */

                   margin-left: 5px;  /* Отступ слева */

                   margin-top: 5px;

                   margin-bottom: 5px;

                background-color: #666666;

           }



</style>

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

Если не хватает места в окне, браузер кушает 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)...

Блин, что-то не очень понятно что такое ".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>

.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...

Цитата:

Сообщение от membrilius (Сообщение 906955)

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

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

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;

}