css - Logo Moves All Over The Place When Resize Windows -
css - Logo Moves All Over The Place When Resize Windows -
okay have problem website working on.. infact have problem alot , never asked help, think it's time now. here css:
header { background: #eeeeee; height: 50px; } .logo { background: url(logo.png); width: 200px; height: 40px; margin: 0 280px; }when resize window logo in header go in right when window resized. have tried position absolute, relative etc same thing. ideas please guys?
here html:
<header> <div class="logo"></div> </header>
here links pictures representing problem:
this working alligned:
and
this starts go on place:
any ideas? please
set width on header element. it's defaulting width: auto;
spanning 100% of browser window. thus, when re-size window's width, header element re-sized moving contents.
update 1
you're using margin position logo 280px left side of browser window, when resize window's width, logo moving too- logo beingness 'pushed'. want wrap in container div , set margin spacing relative that, not browser window.
html
<div id="container"> <header> <div class="logo"></div> </header> </div>
css
#container { width: 400px; margin: 0 auto; } header { background: #eeeeee; } .logo { background: url(http://i.imgur.com/4hs7p.png) no-repeat top left; width: 200px; height: 198px; margin: 0; }
fiddle: http://jsfiddle.net/alpacalips/ybe9d/2/
css header
Comments
Post a Comment