CSS图像每次都在文本下

Question

我想问如何让文本下的图像在相同的位置，即使窗口被缩小/放大。我在导航中完成了这个工作：www.luxweb.sk与表..但它是低劣的和验证器显示我一个错误。我想知道如何更好地做到这一点，因为我可以在我的屏幕分辨率上解决这个问题，但是如果有人与我们的网站访问了我的网站，他会让它搞砸。我正在研究这个问题：hetike我想要在社交图片下标识。它适用于Mozilla罚款，但铬..请检查代码的答复..谢谢！

HTML

<header> 
     <nav id="nav1"> 
     <ul> 
      <li><a href="index.html">Home</a></li> 
      <li><a href="index.html">References</a></li> 
      <li><a href="index.html">Price List</a></li> 
     </ul> 
     </nav> 
     <span>&lt;&gt;</span> 
     <h1>Aways</h1> 
<!-- navigacia2 -->  
     <nav id="nav2"> 
     <ul> 
      <li><a href="#home">Home</a></li> 
      <li><a href="#references">References</a></li> 
      <li><a href="#price">Price List</a></li> 
     </ul> 
     </nav> 
<!-- socialne siete -->  
     <div id="socialne"> 
      <a href="http://twitter.com"><img src="images/tw.png" id="tw" alt="twitter"></a> 
      <a href="http://facebook.com"><img src="images/fb.png" id="fb" alt="facebook"></a> 
      <a href="http://google.com"><img src="images/g+.png" id="g" alt="facebook"></a> 
      <script src="social.js"></script> 
     </div>  
    </header> 

CSS

h1{ 
    font:50px amplify; 
    color:white; 
    margin-left:30px; 
    display:inline-block; 
    margin-top:-10px; 
    text-shadow: 2px 2px #657e94; 
} 
span{ 
    position:absolute; 
    font:50px amplify; 
    color:white; 
    margin-top:-35px; 
    margin-left:75px; 
    text-shadow: 2px 2px #657e94; 
} 
#nav1{ 
    float:left; 
    margin-left:205px; 
    margin-top:20px; 
    display:inline-block; 
} 
#nav2{ 
    margin-top:20px; 
    margin-left:15px; 
    display:inline-block; 
} 
li{ 
    display:inline-block; 
    margin-left:10px; 
} 
li a{ 
    font:12px Calibri; 
    color:white; 
    text-decoration:none; 
    text-shadow: 2px 2px #466584; 
    display:inline-block; 
} 
li a:hover{ 
    border-bottom:3px solid white; 
    padding-bottom:3px; 
} 
#socialne img{ 
    display:inline-block; 
    margin-left:15px; 
    opacity:0.2; 
} 
#socialne{ 
    width:400px; 
    margin-left:382px; 
    margin-top:10px; 
} 

Answer 1

UI元素应该是CSS背景，而不是内嵌图片。内联图像用于内容。

例如：

<a href="http://twitter.com"><img src="images/tw.png" id="tw" alt="twitter"></a> 

应该是：

<a href="http://twitter.com" title="Twitter" class="twitter"></a> 

CSS：

.twitter { 
    display:block; 
    background-image:url(images/tw.png); 
    background-repeat:no-repeat; 
    width:80px; 
    height:40px; 
} 

您需要根据您的影像尺寸设定的尺寸。此外，最好将所有间距，填充/边距和字体样式放在A标签上，而不是包装列表元素。