Question posted in 
I am trying to add a facebook image to my header, but something is pushing the facebook image to the far right of the screen. It should look like this:
but, instead, with my current css, it appears like this:
Any ideas why? I’m still learning proper techniques. I’ve copied a lot of the CSS from my photoshop design.
@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>
2
Answers
The positioning css is getting applied both to your
<a>tag and the<img>it contains, since they both have the same class. The<a>is positioned using thetopandleftproperties, but then the<img>is offset by equal amounts within that.You will likely want to use different classes so you can handle their positions separately.
Html is not my main area, but I think in general it is considered a bad idea to use absolute positioning in this way… for example, it will require a rewrite if any of your images change size, and won’t scale to mobile sizes that well. But for now, hope this will work as a quick fix.
It seems it’s sufficient if you remove the class
if_facebook_834722from thealink which wraps the facebook image, and changeposition:relativetopostion: absolutein the CSS rule for the image (.if_facebook_834722) – see snippet below.