0

私は大学のプロジェクト用に初めて Web ページを作成しました。レンダリングすると、ページの下部に巨大なスペースが表示されます。他の場所を読んで、これは私がすべてのページで使用してきた巨大なパディングが原因であると判断しました。要素ですが、このスペースを削除するための簡単な修正はありますか? または、それを書き直してすべてを同じ場所に置く方法さえあります、ありがとう!

コードは次のとおりです。

        <!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>
4

4 に答える 4

1

手っ取り早い方法がありますが、Firefox ブラウザーの firebug などの CSS 検査ツールを使用して、何が起こっているのかを正確に調べることをお勧めします。

次に、その特定の CSS ルールを削除または変更するだけです (firebug は、変更する CSS ファイルと行を表示します)。

于 2013-04-29T09:11:09.747 に答える
1

余分なスペースは、相対位置を使用して移動したすべての要素から生じます。

要素を移動する方法は、表示される場所を変更するだけで、元の位置でスペースを占有します。

ページの下部にスペースを蓄積することなく、要素をオーバーラップさせるには、絶対配置または負のマージンを使用します。

を使用float:leftして、要素を並べて並べることができます。

于 2013-04-29T09:11:28.187 に答える
0

bodypadding-bottom:200pxまたは html に指定します。

また

bodymargin-bottom:200pxまたは html に指定します。

于 2013-04-29T09:10:16.313 に答える
0

css を変更:

p.info
{
padding-left:300px;
position:relative;
}
于 2013-04-29T09:14:15.247 に答える