html - footer does not inherit the positioning property? -
i going smooth html , css codes until problem facing , don't know happening.
my html patterns this.
in top <div id="header">
not have fixed width. have used image , used repeat-x property. , in header have navigation menu wrapped in container of 940px;
in middle <div id="content">
wrapped container of same 940px;
till content div codes fine. facing problem in positioning footer correctly. footer should not have fixed width , should not wrapped in container. defined footer div outside of content , container div right before closing of body , html tag.
when footer image have dimension of 50px x 290px; goes upward , placed content div. not come bottom. using temporarily margin-top:1600px;
position correctly wrong.
why not inheriting position, tried giving every position attribute. not working :(,
what missing?
p.s: code lil lengthy didnt post here, instead explained happening. if still want see code can try , put minimal code.
thank you
edit : here link jsfiddle , code. http://jsfiddle.net/32shz/
the problem seems have been #footer
wasn't clearing floated divs (and gosh, do divs don't you? 70? in one document?). so, adding:
#footer { clear: both; width:940px; /* copied other divs */ }
seems have worked. i'm not sure, yet, why #footer
isn't respecting margin: 0 auto;
still, seems moving on right tracks. have at: jsfiddle.net/32shz/3/ (you'll note i've used jquery populate divs, see where. , added background-color
#footer
make more visible, these are, clearly, optional).
edited in response comment:
i confused jquery code. exactly.?
jquery javascript library, written provide cross-browser compatible abstraction, that, part, 1 set of code should produce consistent results cross-browser, ie chrome. api available review online, on at: jquery.com.
$('div').each( function(i) { $(this).append('<p>div (' + + ') ' + $(this).attr('id') +'</p>'); } );
the code used, step step:
- found
div
elements on page,$('div')
- iterated on each of elements, , applied function.
i
iterator.each(function(i){...})
- worked on current element,
$(this)
- appended
<p>
element, text contents `.append('div (' + + ') ' + $(this).attr('id') +'
') - the
$(this).attr('id')
section looks @ current element , finds 'id' attribute, inserting string.
Comments
Post a Comment