關於縮略圖的簡單HTML/CSS

我是網絡建設新手。目前正在製作圖庫的教程。 http://www.webreference.com/programming/css_gallery/index.html 關於縮略圖的簡單HTML/CSS

除縮略圖部分之外，它都可以正常工作（足以讓我根據自己的喜好來修復）。以下是我認爲與我尋求的幫助相關的縮略圖的html和css代碼片段。基本上，當您將鼠標懸停在縮略圖上時，主圖像將出現在上方頁面的可用空間中。這種作品（圖像沒有出現在正確的位置，但我可以修復沒有probs），但縮略圖不顯示我的圖像。

我改變了集裝箱股利「畫廊」，因爲我已經在我的HTML容器中，並且不希望它由以下教程新的CSS的影響...

HTML：

<li> 
     <a class="gallery slidea" href="#nogo"> 
     <span> 
      <img src="images/Picture 014.jpg" alt="Wedding" title="Wedding" /> 
      <br /> 
      Wedding 
     <br /> 
     Outside area wedding 
     </span> 
     </a> 
    </li>

CSS：

#gallery a.slidea { 
background:url(images/Picture 014 thumb.jpg); 
height:38px; 
width:50px; 
}

也爲我的CSS，W3C驗證說「#gallery a.slidea」值錯誤：背景分析錯誤thumb.jpg），我不明白。

很想一些幫助：d

乾杯

PS我看把這個網站到WordPress的（那是一個教程，我會用更多的成功，我希望以後跟隨）

來源

2013-03-29 Brett Glogoski

你的錯誤是在這裏：

background:url(images/Picture 014 thumb.jpg);

這個空間是把它扔了。把URL放在引號中：

background:url('images/Picture 014 thumb.jpg');

另一個問題是在你的HTML中。

你的CSS說#gallery a.slidea

這將指向所有類「slidea」是與「畫廊」的ID元素的鏈接。您的HTML表示該鏈接屬於「畫廊」和「幻燈片」類。正確的做法取決於你的目標。

來源

2013-03-29 02:22:39 sosborn

嗨，感謝您的照片幫助，我會盡力的！（說我試圖重命名圖像，並且代碼沒有空間，例如pucture14thumb），但仍然沒有工作。但是，我會嘗試引用。我有很多的拇指，而CSS就像下面，直到slidej #gallery a.slidea { background：url（images/Picture 014 thumb.jpg）; height：38px; width：50px; } #gallery a.slideb { background：url（images/Picture 014 thumb.jpg）; height：38px; width：50px; } 我該如何輸入密碼？正常嗎？ –

引號有助於圖像顯示，但尺寸錯誤。它就像它自動enlargerd –

好吧，我明白你的意思，我想。你提到的元素是我的圖像所在的div，對吧？我的代碼就像它在盡頭，除了我稱之爲「我的圖庫」的元素之外，它在教程中被稱爲容器。本教程中的鏈接html完全相同，除了在容器div中。我的div id是圖庫。這會是一個潛在的問題嗎？ –

對類犯規呼叫匹配類

呼籲

名

#gallery a.slidea {

試着讓它們名稱相同，例如

<a class="gallery_slide" href="#nogo"> 

#gallery_slide a {

來源

2013-03-29 02:13:30 acutesoftware

感謝您的迴應。 class =「gallery slidea」確實匹配，不是嗎？ CSS是調用畫廊幻燈片（幻燈片..我有12個拇指，幻燈片幻燈片幻燈片等等等）您對CSS的改變將影響它是一個鏈接的事實，不是嗎？這不就是#gallery的一種。位是指？我有更多的這兩個代碼片段中的每一行代碼，每個代碼將幻燈片更改爲slideb到slidec等到j。 –

關於縮略圖的簡單HTML/CSS

回答

相關問題