Simple CSS Positioning Question
Basically I'm trying to create a small div (header class) that sits on top of a main banner image div (banner class). I've been able to position it correctly when my browser window is maximized, but when I resize the browser the header div maintains the margins and shrinks down to much less than the banner's width. I realize this is because I have the margins set at fixed positions on the left and right so they're maintaining those positions... I'm just new to CSS and am not sure exactly what to do to prevent this from happening. I've been messing around with positioning for about an hour and just can't get it right.
CSS:
开发者_如何转开发<style type = "text/css">
body {
background-color: #595959;
}
.header {
background-color: #4CBB17;
padding: 12px 0px 12px 0px;
margin: 0px 137px 0px; 137px;
}
.banner {
text-align: center;
}
</style>
HTML:
<html>
<head>
<title>Thanks!</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<div class="header">
</div>
<div class="banner">
<img src="banner.jpg" />
</div>
</body>
</html>
Any help would be much appreciated!
either put the banner into the header div
or create a "wrapper" div for the whole site, if your banner image, for example, is 960px wide and that how wide you want the site to be a wrapper many be beneficial as you can center the wrapper and forget about trying to center everything inside it.. or even if then your banner is less you can then center it inside the #wrapper.. options ;)
CSS:
body {
background-color: #595959;
}
#wrapper {
width: 960px;
margin: 0 auto;
}
.header {
background-color: #4CBB17;
padding: 12px 0;
}
.banner {
text-align: center;
}
HTML:
<div id="wrapper">
<div class="header">header text</div>
<div class="banner">
<img src="banner.jpg" style="width: 960px; height: 230px;" />
</div>
</div>
I´m not sure what you are trying to achieve exactly, but if you want the banner always to be the same size as the header, you can use:
.header, .banner {
margin: 0px 137px 0px; 137px;
}
.header {
background-color: #4CBB17;
padding: 12px 0px 12px 0px;
}
.banner img {
width: 100%;
}
Or you get rid of the banner altogether and use a background image for the header.
Maybe you can add a min-width: property to the header?
加载中,请稍侯......
精彩评论