藝術框架內的文字

Question

我在這裏感到沮喪，試圖讓我的div正確排列！我試圖將我的文本放置在藝術框架的圖像中。的HTML是：

<div id="frame"> 
<div id="songtext"> 
<p>lorem ipsum dolor...</p> 
</div> 
</div> 

而CSS是：

#frame { 
background:url(images/gold-frame-trans-bg.png) no-repeat; 
margin-left:auto; 
margin-right:auto; 
margin-top:0px; 
width:650px; 
height:750px; 
} 

#songtext { 
width:336px; 
height:410px; 
margin-left:auto; 
margin-right:auto; 
margin-top:140px; 
overflow:auto; 
} 

當我這樣做時，圖像的頂部對齊與文本的頂部，在140px以下的頂部屏幕。但是，如果我更改了 #songtext {margin-top：140px;} 到 #songtext {padding-top：140px;） 文本顯示在正確的位置，但滾動條仍然從頁面頂部開始，中斷圖像。當我向上滾動時，文本在圖像上滾動，而不是隱藏在圖像下面。 （這是否有意義？） 這裏的頁面，如果你寧願看到它在視覺上： http://studentaccess.emporia.edu/~asmith40/AVAwebsite/seemsimpossible.html

Answer 1

你可以這樣說：

#songtext { 
height: 410px; 
margin-left: 160px(or similar); 
margin-right: auto; 
margin-top: 140px; 
overflow: auto; 
position: absolute; 
width: 336px; 

}