我正在使用 DreamWeaver 从头开始构建网页(无模板)。这是一个学校元素。
在尝试嵌入 YouTube 视频之前，我的 DIV 格式一直很好。为什么我的 YouTube 视频卡在标题的正下方？此外，页面右侧的 DIV/Table 也不正常。它只想要左边的 YT 视频和右边的表格，我希望它们水平排列。
感谢您的帮助。 Click to view the Webpage, with obvious errors.
代码:
HTML-
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" type="text/css" href="FamilyBookMain.css">
</head>
<title>FamilyBook.com</title>
<body>
<div id="top">
</div>
<div class="video-container">
<iframe width="560" height="315" src="//www.youtube.com/embed/MQgdE1_lHnA?rel=0" allowfullscreen></iframe>
<div class="famtree">
<img src="images/fambooktree.png" width="705" height="221"/>
</div>
</div>
<div id="body">
<table style="border-collapse:collapse;">
<thead>
<h1>Your Ancestors Are Dead.</h1>
<h1>But Here, They're Still Alive.</h1>
<br>
</thead>
<tbody>
<tr>
<td style="padding:10px">
<p class="table"><br>Welcome to the world's <strong>largest</strong> online resource for social media profiles and data from the twenty-first century. FamilyBook.com is home to billions of profiles from MySpace, FaceBook, Twitter, Instagram, and more. <br> <br>
We are the <strong>leading provider of social media data</strong> from the early 2000s, including searchable image tags, status updates, relationship histories, friendships and family networks. Our mission is to link people to the personal histories of their ancestors- one social media profile at a time.</p></td> </tr>
<tr><td style="padding:10px">
<p class="table">
Imagine the stories that you'll uncover as you explore your loved one's Facebook timeline and likes, private messages and chat logs, Twitter conversations, and Instagram uploads. The <strong>secrets</strong> that you uncover may even surprise you.<br>
<br> Simply start with a name and <strong>we'll do the rest.
</strong> Discover your ancestor's past. Learn where you came from. <br>
</p></td>
</tr>
</tbody>
<thead>
<tr>
<th class="head" colspan="2">
<strong>Our services are coming soon!</strong><br><br>
</tr>
</thead>
</table>
</div>
<div class="footer">
<p id="footer"><img src="http://img.photobucket.com/albums/v483/CrazyInsaneJess/familybook.png" width="139" height="25"/>
<br>Jessica E. Tompkins 2014 | <a href="http://en.gravatar.com/jesstompkins"> About</a>
</p>
</div>
</body>
</html>
CSS-
@charset "UTF-8";
/* CSS Document */
body {
background-color:#EEEEEE;
position: fixed;
}
#top {
width: 100%;
height: 60px;
background- image:url('http://img.photobucket.com/albums/v483/CrazyInsaneJess/familybook.png');
background-color:#FFF;
background-repeat:no-repeat;
background-position:60px bottom;
border-bottom-width:thin;
border-bottom-color: #333;
border-bottom-style:solid;
position: fixed;
top: 0px;
}
#body {
width: 550px;
height: 400px;
background-color: #99aabb;
text-align: right;
margin: 10px;
position: relative;
left: 650px;
bottom: 215px;
}
h1 {
color: #333;
font-family: Arial, Verdana, sans-serif;
text-align: center;
margin: 0px;
top: 10px;
position: relative;
}
.video {
position: relative;
left:170px;
top: 170px;
}
ul.crap {
color: #333;
font-family: Georgia, "Times New Roman", Times, serif;
font-size:12px;
}
#video {
color: #99aacc;
font-family: Arial, Verdana, sans-serif;
text-align: center;
height: 200;
width: 450;
margin: 350px 0px 0px;
position: absolute;
}
.table {
font-family:Arial, Helvetica, sans-serif;
text-align:left;
font-size:14px;
color: white;
}
.head {
color: #333;
font-family: Verdana, Geneva, sans-serif;
font-size:16px;
padding: 15px;
font-weight:100;
}
.footer{
width: 100%;
height: 60px;
background-color: #99aacc;
border:1px solid #333;
position:fixed;
bottom:0px;
}
#footer{
font-family:Arial, Helvetica, sans-serif;
font-size:9px;
padding:5px;
color: white;
text-align:center;
}
a {
text-decoration:none;
}
最佳答案
首先，欢迎来到 StackOverflow。我只花了大约一分钟的时间查看和编辑您的代码，但我想我明白了您想要做的事情的要点。请看下面的代码:
更改您的 #body元素以匹配下面的代码:(我绝对定位了 div。)
#body {
width: 550px;
height: 400px;
background-color: #99aabb;
text-align: right;
margin: 10px;
position: absolute;
left: 650px;
top:65px
}
将其粘贴到您的 CSS 中:
.video-container{
width:auto;
height:auto;
margin-top:75px;
}
现在，我只想说您的 HTML 有点乱，可以简化很多。正如@Havard Brynjulfsen 指出的那样，有一些 ID 和类未被使用。在任何情况下，上面的代码都应该产生预期的结果，但如果您愿意更改 HTML 结构，则可以更优雅地完成您尝试做的事情。
此外，您的 HTML 中还有一些错误。我强烈建议使用官方 W3C validator 验证您的代码.
这里有太多问题，我无法在不偏离主题的情况下列出，但这里有一些大问题:
- 你的文档类型声明不正确，应该是
<!DOCTYPE html>. - 你的
<title>应该在<head>你的文档。
关于css - 嵌入 HTML YouTube 视频；显示不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21743598/