[英]Header banner in html and css
I'm getting frustrated with this responsive web design. 我对此响应式网页设计感到沮丧。 I'm trying to create a banner for a one page site that i'm trying to build (for exercise purpose).
我正在尝试为我要构建的一页站点创建横幅(出于锻炼目的)。
Instead of making the image as a background of the header, i wrote it inside the header tag in the html, making it look like a banner is not that hard for me but i wanna put some text on top of the image and it works perfectly fine with absolute positioning of the hgroups. 我没有将图像作为标题的背景,而是将其写在html的header标记内,让它看起来对我来说并不难,但我想在图像上方放置一些文本,并且效果很好hgroup的绝对位置很好。
header#main img{ max-width: 100%; max-height: auto; opacity: 2; margin: 0 auto; } header#main hgroup h1{ position: absolute; top: 50%; left: 20%; opacity: .5; margin-top: 0; color: #E7E7E7; font-size: 3.5em; font-family: 'Open Sans'; font-weight: lighter; max-width: 100%; margin: auto; } header#main hgroup h2{ font-family: 'Open Sans'; opacity: .9; font-style: italic; color: #E7E7E7; font-size: 1em; font-family: 'Open Sans'; font-weight: lighter; text-align: justify; position: absolute; top: 60%; left: 42%; max-width: 100%; margin: auto; }
<header id="main"> <img src="imgs/mountain.jpg"/> <hgroup> <h1>Title</h1> <h2> subtitle </h2> </hgroup> </header>
And when i try to resize the browser they go missing. 当我尝试调整浏览器大小时,它们会丢失。 Any technique on making a header banner?
有任何制作标题横幅的技术吗?
Look into what happens when you place a position:absolute element within a position:relative one. 查看将position:absolute元素放在position:relative元素中时发生的情况。 This should give you what you need.
这应该给您您所需要的。
Your positions are currently relative to the whole screen rather than the outer banner area - which means as the screen changes size, the whole thing jumps about regardless of the image height. 您的位置目前是相对于整个屏幕,而不是外部横幅区域-这意味着随着屏幕尺寸的变化,无论图像高度如何,整个过程都会跳跃。
If you make the outer element of the banner position:relative, then they will then be in relation to the dimensions of the this banner area, not the screen. 如果您将横幅广告的外部元素设置为相对:,则它们将相对于横幅广告而非屏幕的尺寸。
I think this should work. 我认为这应该有效。 https://jsfiddle.net/1c8qy7bo/
https://jsfiddle.net/1c8qy7bo/
HTML: HTML:
<header>
<div class="container">
<img align="center" src="http://www.improntaunika.it/wp-content/uploads/2014/09/moutain.jpg"/>
<h1> AAAAAAAAA </h1>
<h2>BBBBBBBBBBBBB</h2>
</div>
</header>
CSS: CSS:
header{
width:100%;
position: absolute;
background: #f5f5f5;
height: 14%;
background-position: 100%;
min-height: 80px;
min-width: 300px;
}
img{
width: 100px;
height: 100px;
position: absolute;
right: 50%;
margin-right: -50px;
}
h1{
position: absolute;
font-size: 10px;
right: 50%;
margin-right: -50px;
}
h2{
position: absolute;
font-size: 10px;
right: 50%;
margin-right: -50px;
top:50%;
}
Comment if you have a question. 如有疑问,请发表评论。 I hope this will be usefull.
我希望这会有用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.