关于缩略图的简单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

回答

相关问题