はboraderスペースを与え、私は上記のページのように見えるべきであるWebページをデザインする必要があり

Question

それに単語を印刷傾けます。

私は自動ビューアを終了しましたが、スライドショーの上に単語を印刷できないことがわかりました（1/6 & autoviewer）。どうすれば印刷できますか？

また、私はコードを試してみて、それがまだ出て単語を印刷することはできません、ここにコード

<style type="text/css"> 

#myslideshow{ 
border-spacing:10px 10px; 
border-left:7px solid black; 
border-right:4px solid black; 
position:relative 

} 
#myslideshow>div.overlay-one{ 
position: absolute; 
    top: 5px; 
right:10px; 
color:#fff; 
font-size:18px; 
font-family:sans-serif; 
} 
#myslideshow>div.overlay-two{ 
position: absolute; 
bottom: 5px; 
right:10px; 
color:#fff; 
font-size:20px; 
font-family:sans-serif; 
font-weight:bold; 
background:rgba(56,56,56,0.5); 
padding:3px 6px; 
border-radius:3px; 
} 
</style> 



<div style="float:right;width:500px;> 
<div "id="myslideshow"> 
<div class="overlay-one">1/6</div> 
<div class="overlay-two">AUTOVIEWER</div> 
</div> 
</div> 

は、それが唯一の左の境界スペースと写真の上に適用される - それは意味ボーダーと右下の写真の間に空白がありません これを修正するには？

Answer 1

uがそれはそれはすべてのポジションについてです

#slideshow{ 
 
    background: #fff url("https://i.ytimg.com/vi/sTX8qbOtPN8/hqdefault.jpg"); 
 
    width: 480px; 
 
    height: 360px; 
 
    position:relative; 
 
} 
 
#slideshow>div.overlay-one{ 
 
    position: absolute; 
 
    top: 5px; 
 
    right:10px; 
 
    color:#fff; 
 
    font-size:18px; 
 
    font-family:sans-serif; 
 
} 
 
#slideshow>div.overlay-two{ 
 
    position: absolute; 
 
    bottom: 5px; 
 
    right:10px; 
 
    color:#fff; 
 
    font-size:20px; 
 
    font-family:sans-serif; 
 
    font-weight:bold; 
 
    background:rgba(56,56,56,0.5); 
 
    padding:3px 6px; 
 
    border-radius:3px; 
 
}

<div id="slideshow"> 
 
<div class="overlay-one"> 
 
1/6 
 
</div> 
 
<div class="overlay-two"> 
 
AUTOVIEWER 
 
</div> 
 
</div>

であるので、ここでHTML を言及していない：絶対と相対し、子供と親を追加し、あなたが行われています。