html - #test div は一部の画像に表示され、他の画像には表示されない

Question

このページのテキストには、CSS を使用して再配置できる test の div があります。

http://www.theshowroomonline.co.uk/clothing

                        <div id="test"><a href="http://www.theshowroomonline.co.uk/product/1980s-stanley-platos-dress">1980&#8242;s Stanley Platos Dress</a></div>          
        <div class="wrapper-price">
                        <div class="entry-price">
            &pound;106.00               </div><!-- entry-price -->

                        <div class="entry-post-thumbnail">
                <a class="tcp_size-medium" href="http://www.theshowroomonline.co.uk/product/1980s-stanley-platos-dress"><img width="200" height="300" src="http://www.theshowroomonline.co.uk/wp-content/uploads/2012/10/stanley-platos-dress-front-200x300.jpg" class="attachment-medium wp-post-image" alt="stanley-platos-dress-front" title="stanley-platos-dress-front" /></a>
            </div><!-- .entry-post-thumbnail -->
                    </div><!-- .wrapper-price -->

   #tcp_shortcode_all_clothing #test {
        position: relative;
        top: 298px;
    }

しかし、div が他のページに表示されていないように見えるため、テキストの位置を変更できません。

http://www.theshowroomonline.co.uk/outerwear

Answer 1

提供したページ (http://www.theshowroomonline.co.uk/outerwear) でソースを表示すると、要素が実際には id="test" の要素にラップされていないことがわかります。これが問題です。これらのページに 2 つの異なるテンプレートを使用しています。

ここの問題ページからのサンプル:

<tr class="tcp_first-row">
    <td id="td-post-480" class="tcp_col tcp_4_cols tcp_col_1">
            <div id="post-480" class="post-480 tcp_product type-tcp_product status-publish hentry">
<a href="http://www.theshowroomonline.co.uk/product/vintage-gianfranco-ferre-coat">Vintage Gianfranco Ferre Coat</a>            
            <div class="wrapper-price">
                            <div class="entry-price">
                &pound;180.00               </div><!-- entry-price -->

                            <div class="entry-post-thumbnail">
                    <a class="tcp_size-medium" href="http://www.theshowroomonline.co.uk/product/vintage-gianfranco-ferre-coat"><img width="200" height="300" src="http://www.theshowroomonline.co.uk/wp-content/uploads/2012/10/gianfranco-coat-front-200x300.jpg" class="attachment-medium wp-post-image" alt="gianfranco-coat-front" title="gianfranco-coat-front" /></a>
                </div><!-- .entry-post-thumbnail -->
                        </div><!-- .wrapper-price -->

対作業ページ:

<tr class="tcp_first-row">
    <td id="td-post-491" class="tcp_col tcp_4_cols tcp_col_1">
            <div id="post-491" class="post-491 tcp_product type-tcp_product status-publish hentry">


                            <div id="test"><a href="http://www.theshowroomonline.co.uk/product/1980s-stanley-platos-dress">1980&#8242;s Stanley Platos Dress</a></div>          
            <div class="wrapper-price">
                            <div class="entry-price">
                &pound;106.00               </div><!-- entry-price -->

                            <div class="entry-post-thumbnail">
                    <a class="tcp_size-medium" href="http://www.theshowroomonline.co.uk/product/1980s-stanley-platos-dress"><img width="200" height="300" src="http://www.theshowroomonline.co.uk/wp-content/uploads/2012/10/stanley-platos-dress-front-200x300.jpg" class="attachment-medium wp-post-image" alt="stanley-platos-dress-front" title="stanley-platos-dress-front" /></a>
                </div><!-- .entry-post-thumbnail -->
                        </div><!-- .wrapper-price -->

id="test"上記のように、 class="test"ID はページに固有である必要があるため、これを実際に切り替える必要があります。