0

私はどこでもこれに対する解決策を見つけるのに苦労しています。Safari で完全に動作するスライダーを作成しましたが、Firefox で表示すると、スライダー イメージ 1 とスライダー イメージ 2 の間にマージンがなく、2 と 3 などがあります。スライダー ウィンドウにまったく収まらない一連の画像を作成します (フロア間のランダムなポイントでリフトが開くのとほとんど同じです)。

私が抱えている2番目の問題は、.content h2タイトルがリンクであるだけでなく、リンクとしてスライダー画像を作成することです。

スライダーは、Wordpress Epione テーマにあります。

どんな助けでも大歓迎です

これは私のCSSです-

/*SLIDER*/

#sliderwrap{float:left; width:auto; height:auto; background:none; margin-left:0px;        margin-top:px; position:; z-index:3;}

.slidercontent{ margin-top:20px;width:auto; height:auto;}

#slider{ margin-left:0px; margin-top:0px; width:auto; height:auto;}



.content{ width:auto; margin-right:auto;}

.content p{ font-style:none; font-size:14px;}

.content h2{ position: relative; left: -650px; top:490px; font-family: 'helvetica;      colour:#00000; font-size:10px; margin-bottom:15px; margin-top:20px;display:}

.content h2 a{ color:#00000; display:block; margin-left: 700px; text-decoration:none; text-shadow:none; text-transform:uppercase;}



#slider img{width:auto; height:auto; ; margin-left:0px; margin-top:22px; min-height:225px; }

.sframe{ background:url(images/sliderimg.png) no-repeat; float:center; ; height:auto; float:center; position:; z-index:0; margin-top:12px; margin-left:60px;}


.sl_control{ float:left; width:100px; height:5px; background:none; margin-top:-10px; margin-right:12px; position:relative;}



/* Easy Slider */

#slider ul, #slider li{margin:0;padding:0;list-style:none;}

#slider li, #slider2 li{ width:1000px;height:1100px} 



#nextBtn{display:block; width:13px; height:14px; position:relative; left0px; top:0px; z- index:1000; right:120px; top:-718px; float:left; left:775px; margin-right:20px; }

#prevBtn{display:block; width:13px; height:14px; position:relative; left:300px; top:0px; z-index:1000; right:120px; top:-718px; float:left; left:-0px; margin-right:20px; }  


#prevBtn{ left:-20px;}              
#nextBtn a, #prevBtn a{  display:block;position:relative;width:13px;height:14px;
background:url(images/sl_left.png) no-repeat 0 0;} 

#nextBtn a{ background:url(images/sl_right.png) no-repeat 0 0;}

.graphic, #prevBtn, #nextBtn{padding:0; display:block; overflow:hidden; text-indent:-8000px;}


/* Easy Slider END */

/*SLIDER END*/

および.phpが表示されるフロントページ

<?php get_header(); ?>



<!--SLIDER-->

<div id="sliderwrap">
    query('category_name='.$slidecat.'&showposts='.$slidenum.''); while ($sliders->have_posts()) : $sliders->the_post(); ?>
  • ">

</div>

<div class="sl_control"></div>

<!--SLIDER END-->



<!--CONTENT-->

















</div>

</div>

<!--CONTENT END-->





<!--SIDEBAR-->



<?php get_sidebar(); ?>



<!--SIDEBAR END-->



</div>

<!--Footer-->

<?php get_footer(); ?>
4

1 に答える 1

0

初めに:

あなたの CSS は検証されません。Firefox で CSS の解析に問題があると思います。そのスニペットをコピーしてhttp://jigsaw.w3.org/css-validator/に貼り付けて、私の意味を確認してください。以下は、いくつかの (多少) 修正された CSS です。

/* SLIDER */


#sliderwrap {float: left; width: auto; height: auto; background: none; margin-left: 0px; z-index: 3;}

.slidercontent {margin-top:20px; width:auto; height:auto;}

#slider {margin-left: 0px; margin-top: 0px; width: auto; height: auto;}

.content{ width:auto; margin-right:auto;}

.content p{ font-style:none; font-size:14px;}

.content h2{ position: relative; left: -650px; top:490px; font-family: sans-serif;      colour: #000000; font-size:10px; margin-bottom:15px; margin-top:20px;}

.content h2 a{ color:#000000; display:block; margin-left: 700px; text-decoration:none; text-shadow:none; text-transform:uppercase;}

#slider img{width:auto; height:auto; margin-left:0px; margin-top:22px; min-height:225px; }

.sframe{ background:url(images/sliderimg.png) no-repeat; height:auto; float:center; z-index:0; margin-top:12px; margin-left:60px;}

.sl_control{ float:left; width:100px; height:5px; background:none; margin-top:-10px; margin-right:12px; position:relative;}


/* Easy Slider */

#slider ul, #slider li{margin:0;padding:0;list-style:none;}

#slider li, #slider2 li{ width:1000px;height:1100px;} 



#nextBtn{display:block; width:13px; height:14px; position:relative; left:0px; top:0px; z- index:1000; right:120px; top:-718px; float:left; left:775px; margin-right:20px; }

#prevBtn{display:block; width:13px; height:14px; position:relative; left:300px; top:0px; z-index:1000; right:120px; top:-718px; float:left; left:-0px; margin-right:20px; }  

#prevBtn{ left:-20px;}              
#nextBtn a, #prevBtn a{  display:block;position:relative;width:13px;height:14px;
background:url(images/sl_left.png) no-repeat 0 0;} 

#nextBtn a{ background:url(images/sl_right.png) no-repeat 0 0;}

.graphic, #prevBtn, #nextBtn{padding:0; display:block; overflow:hidden; text-indent:-8000px;}


/* Easy Slider END */

/*SLIDER END*/

これはまだいくつかの理由で解析されないことに注意してください。まず第一に、float は「左」または「右」のいずれかです。あなたはそれを「中心」にすることはできません。float でこれを行うには、「margin-left: 50%;」のようなことを行う必要があります。第 2 に、フォントは常に何らかの方法でスタイル設定されます。font-style を「none」と宣言することはできません。あなたがどのように対処したいのかわからないので、私はそれらを上記に残しました。

とにかく、PHP のブラウザーに基づいてさまざまなスタイルシートに分岐できます。参照: http://php.about.com/od/learnphp/p/http_user_agent.htm

お役に立てれば!

- 。

于 2010-11-24T01:02:51.933 に答える