早上好!
我有一张背景图片,我试图放置一些文字和一些按钮。我可以放置文本(似乎只使用填充),但无法正确放置我的按钮。我已经尝试过几十种不同的解决方法,但无法解决任何问题。非常感谢任何帮助!
页面:http://tradecaptain.com/nlp 我的css / html。它不漂亮。我只是在学习。破解的css id是代码末尾的.video。
<style type="text/css">
.outer {
position: relative;
background: url(/images/LandingPageTopBlend.png);
width: 960px;
height: 300px;
}
.Line1 {
line-height: 10px;
padding-top: 50px;
text-align: center;
font-size:26px;
font-family:Verdana;
font-weight: bold;
color: #fff;
}
.Line2 {
text-align: right;
padding-right: 45px;
padding-top: 15px;
font-size:10px;
font-family:Verdana;
font-weight: bold;
color: #fff;
}
.Line3 {
line-height: 10px;
text-align: left;
padding-left: 45px;
padding-top: 30px;
font-size:26px;
font-family:Verdana;
font-weight: bold;
color: #fff;
}
.video {
display: block;
position: absolute;
top: 260px;
left: 100px;
} </style>
<div class="outer">
<div class="Line1"><h1>The Simple Way to Trading Profit</h1></div>
<div class="Line2"><h1>trading forex stocks commodities futures</h1></div>
<div class="Line3"><h1>The TradeMap. Trade like a pro.</h1></div>
<div id="video">
<a href="http://www.youtube.com/watch?v=-DYkSNur2Rc" rel="lightvideo"><img alt="How to Trade Video" src="/images/WatchVideo.png" style="width: 136px; height: 34px;" /></a></div>
</div>
答案 0 :(得分:2)
您的HTML比所需的更复杂,您不需要在h1
中嵌套div
个元素。您似乎正在使用h1
来获取较大的粗体文字,但您只需将字体样式直接添加到div
即可。
您还可以通过利用CSS级联和分组选择器来简化CSS,例如,.Line1, .Line2, .Line3
用于那些CSS规则
所有线路都很常见。
您最初将行高指定为10px,这会导致问题 如果文本必须换行到2行或更多行。在这种情况下,您可以使用 默认行高,通过将其设置为10px,您无法获得任何结果。
您可以使用边距打开文本行之间的间距,但要防止
来自子元素的边距与父元素.outer
折叠,应用overflow: auto
来创建块格式化上下文。
您可以阅读CSS2规范中的块格式化上下文。
最后,要定位视频链接,只需使用类选择器(.video
)
而不是id(#video
)。你有正确的想法,但语法错误。
.outer {
position: relative;
background-color: gray;
width: 960px;
height: 300px;
overflow: auto; /* Start a block formatting context so that margins don't collapse */
}
.Line1, .Line2, .Line3 {
font-size:26px;
font-family:Verdana;
font-weight: bold;
color: #fff;
}
.Line1 {
text-align: center;
margin-top: 20px;
}
.Line2 {
text-align: right;
font-size: 13px;
margin-top: 40px;
}
.Line3 {
text-align: left;
margin-top: 30px;
margin-left: 30px;
}
.video {
display: block;
position: absolute;
bottom: 10px;
left: 10px;
}
<div class="outer">
<div class="Line1">The Simple Way to Trading Profit</div>
<div class="Line2">trading forex stocks commodities futures</div>
<div class="Line3">The TradeMap. Trade like a pro.</div>
<div class="video">
<a href="http://www.youtube.com/watch?v=-DYkSNur2Rc" rel="lightvideo"><img alt="How to Trade Video" src="/images/WatchVideo.png" style="width: 136px; height: 34px;" /></a>
</div>
</div>
答案 1 :(得分:0)
您的CSS选择器为.video
,其定位class="video"
,但您的div
有id="video"
。将div更改为<div class="video">
或将CSS选择器更改为#video
。