私は現在のコードを持っており、画像が変わると変化するスライドショーの横にタブを配置しようとしています。そのため、現在の画像はアクティブなタブで表示され、他のタブは別の色で表示されます。添付のコードはこれまでに思いついたものですが、次に何が来るのか理解できないようです。また、テキストを垂直にしようとしました。タブ div の高さパラメータを変更するのにも問題があります。html を変更しましたが、背が高くなりません。
私は学び始めたばかりです。誰かが私を助けてくれることを願っています。ありがとう。
ここに私のHTMLコードがあります:
<div id="content_transparent">
<div id="slideshow">
<div>
<div>
<div id="barChart_div" style="width: 60px; height: 50px;float:left;background-color: blue;"><p class="css-vertical-text">tab1</p></div>
<div id="stats_div" style="width: 60px; height: 50px; float:left;background-color: green; margin-top:50px;margin-left:-60px">tab2</div>
<div id="lineChart_div" style="clear:left; width: 60px; height: 50px;background-color: red;">tab3</div>
<div id="cdfChart_div" style="width: 60px; height: 50px;background-color: orange;">tab4</div>
</div>
<div class="fadein">
<div><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg"></div>
<div><img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg"></div>
<div><img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg"></div>
</div>
</div>
これが私のcssです:
p.css-vertical-text {
writing-mode:tb-rl;
-webkit-transform:rotate(90deg);
white-space:nowrap;
display:block;
bottom:0;
font-family:‘Trebuchet MS’, Helvetica, sans-serif;
font-size:24px;
font-weight:normal;
}
.fadein {
position:relative;
height:572px;
width:100%;
left:0;
}
.fadein img {
position:absolute;
top:0;
width:95%;
height:572px;
left:60px;
}
.fadein div {
position:absolute;
height:100%;
width:100%;
}
#content_transparent {
z-index:2;
color:#FFFFFF;
text-align:center;
background:rgba(0, 0, 0, 0.5);
border:3px solid black;
height:1600px;
width:80%;
margin-left:10%;
margin-right:10%;
margin-top:30px;
}
#slideshow{
width:100%;
height:575px;
background-color:black;
}