在html中,marque对齐不合适

时间:2015-03-22 17:38:05

标签: html css

我希望这个品牌位于图像中绿板的前提下。但这个品牌并不一致。请告诉我怎么做。 以下是代码。 案文正在绿板之上。如何纠正?



#test {
    background: url("http://s14.postimg.org/z0bjc6vht/boarlad_1.png") no-repeat top left;
    height: 540px; /*image height*/
    width: 960px; /*image width*/
    position; relative;
    color: white;
}
.box {
    position: absolute;
    left: 300px;
    top: 200px;   
    width: 530px;
    height: 280px;
}

<h2>Presentation 1</h2>
<a href="index.html"><h3>Back to Main Page</h3></a>
<div id="test">
    <div class="box">
        <marquee style ="top:100px;"scrollamount="2" direction="up"  scrolldelay="1" onmouseover="this.stop()" onmouseout="this.start()" width="100%"/>
        <font color="white"><strong> There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text!
        </strong></font></marquee>
    </div>
</div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

如果我理解你,你可以这样做:

示例:http://jsfiddle.net/gf2eoenc/

首先,我们从marquee中删除内联样式,然后用容器div(<div id="marquee-container">)包装它。

此外,我们在div上设置overflow: hidden; class: box;,这意味着所有内容都将嵌套在此div中,并且不会超出其包含块(在我们的示例中带有类框的div)

接下来我们应该做的是&#34; play&#34;使用带有类框的div的宽度/高度/顶部属性来根据需要调整它。

您将其属性设置为px(像素)我建议您使用百分比/ em。

HTML:

<h2>Presentation 1</h2>
<a href="index.html"><h3>Back to Main Page</h3></a>
<div id="test">
<div class="box">
    <div id="marquee-container">
    <marquee  scrollamount="2" direction="up"  scrolldelay="1" onmouseover="this.stop()" onmouseout="this.start()" />
    <font color="white"><strong> There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text! There will be text!
    </strong></font></marquee>
    </div>
</div>

CSS:

#test {
background: url("http://s14.postimg.org/z0bjc6vht/boarlad_1.png") no-repeat top left;
height: 540px; /*image height*/
width: 960px; /*image width*/
position; relative;
color: white;
}
.box {
position: absolute;
left: 300px;
top: 141px;   
width: 550px;
height: 330px;
overflow: hidden;
}

.box #marquee-container {
 width: 500px;
height: 280px;
}

HTH。