0
我正在嘗試將Facebook圖片添加到我的標題中，但某些內容正將Facebook圖片推到屏幕的最右側。它應該這個樣子：圖片不在正確的位置簡單的HTML CSS
但是，相反，我目前的CSS，它似乎是這樣的： 
任何想法，爲什麼？我仍然在學習適當的技巧。我從我的photoshop設計中複製了很多CSS。
@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;
}<!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" class="if_facebook_834722">
<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>
您好。您在代碼中包含了一個**相對路徑**。您能否在線上傳您的圖片，並更新您的代碼以將圖片鏈接到在線版本？我們無法看到您的本地圖片，鏈接到在線副本可以讓我們看到它。重要的是能夠看到有問題的圖像，以幫助解決這個問題:) –
你有沒有嘗試應用'位置：絕對'這個類'.if_facebook_834722'？它似乎是唯一的標誌規則與'位置：相對' –