0

私は現在のコードを持っており、画像が変わると変化するスライドショーの横にタブを配置しようとしています。そのため、現在の画像はアクティブなタブで表示され、他のタブは別の色で表示されます。添付のコードはこれまでに思いついたものですが、次に何が来るのか理解できないようです。また、テキストを垂直にしようとしました。タブ 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;
}
4

1 に答える 1