如何让我的文本正确地包裹在我的视频中,就像图像一样?

时间:2011-04-29 12:06:11

标签: html css

大家好,我一直在尝试制作一个基本的网站,我已经尝试过放入一个视频,但是文本不会向右包装,如果它喜欢它应该像一个正常的页面。我对css的态度不是很好,到目前为止,我所用的是一个模板,但这里是我的网页代码的网站地址,www.butterflyknifeschool.com和我的css代码。请帮忙。由于某种原因,图像完全符合我的要求,但如果我用视频替换图像则不然。

/*
Original design: Daleri Dark (v1.5 - Mar 16th, 2011) - A free xhtml/css website template by Andreas Viklund.
For more information, see http://andreasviklund.com/templates/daleri-dark/
*/

/* Body */
* {margin:0; padding:0;}
body {background:#1a1a1a url(daleri-dark/img/body-bg.gif) top center repeat-y; color:#eee; font:80% "Trebuchet MS",Verdana,sans-serif; line-height:1.3em; text-align:center; padding-bottom:20px;}

/* Top */
#top {padding:0; width:960px; margin:10px auto 5px auto;}
#topleft {width:650px; float:left; margin:0; text-align:left;}
#topleft h1 {font-size:2.4em; line-height:0.9em; margin:5px 0; padding:0;}
#topleft h1 a {font-weight:400;}
#topleft p, #topright p {margin:0 0 5px 0; padding:0; color:#ccc;}
#topright {width:250px; padding:0; float:right; text-align:right; margin:0;}

/* Searchbox */
.searchbox {margin:10px 0 10px 0; padding:0;}
.searchbox label {color:#ddd;}
.searchbox input {background:#2a2a2a; padding:3px 0 3px 5px; margin:0; width:185px; color:#eee; border:1px solid #888;}

/* Header */
#header {background: #333 url(daleri-dark/img/front.jpg) top left no-repeat; color:#eee; margin:0 auto 20px auto; padding:0; text-align:left; width:960px; height:200px;}
#header h2, #header h3 {font-size:1.6em; color:#eee;}
#headerleft {clear:both; width:240px; height:190px; float:left; padding:9px 0 0 10px; overflow:auto;}
#headerright p, #headerright ul, #headerright ol, #headerright div, #headerright table {text-align:left; padding:0; margin:0 0 5px 0; color:#eee;}
#headerleft li {list-style:none; margin:0 0 2px 0;}
#headerright {width:240px; float:right; height:190px; text-align:right; padding:9px 10px 0 0; overflow:auto;}
#headerright p, #headerright ul, #headerright ol, #headerright div, #headerright table {text-align:right; padding:0; margin:0 0 5px 0; color:#eee;}
#headerright li {list-style:none; margin:0 0 2px 0;}

/* Main wrap */
#wrap {margin:0 auto; padding:0; text-align:left; width:960px;}

/* Headers */
h2, h3, h4 {margin:0 0 15px; color:#fff; font-weight:normal;}

/* Sidebar */
#sidebar {margin:0 0 5px 0; float:right; width:180px; padding:0;}
#sidebar h2, #sidebar h3 {font-size:1.6em; padding:2px 0; margin:0 0 8px 0;}
#sidebar h3, #sidebar h4 {font-size:1.2em; margin:0 0 8px 0;}
#sidebar p, #sidebar ul ,#sidebar .textwidget,#sidebar form,#sidebar table {margin:0 0 18px 0; padding:0;}
#sidebar li {list-style:none; margin:0 0 3px;}
#sidebar ul li a {font-size:1.1em;}
#sidebar ul ul, #sidebar ul ul ul {list-style:none; margin: 2px 0 0 15px; padding:0;}
#sidebar ul ul li, #sidebar ul ul ul li {list-style:none; margin:0; padding:0;}
#sidebar ul ul li a {font-size:0.9em; font-weight:normal; margin:0; padding:0;}
#sidebar table {width:180px;}
#sidebar caption {font-size:1.6em; padding:2px 0; margin:0 0 8px 0; text-align:left;}

/* Menu buttons */
#sidebar ul.menubuttons li {list-style:none; width:180px; padding:0; margin:0 0 3px 0;}
#sidebar ul.menubuttons li a {display:block; padding:3px 0 3px 5px; background-color:#3a3a3a; color:#ccc; border:1px solid #555; border-left:4px solid #666;}
#sidebar ul.menubuttons li a:hover, #sidebar ul.menubuttons li.current_page_item a {background:#444; border:1px solid #888; border-left:4px solid #f29450;}
#sidebar ul.menubuttons ul {margin:0; padding:2px 0 0 10px;}
#sidebar ul.menubuttons ul li {width:170px;}
#sidebar ul.menubuttons ul li a {font-size:1em; background:#2a2a2a; padding:1px 0 1px 5px;}

/* Content */
#content {float:left; width:740px; margin-bottom:5px;}
#content h2 {font-size:1.8em; clear:left;}
#content h3 {font-size:1.4em; clear:left;}
#content h2, #content h3 {}
#content h2 a, #content h3 a {font-weight:normal;}
#content p {margin:0 0 18px;}
#content div.postnav {padding:10px 0;}
#content div.postnavleft {width:100%; float:left; text-align:center;}
#content div.postnavright {width:100%; float:right; text-align:right;}
#content ul, #content ol {margin:0 0 18px 30px;}
#content ul li, #content ol li {margin:0 0 3px;}
#content ul ul, #content ol ol {margin:5px 0 5px 15px;}
#content img {margin:0; padding:0;}
#content img.alignleft {display:inline; float:left; margin:5px 15px 5px 0;}
#content img.alignright {float:right; margin:5px 0 5px 15px;}
#content img.aligncenter {display:block; margin:10px auto;}
#content img.border {border:1px solid #888;}
#content .post {margin:0 0 30px;}
#content .timestamp {font-size:1.4em;}
#content .timestamp a {font-weight:normal;}

/* Footer */
#footer {clear:both; color:#eee; text-align:center; background-color:#2a2a2a; border:1px solid #555;}
#footer p {margin:0; padding:10px 0;}
#footer .credits {font-size:1.3em;}
#footer a {color:#eee;}
#footer a:hover {color:#fff; text-decoration:underline;}

/* Comments */
#comments {margin:20px 0 16px 0;}
.comment {margin-bottom:10px; padding-bottom:6px; border-bottom:1px solid #555;}
#content div.comment p.commenticon {margin:0 0 10px;}
#content div.comment p {margin:0 0 4px;}
#respond {margin:20px 0 0 0;}
#respond p {margin:0 0 10px 0;}
#respond input,#respond textarea {padding:4px; width:280px; background-color:#2a2a2a; color:#eee;}
#respond textarea#comment {width:670px;}
#respond input#submit {width:75px;}
#respond input, #respond textarea {font: 100% "Trebuchet MS",Verdana,sans-serif; border: 1px solid #555;}

/* Tags */
blockquote {padding:5px 15px 2px 15px; margin:10px; border-left:4px solid #eee; color:#777;}
blockquote p {padding:2px 0; margin:0; font-weight:bold;}
code {padding:5px; font-size:1.2em; display:block; margin: 5px 0 16px 0; background-color:#2a2a2a; border:1px solid #555;}

/* Links */
a {color:#f29450; font-weight:400; text-decoration:none;}
a:hover {color:#f2c7a8; text-decoration:none;}
a img {border:0;}

/* Float fix */
.contenttext {
    overflow:hidden;


}
* html .contenttext {height:1px; overflow:visible;}
* html .contenttext p {overflow:hidden; width:99%;}

/* Various classes */
.feedlink {padding:2px 0 2px 18px; margin:0 0 0 12px; font-size: 1.1em; background: url(daleri-dark/img/rss.png) center left no-repeat;}
.textright {text-align:right;}
.textcenter {text-align:center;}
.clear {visibility:hidden; clear:both;}
.hide {display:none;}

1 个答案:

答案 0 :(得分:0)

您似乎没有将任何CSS规则应用于与视频播放器本身匹配的任何内容。 <怎么样

#FLVPlayer {
    float: left;
}