html - Header div too big because of z-index? -
i used z-index layer images in header, , header size big. basically, height same if images layed out without being overlapped, ends being white space. result, body overlaps header.
this page, may make sense @ mean, can post code if needed!
http://kerryaltmantest.info/hometest.html
eta - here's css:
#header { width: 1100px; margin:0 auto; background: #ffffff;} #body {width: 950px; margin:0 auto; background: #ffffff;} #menu1 { width: 890px; margin:0 auto; background: #ffffff;} #content { width: 930px; margin:0 auto; background: #ffffff; border-left: 10px solid #2b297f; border-right: 10px solid #2b297f;} body { background: #d0d0d0;} .background { border: 0px ; position: relative; z-index: 1; left: -150px; top: -30px } .mainheader { border: 0px; position: relative; z-index: 2; top: -185px; left: 170px; } .phone { position: relative; z-index: 3; top: -298px; left: 675px} .email { position: relative; z-index: 4; top: -287px; left: 720px}
and here's html:
<div id="header"> <div id="mainrunner"><img class="background" height="200" src="http://i.imgur.com/k1w98df.png" width="800" /> <img class="mainheader" height="150" src="http://i.imgur.com/sdqmfwt.png" width="500" /></div> <div class="contactinfo"><img class="phone" height="40" src="http://i.imgur.com/5wew8pc.png" width="250" /><br><a href="mailto:kerralt@aol.com"><img class="email" height="30" src="http://i.imgur.com/bxs6aht.png" width="200" /> </a></div></div>
you have of images position:relative, based on description, don't want them relative, want them absolute.
change "relative" "absolute" , re-adjust "top:" property accordingly.
example css:
#header { width: 1100px; margin:0 auto; background: #ffffff; position:relative} #body {width: 950px; margin:0 auto; background: #ffffff;} #menu1 { width: 890px; margin:0 auto; background: #ffffff;} #content { width: 930px; margin:0 auto; background: #ffffff; border-left: 10px solid #2b297f; border-right: 10px solid #2b297f;} body { background: #d0d0d0;} .background { border: 0px ; position: absolute; z-index: 1; left: -150px; top: -30px } .mainheader { border: 0px; position: absolute; z-index: 2; left: 170px; } .phone { position: absolute; z-index: 3; top:45px; left: 675px} .email { position: absolute; z-index: 4; top: 100px; left: 720px}
Comments
Post a Comment