[英]how to make my css header responsive
Im using this CSS: 我正在使用这个CSS:
#header-topbar {
width:100%;
height:120px;
padding-top:5px;
}
#header-right-content {
float:right;
margin-right:14%;
margin-top:20px;
font-size:20px;
text-align:right;
color:#000000;
}
#logo {
position: absolute;
float: left;
margin-left: 15%;
margin-top: 25px;
width: 360px;
height: 50px;
}
for my header and i want to make it responsive. 对于我的标题,我想让它响应。 i know how to use the media queries but im not sure about the rest of the css. 我知道如何使用媒体查询但我不确定其余的CSS。
how do i make it so the logo div displays at the top, centered and then the text to display below? 我如何制作它,使徽标div显示在顶部,居中,然后显示在下面的文本?
i have created a fiddle here: http://jsfiddle.net/bMsMw/ so you can see the html 我在这里创建了一个小提琴: http : //jsfiddle.net/bMsMw/所以你可以看到HTML
thanks 谢谢
in #header-topbar
to make easy to manipulate in media query
height should not state, 在#header-topbar
中使得易于操作的media query
高度不应该说明,
in #logo
is there reason why you position:absolute
that is one reason why your logo not go down because of absolute:position
it display on the top of element, 在#logo
中有这样的原因你position:absolute
这是你的标志因为absolute:position
原因而下降的一个原因absolute:position
它显示在元素顶部的absolute:position
,
#header-topbar {
float:left;
width:100%;
padding-top:5px;
}
#header-right-content {
float:right;
margin-right:14%;
margin-top:20px;
font-size:20px;
text-align:right;
color:#000000;
}
#logo {
float: left;
margin-left: 15%;
margin-top: 25px;
width: 360px;
height: 50px;
}
#logo img {
max-width:100%;
width:100%;
}
@media handheld, screen and (max-width: 620px){
#logo{
width:70%;
float:none;
margin-left:auto;
margin-right:auto;
}
#header-right-content {
float:left;
width:100%;
text-align:center;
}
}
hope this help you.. 希望这能帮到你..
Like this? 像这样? http://jsfiddle.net/bMsMw/1/ Not exactly sure how the image should fit. http://jsfiddle.net/bMsMw/1/不完全确定图像应该如何适合。
code
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.