2012-03-09 86 views
-1

這是我的code.my圖像尺寸是1024X768,但我得到一個左右滾動條。當我滾動到右側,我從我的總圖像中得到一個黑色的背景截斷。 幫我出plzzhtml/css網站頁面背景

body { 
 
    background-image: url('stareffect1.jpg'); 
 
} 
 
h1 { 
 
    position: relative; 
 
    left: 480px; 
 
} 
 
form #Edit1 { 
 
    position: relative; 
 
    top: 58px; 
 
    left: 341px; 
 
} 
 
form #Edit2 { 
 
    position: relative; 
 
    top: 67px; 
 
    left: 341px; 
 
}
<html> 
 

 
<body> 
 
    <img src="banner.jpg" width="500" height="70" /> 
 
    </head> 
 

 
    </head> 
 

 

 
    <hr/> 
 
    <br/> 
 
    <a href="forum.php"> 
 
    <div style="position:absolute; left:347px; top:165px;"> 
 
     <img src="images/forum.jpg" /> 
 
    </div> 
 
    </a> 
 
    <a href="credits.php"> 
 
    <div style="position:absolute; left:481px; top:165px;"> 
 
     <img src="images/credits.jpg" /> 
 
    </div> 
 
    </a> 
 
    <a href="rules.php"> 
 
    <div style="position:absolute; left:615px; top:165px;"> 
 
     <img src="images/rules.jpg" /> 
 
    </div> 
 
    </a> 
 
    <a href="logout.php"> 
 
    <div style="position:absolute; left:740px; top:165px;"> 
 
     <img src="images/logout.jpg" /> 
 
    </div> 
 
    </a> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <div style="position:relative; left:339px; top:49px"> 
 
    <img src="images/actor.jpg" width="250" height="300" /> 
 
    </div> 
 
    <div style="position:absolute; left:600px; top:225px"> 
 
    <img src="images/river.jpg" width="250" height="300" /> 
 
    </div> 
 

 

 

 
</body> 
 

 
</html>

+0

plzz幫我out.i是NT能夠idenitfy問題。放置圖片有沒有問題????????? – hello 2012-03-09 16:48:40

+0

你的html完全損壞。不要在車身標籤內使用頭標籤。在身體標記之前使用它。你有兩個關閉標籤,並沒有開放。你應該改正這個主要的html問題並再次測試。 – Chris 2012-03-09 16:49:37

+0

<風格類型= 「文本/ CSS」> 體{背景圖像:網址( 'stareffect.jpg');} – hello 2012-03-09 17:20:08

回答

0

克里斯是正確的你的HTML的格式不正確。嘗試嵌套的標籤,如下面

<html> 
<head> 

<style type="text/css"> 

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

h1 
{ 
    position: relative; 
    left: 480px;  
} 

form #Edit1 
{ 
    position:relative; 
    top:58px; 
    left: 341px; 
} 

form #Edit2 
{ 
    position:relative; 
    top:67px; 
    left:41px; 
} 


</style> 

</head> 

<body> 

<img src="banner.jpg" width="500" height="70" /> 

<style type="text/css"> 
body {background-image:url('stareffect1.jpg');} 
</style> 
</head> 

<style type="text/css"> 
h1 
{ 
     position: relative; 
     left: 480px;  
     } 
form #Edit1 { position: relative; 
       top: 58px; 
       left: 341px; 
       } 
form #Edit2 { position: relative; 
       top: 67px; 
       left: 341px; 
       } 

</style> 

<hr/> 
<br/> 

<a href="forum.php"><div style="position:absolute; left:347px; top:165px;"><img src="images/forum.jpg"/></div></a> 
<a href="credits.php"><div style="position:absolute; left:481px; top:165px;"><img src="images/credits.jpg"/></div></a> 

<a href="rules.php"><div style="position:absolute; left:615px; top:165px;"><img src="images/rules.jpg"/></div></a> 
<a href="logout.php"><div style="position:absolute; left:740px; top:165px;"><img src="images/logout.jpg"/></div></a> 

<br/> 
<br/> 
<br/> 
<div style="position:relative; left:339px; top:49px"></div> 

<div style="position:absolute; left:600px; top:225px"> 
<img src="images/river.jpg" width="250" height="300" /> 
</div> 

</body> 
</html> 

GB

+0

<風格類型= 「文/ CSS」> 體 { background-image:url('stareffect.jpg'); } \t H1 { \t \t位置:絕對; \t \t left:480px; \t \t \t} \t form#Edit1 {position:relative; top:58px; left:341px; } form#Edit2 {position:relative; top:67px; left:341px; } – hello 2012-03-09 17:33:23

+0

@GB我根據烏拉圭回合suggestiom。但仍然有滾動條.plzz建議一些編輯我的代碼 – hello 2012-03-09 17:34:31