-4

jqueryアコーディオンを使用してリストを作成しましたが、問題は「h3とコンテンツの間の空白」です。私はh3でcssマージンを使用しましたが、効果がうまく機能しませんでした。解決策やリソースがあれば役に立ちます。

これは私のコードです：

cssファイル：

#accordion h3{

   background: url("<?php echo $baseUrl; ?>/images/cat-title-closed.png") no-repeat scroll center center transparent;
    color: #666666;
    font-family: DroidKufi-bold;
    font-size: 18px;
    height: 36px;
    text-shadow: 0 0 0 gray;
    width: 724px;
    padding-right: 9px;


    position : relative;
    top : -Npx;



   }

  #accordion h3.ui-state-active {
   background: url("<?php echo $baseUrl; ?>/images/cat-title-open.png") no-repeat scroll center center transparent;
    color: #CC0000;
    font-family: DroidKufi-bold;
    font-size: 18px;
    height: 36px;


    text-shadow: 0 0 0 gray;
    width: 724px;
}


   #accordion2 h3{

    background: url("<?php echo $baseUrl; ?>/images/course-title-closed.png") no-repeat scroll center center transparent;
    color: #666666;
    font-family: DroidKufi-regular;
    font-size: 14px;
    height: 28px;


    text-shadow: 0 0 0 gray;
    width: 706px;



   }

   #accordion2 h3.ui-state-active {
   background: url("<?php echo $baseUrl; ?>/images/course-title-open.png") no-repeat scroll center center transparent;
    color: #CC0000;
    font-family: DroidKufi-bold;
    font-size: 14px;
    height: 28px;

    text-shadow: 0 0 0 gray;
    width: 706px;
}

phpファイル：

.....
<script type="text/javascript">
    $(document).ready(function(){


        $("#accordion #accordion2").accordion({

             collapsible: true, active: true,
            autoHeight: false,

        });







   /////////// end 
    });

....

 <!--  Start print events realted to courent trainer  -->
<?php



echo "<div id='accordion'>
    <h3><span lang='ar-sy'>الجدول التدريبي</span></h3>

    <div >";



   foreach($events as $valuec){
      $course=$valuec->course->name_ar;
        $intro=strip_tags( substr($valuec->course->intro,0,235));
   $time=$valuec->course->t_time;
   $money=$valuec->course->price;
    echo "<div id='accordion2'>
                <h3><span class='title' lang='ar-sy'>$course</span></h3>


                <div>
                <p>
        <table border='0' width='100%' cellspacing='0' cellpadding='0' class='course_accordion'>
                        <tr>
                            <td class='course-img'>
                            <img border='0' src='../images/course-img.jpg' width='200' height='135'></td>
                            <td valign='top'>
                            <table border='0' width='100%' cellspacing='0' cellpadding='0'>
                                <tr>
                                    <td class='course-brief'>
                                    <p align='justify'>
                                     $intro ....
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                    <table border='0' width='100%' cellspacing='0' cellpadding='0'>
                                        <tr>
                                            <td class='course-price-time'>$time ساعة
                                            | $money دولار</td>
                                            <td>
                                            <div class='reg-now'>";
                                             echo CHtml::link('مزيد من المعلومات',array('site/coursedetalis','id'=>$valuec->course_id));


                                                 echo "</div>
                                            <div class='reg-now'>";

     echo CHtml::link('التسجيل',array('site/cregister','event_id'=>$valuec->event_id));                                          

                                            echo "
                                            </div>
                                            </td>
                                        </tr>
                                    </table>
                                    </td>
                                </tr>
                            </table>
                            </td>
                        </tr>
                            </table>
</p>
</div>
</div>
";
}

スクリーンショット： アコーディオン

4

1 に答える 1

2

jsfiddle がないと、何がスペースを引き起こしているのかを理解するのに少し多すぎます。それがなければ、Firebug や Chrome 内の開発者ツールなどを試してみることを強くお勧めします。ページをロードし、CSS/レイアウト タブ (Chrome では Metrics と呼ばれます) を使用し、問題のある要素の html をクリックします。Firebug は、選択したボックス全体のパディング、マージン、およびアウトラインの色分けに特に適しています。

それは、スペースが何であるか、そしておそらくそれを修正する方法を見つけるのに役立つはずです.

于 2013-03-16T10:34:52.947 に答える