Bir bağlantı veya paragraftan veya başlıktan veya alt etiketinden belirli bir metnin ayıklanması ve aynı sayfada ancak farklı bir konumda tekrar gösterilmesi

Question

Java Bean metnini başka bir kısımda (resmin altında) çoğaltmaya/göstermeye çalışıyorum Aynı sayfa (bunun nasıl çalıştığını görmek için http://www.miracleflooring.ca/cork.html adresini ziyaret edin). Şu anda küçük resim üzerinde gezindiğinizde bilgi başlığı & fiyat gösterimi var, dışarı fare, bilgi gizler.

İstemcim her bir resmin altına (her öğe sınıf öğeli) & fiyatını göstermemi istedi ve bunu, her öğe için el ile yeniden yapmak zorunda kalmadan yapmak için bir yol bulmak istiyorum. Bunu yapmak için css/javascript/php kullanmanın bir yolu var mı (Umarım yapmam gerekeni anlarım).

<div class="item"> 
    <a href="#"><img src="imgs/products/cork/java-bean.jpg" alt="Java Bean" width="132" height="132" /></a> 
    <div class="caption"> 
      <a href="imgs/products/cork/java-bean.jpg" rel="prettyPhoto[cork]" title="Java Bean">Java Bean</a> 
      <p class="price">$4.99 sq-ft</p> 
    </div> 
</div> 

kod bazı overkill gibi görünüyor biliyorum ama öyle yapıldığını ve bunu değiştirmek için çok sayıda iş alacaktır.

Bunu nasıl yapacağım konusunda hiçbir fikrim yok ve hala bunu yapmanın en iyi yolunun ne olduğundan emin değilim ama herhangi bir yardım çok takdir ediliyor!

DÜZENLEME: Bunu (da bunu nasıl uygulanacağı) extract text from tag

Answer 1

CSS'nizde bu deneyin ihtiyacım buysa karim79 yardım ancak emin olmayabilir şey yanıtlayan gördü:

.item {position: relative; margin-bottom: 30px;} 
.item .caption {position: absolute; bottom: -20px;} 

O Kendinizi daha fazla düzeltmek için yeterince yakın olmalıdır. "Kenar boşluğu", her bir öğenin altında bulunan alanı genişletir ve daha büyük bir negatif "alt" altyazı metnini aşağı doğru hareket ettirir.