CODEWITHSUNDEEP
html
Luke h
Luke h

Reputation: 337

Large space at bottom of webpage

i've made my first ever webpage for a college project and when it renders there is a huge space at the bottom of the page, from reading elsewhere i've determined this is because of the huge padding i've been using with all my elements, but is there a quick fix to remove this space? Or even a way to re-write it and have it all in the same place, thanks!

The code is as follows:

        <!DOCTYPE html>

<html>

<head>

<style>



body {background-image:url('bckground.png');}




p.menutext {
            padding-top:250px;
    text-align:center;

            position:relative;left:-55px;
            white-space:nowrap;
    }
p.jscript 
{
padding-left:250px;
position:relative;top:-25px;
}

p.topproducts
{
padding-left:222px;
position:relative;top:-120px;
 }



p.arrowborder
{
position:relative;top:-640px;
padding-left:175px;
}

p.deckthumb1
{
padding-left:210px;
position:relative;top:-699px;
}
p.deckthumb2
{
padding-left:408px;
position:relative;top:-970px;
}
p.deckthumb3
{
padding-left:605px;
position:relative;top:-1243px;
}
p.deckthumb4
{
padding-left:800px;
position:relative;top:-1516px;
}

p.info
{padding-left:300px;
position:relative;top:-1500px;
}


</style>



 <script language="JavaScript1.1">

 <!--





var slideimages=new Array()

var slidelinks=new Array()

function slideshowimages(){

for (i=0;i<slideshowimages.arguments.length;i++){

slideimages[i]=new Image()

slideimages[i].src=slideshowimages.arguments[i]

}

}



function slideshowlinks(){

for (i=0;i<slideshowlinks.arguments.length;i++)

slidelinks[i]=slideshowlinks.arguments[i]

}



function gotoshow(){

if (!window.winslide||winslide.closed)

winslide=window.open(slidelinks[whichlink])

else

winslide.location=slidelinks[whichlink]

winslide.focus()

}



//-->

</script>


</head>


<body>




<div id="mainside">
<p class="menutext">

<a href="Index.html"><img src="homebutton.png" border="0" alt="" 

width="80 height="50"/></a><a href="skateboards.html"><img 

src="skateboardsbutton.png"border="0" alt="" width="222 

height="65"/></a><a href="accessories.html"><img 

src="accessoriesbutton.png"border="0"alt=""width="215 

height="40"/></a><a href="help.html"><img src="helpbutton.png"border="0" 

alt="" width="100"height="59"/></a>
</p>
</div>




<p class="jscript">
<a href="javascript:gotoshow()"><img src="food1.jpg"
 name="slide" border=0 width=800 height=450></a>


<script>

<!--






slideshowimages

("slideshow1.png","slideshow2.png","slideshow3.png","slideshow4.png")

slideshowlinks
("skateboards.html","skateboards.html","skateboards.html","accessories.h

tml")



//configure the speed of the slideshow, in miliseconds
var 

slideshowspeed=2000



var whichlink=0

var whichimage=0

function slideit(){

if (!document.images)

return

document.images.slide.src=slideimages[whichimage].src

whichlink=whichimage

if (whichimage<slideimages.length-1)

whichimage++

else

whichimage=0

setTimeout("slideit()",slideshowspeed)

}

slideit()



//-->

</script>



</p>

<p class="topproducts">
<img src="topproducts.png" border="0" alt="" width="830 height="50"/>
</p>
<p class="arrowborder">
<img src="arrowborder.png" border="0" alt="" width="880" height="490"/>
</p>


<div id="mainside">
<p class="deckthumb1">
<img src="indexdeckthumb1.png" border="0" alt="" width="250" 

height="250"/>
</p>
<p class="deckthumb2">
<img src="indexdeckthumb2.png" border="0" alt="" width="250" 

height="250"/>
</p>
<p class="deckthumb3">
<img src="indexdeckthumb3.png" border="0" alt="" width="250" 

height="250"/>
</p>
<p class="deckthumb4">
<img src="indexdeckthumb4.png" border="0" alt="" width="250" 

height="250"/>
</p>

</div>


<div>
<p class="info">
<font face="herculanum" color="#518087" size="3">
CYCLONE <br>
Cyclone Skateboards <br>
Ltd. <br>
1 Holmes Street,<br>
Oxford  <br>
Oxfordshire, England,<br>
OX25 7PJ <br>
</font>
</p>
</div>



</body>

</html>

Upvotes: 0

Views: 176

Answers (4)

Sachin
Sachin

Reputation: 2148

change css : 

p.info
{
padding-left:300px;
position:relative;
}

Upvotes: 0

Guffa
Guffa

Reputation: 700592

The extra space comes from all the elements that you have moved using relative positioning.

That way of moving elements only changes where they are displayed, they still take up space in their original position.

Use absolute positioning or negative margins to make elements overlap without accumulating space at the bottom of the page.

You can use float:left to make elements line up beside each other.

Upvotes: 1

dzumla011
dzumla011

Reputation: 612

There is a quick way, but it's best to use a CSS inspecting tool such as firebug for Firefox browser, to find out exactly what's happening.

Then it's just a matter of deleting or modifying that particular CSS rule (firebug will show you which css file and line to change).

Upvotes: 1

HasanAboShally
HasanAboShally

Reputation: 18695

Give padding-bottom:200px for the body or html.

or

Give margin-bottom:200px for the body or html.

Upvotes: 0

Related Questions