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标记上，而不是包装列表元素。

CSS图像每次都在文本下

1 个答案: