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標籤上，而不是包裝列表元素。