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

Popular posts from this blog

database - VFP Grid + SQL server 2008 - grid not showing correctly -

jquery - Set jPicker field to empty value -

.htaccess - htaccess convert request to clean url and add slash at the end of the url -