0

http://keith-wood.name/imageCube.htmlで jquery プラグインを使用しています。

それはそのように動作しますが...

私のページがリストの最初の画像(AT_logo.png)をロードすると、正しい位置に表示されますが、.imagecubeが開始すると移動します。それが入れるcssに気づきました。絶対に配置されていますが、私の画像は私のクラスの左に浮かんでいます。

また、追加される「imagecubeshading」クラスは、画像の間ではなく最後にあるため、画像であるかのようにスクロールします。

私のコードは一番下にあります。さらに情報が必要な場合は、お尋ねください。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="Scripts/imagecube.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function () {
$('#logocube').imagecube();});
</script>

<div class="title_container">
    <div class="title_content1">
        <div class="title">title</div>
        <div class="sub_text">
            <a href="">Linked in</a>
            <b>Email</b>infp@email.com
        </div>
    </div>

    <div class="logo" id="logocube">
        <img src="images/AT_logo.png" title="logo"/>
        <img src="images/AT_logo_bl_gr.png" title="logo"/>
        <img src="images/AT_logo_bl_wh.png" title="logo"/>
        <img src="images/AT_logo_gr_wh.png" title="logo"/>
        <img src="images/AT_logo_wh_bl.png" title="logo"/>
        <img src="images/AT_logo_wh_gr.png" title="logo"/>
   </div>

    <div class="title_content2">
        <div class="title" style="float:right;;">title</div>
        <div class="sub_text" style="float:right;">sub text</div>
    </div>
</div>

そしてCSS

.title_container
{
width:1265px;
height:380px;
margin-left:auto;
margin-right:auto;
position:relative;
background-color:transparent;
}

.title_content1
{
 width: 505px;
 height: 330px;
float: left;
background-image: url(/images/title_content_left.png);
background-repeat: no-repeat;
margin: 10px;
margin-top: 20px;
z-index:1;
}

.logo
{
width: 214px;
height: 198px;
float: left; 
margin-top: 40px;
margin-left: 162px;
margin-bottom: 72px;
z-index: 2;
position: absolute;
}

#logocube
{
width:214px;
height:198px;
}   

.title_content2
{
width: 505px; 
height: 330px;
float: right; 
background-image: url(/images/title_content_right.png);
background-repeat: no-repeat;
margin: 10px;
margin-top: 20px;
z-index:1;
}
4

0 に答える 0