Видео не центрируется, как остальная часть моего кода

Question

Видео не центрируется, как остальная часть моего кода

0

Таким образом, я использовал тот же формат, чтобы центрировать все в соответствии со всеми разрешениями экрана. Это продолжалось некоторое время, пока я не попытался добавить видео.

Это ОСОБЕННО, потому что это видео?

JSFIDDLE: http://jsfiddle.net/SgQ56/

Вот мой код. HTML

<body>
<div id="page-wrap">
    <div id="header">
        <img src="http://i.imgur.com/UMz3wIf.png" />
    </div>
    <img src="http://i.imgur.com/8snNfFV.png" />
    <ul id="nav">
        <li><a href="http://www.voyage-us.com">Home</a></li>
        <li><a href="http://www.voyage-us.com/xenforo/upload/index.php">Forums</a></li>
        <li><a href="http://www.voyage-us.com/members">Members</a></li>
        <li><a href="http://www.google.com">Streams</a></li>
        <li><a href="http://www.google.com">Contact Us</a></li>
    </ul>
    <div class="clear"></div>
    <div id="mainbody">
        <img src="http://i.imgur.com/oMJE74H.png" /></div>

    <div id="banished">
        <iframe width="325" height="240" src="http://www.youtube.com/embed/Ls8FBFFjMxk" frameborder="0" allowfullscreen></iframe>
    </div>

    <div id="footer">
    <p>&copy;2014 Rythmn Designs<p></div>
</div>
</body>

CSS

body
{
margin: 0px;
padding: 0px;
background: url("http://puu.sh/6RlKi.png")
}

.clear
{
clear:both;
}

#page-wrap
{
width: 1019px;
margin: 0 auto;
}

#header
{
width:100%;
text-align: center;
display: block;
}

.readmore
{
position: absolute;
margin: 0 auto;
top: 352px;
right: 382px
}

#nav
{
height: 1px;
list-style: none;
padding-left: 14px;
text-align: center;
padding-bottom: 0px;
margin: -14px;
margin-top: -15px;
}

#nav li a
{
position:relative;
top: -12px;
display: block;
width: 100px;
float: left;
color: white;
font-size:  14.09px;
text-decoration: none;
font-family:"BankGothic Md BT"
}

#nav li a:hover, #nav li a:active
{
color: red;
}

#mainbody
{
vertical-align:top;
position:relative
}

.news2
{
margin: 0 auto;
position: absolute;
top: 125px;
right: 375px
}

#banished
{
margin: 0 auto;
position: absolute;
top: 685px;
right:488px;
}

.news1
{
margin: 0 auto;
position: absolute;
top: 400px;
right: 378px
}

.teamspeak
{
position: absolute;
top: 125px;
right: 30px

}

#ts3viewer_1037062
{
position:absolute;
top: 155px;
right: 30px;
width: 290px;
height:190px;
overflow:auto;
}

.twitter-timeline
{
right: 27px;
top: 407px;
position:absolute;
width: 310;
height:230;
}

.twitter
{
right: 35px;
top: 406px;
position:absolute;
width: 310;
height:230;
}

#footer
{
background: #181818;
color: white;
padding: 20px 0 20px 0;
text-transform: uppercase;
border-top: 15px solid #828080;
text-align: center;
font-family:"BankGothic Md BT";
font-size:  12px;
position: relative;
}

user3294450 18 фев. 2014, в 02:03

Источник

Теги:

html

css

embed

video

center

2 ответа

0

Я думаю, вы набрали право, а не оставили в #banished. Если вы измените верхнюю часть на 690 пикселей и выйдете на 650 пикселей, она поместит видео в нужное место (возможно, не идеальное пиксель, вы можете настроить его)

user3304179 17 фев. 2014, в 22:31

0

Но момент, который я пытаюсь исправить, заключается в том, что видео остается в центре, даже если я просматриваю веб-сайт с меньшим разрешением. Я использую 1920x1080, который выглядит хорошо, но чем меньше разрешение, тем больше уходит.
user3294450 18 фев. 2014, в 01:24
0

Попробуйте изменить вершину на 43,125em и оставить на 40,625em. Я думаю, что это будет масштабироваться с разрешением. Возможно, он все еще не идеален по пикселям, он должен быть в том же положении, что и в моем предыдущем примере, за исключением масштабирования.
user3304179 18 фев. 2014, в 02:10
0

Это только сместит видео влево, и когда я уменьшу разрешение, оно сместится, чего я не хочу.
user3294450 18 фев. 2014, в 02:13
0

Правильно ли он отрегулирован по горизонтали?
user3304179 18 фев. 2014, в 03:09

Показать ещё 2 комментария

Ещё вопросы

Но момент, который я пытаюсь исправить, заключается в том, что видео остается в центре, даже если я просматриваю веб-сайт с меньшим разрешением. Я использую 1920x1080, который выглядит хорошо, но чем меньше разрешение, тем больше уходит.
Попробуйте изменить вершину на 43,125em и оставить на 40,625em. Я думаю, что это будет масштабироваться с разрешением. Возможно, он все еще не идеален по пикселям, он должен быть в том же положении, что и в моем предыдущем примере, за исключением масштабирования.
Это только сместит видео влево, и когда я уменьшу разрешение, оно сместится, чего я не хочу.
Правильно ли он отрегулирован по горизонтали?

stephuhnee8708 · Accepted Answer · 2014-02-17T23-55-00.000Z

Помогает ли это? Я тестировал его на своем ноутбуке и, похоже, на месте

//edit Ok Я думаю, что я исправил это на этот раз??

#banished{
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    width: 50%;
}
#banished iframe {
    position: absolute;
    top: 370px;
    left: 633px;
    height: 15%;
    width: 35%;
}

Я также помещал #banshed внутри тега #mainbody в html

дерьмо НВМ ммм держать эту мысль лол
Да, это сбивает с толку .. Я не знаю, потому что это видео.
Я немного поигрался с твоим комментарием и понял это. БЛАГОДАРЮ ВАС :)