| |
|
|
| | Есть резиновый DIV (тянущийся), у которого прописан overflow-x: hidden. Внутри дива вставлена флешка, отцентрованная внутри этого дива при помощи margin: 0 auto. Идея прноста: сделать флешку фоном для этого дива. Див становится по ширине меньше флешки - флешка незаметно подрезается по краям по правилу overflow-x: hidden. Но вот проблема - на деле флешка прижимается к левому краю дива и при уменьшении последнего флешка соотв. подрезается только с правого края. А хочется, чтобы они центровалась капитально и при уменьшении дива подрезалась справа и слева.
Буду рад выслушать советы :) Спасибо! | |
| |
|
|
| |
|
|
| |
для: DDK
(22.05.2009 в 17:28)
| | | при помощи margin: 0 auto ничто никуда не центруется.
а что, свойство text-align для эмбеднутых элементов не действует? | |
| |
|
|
| |
|
|
| |
для: DJ Paltus
(25.05.2009 в 12:34)
| | | правило margin: auto, центрирует блочные элементы с указанной шириной.
margin-left: auto, лепит к правому краю. | |
| |
|
|
| |
|
|
| |
для: sl1p
(25.05.2009 в 13:01)
| | | sl1p'у cледовало бы написать - "У меня ОДИН РАЗ ГДЕ-ТО ПОЛУЧИЛОСЬ, и я, как и обычно, сделал из этого единичного случая ПОСПЕШНЫЙ и НЕВЕРНЫЙ вывод: "правило margin: auto, центрирует блочные элементы с указанной шириной. margin-left: auto, лепит к правому краю."
На самом деле никакого ОБЩЕГО правила нет - разные браузеры ведут себя по-разному.
Несмотря на то, что в http://www.w3.org/TR/2008/REC-CSS1-20080411/#horizontal-formatting указано, что margin-left и margin-right МОГУТ ПОЛУЧИТЬ значения auto (читаем: "Three of the seven properties can be set to 'auto': 'margin-left', 'width' and 'margin-right'."), в реальности, например, браузер MSIE значение auto для свойства margin (в любой комбинации и для любой стороны) игнорирует и оставляет значение "по умолчанию" - обычно это 0. Соответственно, НИКАКОЙ горизонтальной "центровки" в MSIE не происходит. | |
| |
|
|
| |
|
|
| |
для: PAT
(25.05.2009 в 13:52)
| | | Я попробовал в ИЕ, если с доктайпом и с урлом в доктайпе то центрует, а иначе не центрует.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Obrazec</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
<div style="overflow-x: hidden; margin:auto;width:700px;height:500px;border: 2px solid red">
<div style="margin:auto;margin-top:10px;width:600px;height:400px;border: 2px solid blue">
2222
</div>
</div>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: ExtraBrain
(25.05.2009 в 14:09)
| | | Да, 428-я строка из http://www.w3.org/TR/html4/loose.dtd это определяет:
<!ENTITY % IAlign "(top|middle|bottom|left|right)" -- center? -->
|
| |
| |
|
|
| |
|
|
| |
для: ExtraBrain
(25.05.2009 в 14:09)
| | | Вот теперь сделайте внешний див в ширину меньше вложенного (поменяйте 700px на 300px, например) и увидите, что overflow-x "проглатывает" вложенный див только с правой стороны, а с левой стороны он прижимается к паренту :( Об этом и речь... задача - не просто отцентровать, а сохранить центровку в то время как child начинает не помещаться в parent. | |
| |
|
|
| |
|
|
| |
для: DDK
(25.05.2009 в 17:21)
| | | попробуйте помудрить с "clip" | |
| |
|
|
| |
|
|
| |
для: DDK
(25.05.2009 в 17:21)
| | | Можно попробовать вместо внешнего дива ифрейм, а флешку использовать в этом ифрейме как фон прикрепленный по центру. | |
| |
|
|
| |
|
|
| |
для: ExtraBrain
(25.05.2009 в 21:06)
| | | Да? А научите, пожалуйста, флешку делать фоном! Так всё просто было бы :) | |
| |
|
|
| |
|
|
| |
для: DDK
(25.05.2009 в 23:36)
| | | Лично я с флешом не работаю. Может кто другой подскажет. Вот такое нашел. Может поможет.
var so = new SWFObject("menu.swf","main", w, h, "8", "#FFFFFF");
...
so.addParam("wmode", "opaque"); // параметр позволяющий сделать флеш фоном
...
|
| |
| |
|
|
| |
|
|
| |
для: ExtraBrain
(26.05.2009 в 00:16)
| | | wmode=opaque позволяет сделать флеш не фоном, а слоем нижнего уровня :) Таким образом, чтобы остальные объекты были видны поверх этого флеша. Это у меня тоже использовано, но к поставленой в топике задаче отношения, увы не имеет.
Вобщем, надоело мне искать решения на чистом CSS, решил задачу вот таким топорным методом (+jQuery):
<script type="text/javascript">
function flash_bg_setpos() {
var fbw = $('#hdrflashbox').width();
var fcw = $('#header').width();
var def = 0;
if(fbw > fcw) {
def = Math.ceil((fbw - fcw)/2);
$('#hdrflashbox').css("left", '-' + def + 'px');
}
return;
}
$(window).bind('resize', flash_bg_setpos);
$(document).ready(flash_bg_setpos);
</script>
|
| |
| |
|
|
| |
|
|
| |
для: DDK
(26.05.2009 в 00:54)
| | | А флешка у вас фиксированной ширины?
Если да, то сделайте ее абсолютно позиционируемой относительно дива, далее left:50% и margin-left:-Npx, где N - это половина ширины флешки | |
| |
|
|
