Question

我正在尝试将facebook图像添加到我的标题中，但有些东西正在将facebook图像推到屏幕的最右侧。应该看起来像这样：

但是，相反，使用我当前的CSS，它看起来像这样：有什么想法吗？我还在学习正确的技巧。我从我的Photoshop设计中复制了很多CSS。

<div class="navbar-icon menu-toggle show-for-small hide-for-large small-2 medium-2 text-right">
  <p>Insert code to display Hamburger Icon that opens Mobile Menu here</p>
</div>

@charset "utf-8";

/* CSS Document */

.aseimg {
  background-image: url("ASE_large.png");
  position: absolute;
  left: 721px;
  top: 77px;
  width: 173px;
  height: 65px;
  z-index: 61;
}

.NADAlogo {
  background-image: url("NADAlogo.png");
  position: absolute;
  left: 916px;
  top: 77px;
  width: 245px;
  height: 65px;
  z-index: 62;
}

._5_Stars {
  background-image: url("5 Stars.png");
  position: absolute;
  left: 1453px;
  top: 97px;
  width: 139px;
  height: 26px;
  z-index: 59;
}

.if_facebook_834722 {
  background-image: url("if_facebook_834722.png");
  position: relative;
  left: 1183px;
  top: 88px;
  width: 45px;
  height: 44px;
  z-index: 65;
}

nav {
  width: 100%;
  background: #193441;
  border: 1px solid #465d65;
  border-right: none;
  position: absolute;
  left: -4px;
  top: 146px;
  z-index: 66;
}

nav ul {
  overflow: hidden;
  margin: 0;
  padding: 0;
}

nav ul li {
  list-style: none;
  float: left;
  text-align: center;
  border-left: 1px solid #465d65;
  border-right: 1px solid #ccc;
  width: 25%;
  /* fallback for non-calc() browsers */
  width: calc(100% / 4);
  box-sizing: border-box;
}

nav ul li a:hover {
  background: -webkit-linear-gradient(rgba(25, 25, 25, 1), rgba(126, 158, 173, 0.5), rgba(255, 255, 255, 0.5));
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(rgba(25, 25, 25, 1), rgba(126, 158, 173, 0.5), rgba(255, 255, 255, 0.5));
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(rgba(25, 25, 25, 1), rgba(126, 158, 173, 0.5), rgba(255, 255, 255, 0.5));
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(rgba(25, 25, 25, 1), rgba(126, 158, 173, 0.5), rgba(255, 255, 255, 0.5));
  /* Standard syntax (must be last)*/
}

nav ul li a:active {
  background: -webkit-linear-gradient(top, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(top, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(top, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
  /* Standard syntax (must be last) */
}

nav ul li:first-child {
  border-left: none;
}

nav ul li a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  font-family: "Helvetica Neue", Helvetica, Arial, "sans-serif";
  padding: 10px 0;
}

Answer 1

定位css已应用于您的<a>标记及其包含的<img>，因为它们都具有相同的类。使用<a>和top属性定位left，但<img>在此范围内相等的金额相等。

您可能希望使用不同的类，以便分别处理其职位。

Html不是我的主要区域，但我认为通常以这种方式使用绝对定位被认为是一个坏主意...例如，如果您的任何图像改变大小，它将需要重写，并赢得＆＃ 39; t很好地扩展到移动尺寸。但是现在，希望这可以作为一个快速解决方案。

Answer 2

如果你从包裹facebook图片的if_facebook_834722链接删除类a，并将position:relative更改为<{1}}，这似乎已经足够了图片的CSS规则中的postion: absolute（.if_facebook_834722） - 请参阅下面的代码段。

＆＃13;

@charset "utf-8";

/* CSS Document */

.aseimg {
  background-image: url("ASE_large.png");
  position: absolute;
  left: 721px;
  top: 77px;
  width: 173px;
  height: 65px;
  z-index: 61;
}

.NADAlogo {
  background-image: url("NADAlogo.png");
  position: absolute;
  left: 916px;
  top: 77px;
  width: 245px;
  height: 65px;
  z-index: 62;
}

._5_Stars {
  background-image: url("5 Stars.png");
  position: absolute;
  left: 1453px;
  top: 97px;
  width: 139px;
  height: 26px;
  z-index: 59;
}

.if_facebook_834722 {
  background-image: url("if_facebook_834722.png");
  position: absolute;
  left: 1183px;
  top: 88px;
  width: 45px;
  height: 44px;
  z-index: 65;
}

nav {
  width: 100%;
  background: #193441;
  border: 1px solid #465d65;
  border-right: none;
  position: absolute;
  left: -4px;
  top: 146px;
  z-index: 66;
}

nav ul {
  overflow: hidden;
  margin: 0;
  padding: 0;
}

nav ul li {
  list-style: none;
  float: left;
  text-align: center;
  border-left: 1px solid #465d65;
  border-right: 1px solid #ccc;
  width: 25%;
  /* fallback for non-calc() browsers */
  width: calc(100% / 4);
  box-sizing: border-box;
}

nav ul li a:hover {
  background: -webkit-linear-gradient(rgba(25, 25, 25, 1), rgba(126, 158, 173, 0.5), rgba(255, 255, 255, 0.5));
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(rgba(25, 25, 25, 1), rgba(126, 158, 173, 0.5), rgba(255, 255, 255, 0.5));
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(rgba(25, 25, 25, 1), rgba(126, 158, 173, 0.5), rgba(255, 255, 255, 0.5));
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(rgba(25, 25, 25, 1), rgba(126, 158, 173, 0.5), rgba(255, 255, 255, 0.5));
  /* Standard syntax (must be last)*/
}

nav ul li a:active {
  background: -webkit-linear-gradient(top, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(top, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(top, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
  /* Standard syntax (must be last) */
}

nav ul li:first-child {
  border-left: none;
}

nav ul li a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  font-family: "Helvetica Neue", Helvetica, Arial, "sans-serif";
  padding: 10px 0;
}

＆＃13;

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HighTech Auto Sales</title>
  <link href="mainCSS.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div class="header">
    <a itemprop="url" class="aselink" href="http://www.ase.com/Landing-Pages/Car-Owners/Find-a-Repair-Shop/Shop-Locator.aspx?Address=19111&d=75&sc=us">
      <img class="aseimg" src="../Index%20Images/ASE_large.png"></a>
    <a itemprop="url" class="NADAlogolink" href="http://www.niada.com/member_directory.php?te_mode=map_view">
      <img class="NADAlogo" src="../Index%20Images/NADAlogo.png"></a>
    <a itemprop="url">
      <img class="if_facebook_834722" src="../Index%20Images/if_facebook_834722.png"></a>
    <img class="_5_Stars" src="../Index Images/5stars_small.png">

  </div>
  <nav>
    <ul>
      <li><a href="inventory.html">Our Inventory</a></li>
      <li><a href="services.html">Superior Services</a></li>
      <li><a href="blog.html">HighTech Blog</a></li>
      <li><a href="contact.html">Contact & Location</a></li>
    </ul>
  </nav>
</body>

</html>

＆＃13;

图像不在正确位置简单的HTML CSS

2 个答案: