Проблема с правым полем с CSS 100% - 350px макет - PullRequest
Новая
       20

Проблема с правым полем с CSS 100% - 350px макет

1 голос
/ 21 января 2010

Может ли кто-нибудь помочь мне решить проблему с макетом 100% - 350 пикселей для встраивания видео vimeo?

Кажется, что свойство right-margin здесь игнорируется, а макет переполняется вправо. Я надеюсь, что это простая ошибка, но, похоже, я все перепробовал. У меня заканчивается время.

Помощь будет очень признателен.

CSS: 

#container {
 position:absolute;
 width:100%;
    height:100%;
}

#content {
 width:100%;
 height:100%;
 margin-left:350px;
 margin-right:350px;
}

.video {
 padding:0 0 0 0;
 height:100%;
 width:100%;
}

html (код для вставки vimeo был переформатирован для проверки): 

<div id="container">
   <div id="content">
      <object class="video" type="application/x-shockwave-flash" data="http://vimeo.com/moogaloop.swf?clip_id=8808526&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=ffffff">
     <param name="allowfullscreen" value="true" />
     <param name="allowscriptaccess" value="always" />
        <param name="color" value="ffffff" />
     <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=8808526" />
      </object>
     <div style="clear:both; height:1px; line-height:0">&nbsp;</div>
  </div>
</div>

EDIT: Другое решение, которое я попробовал: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#container {
    position:absolute;
    width:100%;
    height:100%;
}

#content {
    margin-left: 350px;
    margin-right: 0px;
}

.video {
    padding:0 0 0 0;
    width:100%;
    height:100%;
}
</style>
</head>

<body>

<div id="container">
   <div id="content">
      <object class="video" type="application/x-shockwave-flash" data="http://vimeo.com/moogaloop.swf?clip_id=8808526&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=ffffff">
     <param name="allowfullscreen" value="true" />
     <param name="allowscriptaccess" value="always" />
        <param name="color" value="ffffff" />
     <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=8808526" />
      </object>
  </div>
</div>

</body>
</html>
</head>

Редактировать: я использую решение для этого типа позиционирования из этой темы: Как я могу сделать ширину = 100% - 100 пикселей в CSS?

Ответы [ 4 ]

0 голосов
/ 30 января 2010

Вот решение jQuery, которое работает с несколькими типами документов, а также в Chrome, Firefox и IE. IE, возможно, покажет пустую страницу, но это проблема Vimeo, и ее можно решить, обновив плагин Flash для IE, как обсуждено здесь и очень широко здесь .

Я также разместил код онлайн . 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Vimeo test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript">

    jQuery(function($){
        $(window).load(function() {
            var h = $(window).height() * 0.9;
            var w = $("#content").width();
            $(".video").width(w);
            $(".video").height(h);
            $("#content").css('visibility', 'visible');
        });
    });

</script>
<style type="text/css">

#container {
    width:100%;
    height:100%;
}

#content {
    margin-left: 350px;
    margin-right: 0px;
    visibility: hidden;
}

</style>
</head>
<body>

<div id="container">
    <div id="content">
        <object class="video" width="400" height="225">
            <param name="allowfullscreen" value="true" />
            <param name="allowscriptaccess" value="always" />
            <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=8808526&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" />
            <embed class="video" src="http://vimeo.com/moogaloop.swf?clip_id=8808526&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="225"></embed>
        </object>
    </div>
</div>

</body>
</html>
0 голосов
/ 21 января 2010

Чтобы сделать видео меньше, чтобы оно останавливалось с правой стороны экрана (подходило к экрану), вам нужно будет удалить некоторые из 100% атрибутов и сделать еще несколько правок. Вот новые CSS и HTML.

CSS 

#container {
    width:100%;
    height:100%;
}

#content {
    margin-left: 350px;
    margin-right: 0px;
}

.video {
    padding:0 0 0 0;
    width:100%;
    height:90%;
}

HTML 

<div id="container">
   <div id="content">
      <object class="video" type="application/x-shockwave-flash" data="http://vimeo.com/moogaloop.swf?clip_id=8808526&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=ffffff">
     <param name="allowfullscreen" value="true" />
     <param name="allowscriptaccess" value="always" />
        <param name="color" value="ffffff" />
     <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=8808526" />
      </object>
  </div>
</div>

EDIT Как правильно заметил Эмиль, по какой-то причине это работает, только если вы не задали DOCTYPE для своего документа. В противном случае это работает в Chrome, но Firefox показывает пустой экран. После некоторого тестирования я пришел к выводу, что это связано с процентной шириной, заданной для видеообъекта. Firefox не поддерживает это.

Поскольку Vimeo (в отличие от YouTube) не позволяет передавать параметры URL для определения размера видео, а ширина в процентах, по-видимому, имеет причуды, мое единственное другое предложение - указать фиксированную ширину и высоту видеообъекта ( как на этой странице, см. Источник ), установите видимость содержимого DIV невидимым, используйте функцию Javascript или jQuery для определения ширины страницы, соответственно измените атрибуты ширины / высоты тега OBJECT, и снова установите объект видимым. Он не очень аккуратный, но, вероятно, сработает и не будет зависеть от типа документа.

РЕДАКТИРОВАТЬ Я реализовал это решение, и оно работает во всех браузерах. Смотрите мой отдельный новый ответ об этом.

0 голосов
/ 21 января 2010

Спасибо большое, Эрик и маленький зеленый. Я нашел проблему. Кажется, что вы не можете использовать DOCTYPE, если хотите это сделать. Я просто достал Doctype и xmlns, он работал. Странно, но эффективно.

0 голосов
/ 21 января 2010

Ширина элемента не обязательно предотвращает переполнение этого элемента элементами, содержащимися в нем.

Если вы хотите, чтобы вещи вне DIV не отображались, установите переполнение скрытым: overflow: hidden.

Я даже не уверен, правильно ли я понимаю вашу проблему, если честно. Разъяснение того, чего вы на самом деле надеетесь достичь, может оказаться полезным, если я полностью неверно истолковал вас.

РЕДАКТИРОВАТЬ НИЖЕ

Ваш подход немного странный, попробуйте это: 

<div id="container">
    <object> ... </object>
</div>


<style>
  #container { position: absolute; right: 5px; }
</style>

Кроме того, вы пытаетесь изменить размер видео с помощью CSS - CSS не окажет никакого влияния на объект. Если вы измените, скажем, на video { width: 50px; }, ваше видео не будет иметь ширину 50px.

...