позиционирование флэш-контента с использованием CSS

Question

Я проектирую веб-сайт, который будет иметь четыре кнопки наведения по углам и флэш-контент в середине:

Я использую следующий код для кнопок, которые работаютштраф:

HTML:

div.container { position:relative; }
img.positioned { position:absolute; height:63px; width:122px; }
img#topleft { top:0; left:0; }
img#topright { top:0; right:0; }
img#bottomleft { bottom:0; left:0; }
img#bottomright { bottom:0; right:0; }

CSS:

<div class="container">
<img src="image.gif" class="positioned" id="topleft">
<img src="image.gif" class="positioned" id="topright">
<img src="image.gif" class="positioned" id="bottomleft">
<img src="image.gif" class="positioned" id="bottomright">
</div>

Но у меня возникают проблемы с размещением флэш-содержимого.

Что быисправьте html и css код, чтобы расположить 4 кнопки с эффектом наведения и флэш-содержимым.

Заранее благодарим за помощь.

Answer 1

Предполагая, что ваш Flash-контент имеет фиксированные размеры, вы сначала помещаете это в div, а затем используете абсолютное позиционирование до 50% и отрицательные поля. Предположим, что ваш Flash-контент имеет размер 300x200.

HTML:

<div id="flashContainer">
    <object width="300" height="200" ...
</div>

CSS:

div#flashContainer {
    width:300px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-100px 0 0 -150px; /* half the width and height values */
}