CODEWITHSUNDEEP
htmlcssspace
qaxf6auux
qaxf6auux

Reputation: 2754

Extra space at bottom of page

For some reason there is a ton of extra white space at the bottom of my page that I cannot seem to get rid of. I cannot put anything inside of the space nor can I get rid of it. I did some research and I have a hunch it has to do with the fact that my images are position:relative but I'm still not entirely sure. If I need to get rid of position:relative, can somebody please tell me how else to place images that doesn't use position:absolute or position:relative?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="SDL.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Home</title>
</head>

<body>
<center>
<img src="img/SDL 4 Final Recompress.jpg" height="283" style="position: relative;"/>
<br/>
<hr width="500"/>


<img src="img/Studio-Light_sxu1.png"         style="position: relative; top: -496px; left:  30px; z-index: 3; height: 200px;"/>
<img src="img/Studio-Light_sxu1 flipped.png" style="position: relative; top: -496px; left: 650px; z-index: 3; height: 200px;"/>

<embed
src="http://blip.tv/play/AwGUv2w"
type="application/x-shockwave-flash" width="669"
height="500" allowscriptaccess="always"
allowfullscreen="true" wmode="transparent" style="position:relative; z-index: 2; top:100px; left:-200px">
</embed>

<img src="img/Stage-Background.png" style="position: relative; z-index: 1; height: 680px; top:-500px"/>
</center>

<div id="nav">
<p>All Episodes</p>
<a>Contact</a>
<a>Facebook</a>
<a>Meet the Crew</a>
</div>





</body>
</html>

Upvotes: 1

Views: 2778

Answers (2)

dave
dave

Reputation: 64657

Change this

<img src="img/Stage-Background.png" style="position: relative; z-index: 1; height: 680px; top:-500px"/>

to

<img src="img/Stage-Background.png" style="z-index: 1; height: 680px; margin-top:-500px"/>

When you do position: relative, and move it, it keeps the rest of the document the same as if you had not moved it, so it has to keep the space below it. If you do a negative margin top, it is pulling everything that the image moved down, up with it.

Upvotes: 1

Jack Allen
Jack Allen

Reputation: 547

it looks like

<img src="img/Stage-Background.png" style="position: relative; z-index: 1; height: 680px; top:-500px"/>

is causing your problem, try altering the

height: 680px;

see if the problem persists

Upvotes: 0

Related Questions