1

最近学んだことのいくつかを練習するために、YouTube に似たレイアウトを再現しようとしています。埋め込まれた Youtube ビデオの位置を変更するにはどうすればよいですか?

で埋め込み動画の親divを作ってみたdisplay: relativeのですが、うまくいきません。

http://jsfiddle.net/GztRt/

<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="bluetube.css" /> <title> Webpage #3 </title>
</head>

<body>
<div id="header">                       <!-- Top header with logo, search bar, upload button-->
    <a href="http://www.youtube.com" id="logo">
        <div id="blue"> Blue</div>
        <div id="tube">Tube</div>
    </a>
    <form  style="display: inline; width: 200px;" name="searchbar" action="searchinput.asp" method="get">
            Search <input type="text" name="searchinput">
            <input type="submit" value="Submit">
    </form>
    <a href"http://www.amazon.com" id="uploadparent">
        <div id="upload">Upload</div>
    </a>


</div>


<div id="videobox">
    <object width="420" height="315">
    <param name="movie" value="http://www.youtube.com/v/dQw4w9WgXcQ?    hl=en_US&amp;version=3"></param><param name="allowFullScreen" value="true">
    </param><param name="allowscriptaccess" value="always">
    </param><embed src="http://www.youtube.com/v/dQw4w9WgXcQ?hl=en_US&amp;version=3" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true">
    </embed></object>

</div>

<div id="column_box_right"></div>     <!-- Related Videos spans the Right side! -->
<div id="column_box_left>ddddddddddddddddddddddd</div>      <!-- column spans the left side! -->
<div id="vidinfo"></div>

<div id="footer"></div>

CSS:

html body {
width: 100%;
}

#header {
    height: 35px; 
    background-color: grey;
    margin-top: -6px;
    position: relative;
    margin-left: -7px
    overflow: auto;
    min-width: 1000px;
}

#blue {
    height: 35px;
    width:  60px;
    background-color: grey;
    border-radius: 4px;
    text-align: center;
    color: blue;
    display: inline-block;
    font-size: 20px;
    font-family: Verdana;
}
#logo {
    float: left;
    margin-right: 14%;
}
#tube {
    height: 35px;
    width:  60px;
    background-color: blue;
    border-radius: 4px;
    text-align: center;
    display: inline-block;
    color: white;
    font-size: 20px;
    font-family: Verdana;
}
#upload {
    height: 30px;
    width: 100px;
}
4

2 に答える 2

0

#videoboxdivに余分なスペースがありました。#video boxからに変更すると、jsfiddle で to を正しく配置#videoboxできるようになりました。divこれがあなたのサイトの問題かどうかはわかりませんが、ほとんどの場合、コピー アンド ペーストが行われるため、ここで問題を解決することにしました。

于 2013-05-16T17:21:58.013 に答える
0

これにより、ビデオボックスの div が画面上の好きな場所に移動します。これで中央に移動します。

#videobox {
display: block;
height: 100%;
left: 25%;
position: absolute;
top: 25%;
width: 100%;

}
于 2013-05-16T17:25:48.030 に答える