why is the inner div top margin bringing it's wrapper div top margin along with it
<body>
<div id = "wrapper">
<div id = "video">
</div>
</div>
<div id = "footer">
<div id = "footercontent">
</div>
</div>
</body>
*
{
margin: 0px;
padding: 0px;
}
.selfclear:after
{
content: ".";
float: left;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
html, body
{
height: 100%;
}
#wrapper
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -343px; /* the bottom margin is the negative value of the foo开发者_JS百科ter's height */
width: 100%;
background: url( "images/landing_page_bg.png" );
}
#video
{
width: 940px;
height: 530px;
background: black;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
}
#footer
{
height: 343px; /* .push must be the same height as .footer */
background: url( "images/Landing_page_Footer.png" )no-repeat;
background-size: 100%;
background-color: black;
width: 100%;
}
#footercontent
{
height: 100%;
width: 1920px;
margin-left: auto;
margin-right: auto;
}
I'm not sure that I understand your question but there are a couple of things that you should address first.
First, you should use a css reset before setting any styles. Eric Myers' Reset is probably the most commonly used, in one form or another.
Second, your formatting is wrong and that can cause strange issues by itself.
Here is the cleaned up code with a minimal reset:
<body>
<div id="wrapper">
<div id="video">
</div>
</div>
<div id="footer">
<div id="footercontent">
</div>
</div>
</body>
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video
{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
* {-webkit-font-smoothing: subpixel-antialiased !important; text-rendering:optimizeLegibility;}
html {height:100%;}
.selfclear:after { /* not sure what this is being used for */
content: ".";
float: left;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#wrapper {
width: 100%;
height: auto !important;
margin-bottom: -343px; /* the bottom margin is the negative value of the footer's height */
/* Are you wanting for the footer to be pulled up and overlap your wrapper DIV? */
background: url('images/landing_page_bg.png') no-repeat 0 0;
}
#video {
width: 940px;
height: 530px;
margin: 100px auto 0 auto; /* You can include all margins in a shorthand statement ~ TOP RIGHT BOTTOM LEFT */
background: black;
}
#footer {
width: 100%;
height: 343px; /* .push must be the same height as .footer */
background: url('images/Landing_page_Footer.png') no-repeat 0 0;
/* background-size is NOT VALID or needed. Set the size of the container and repeat or no-repeat accordingly - background-size: 100%; */
background-color: black;
}
#footercontent {
width: 1920px;
height: 100%;
margin:0 auto; /* shorthand again TOP/BOTTOM LEFT/RIGHT */
}
加载中,请稍侯......
精彩评论