Sean Kelly Sean Kelly - 1 year ago 93
CSS Question

Image Not in Right Place Simple HTML CSS

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:

enter image description here

but, instead, with my current css, it appears like this:
enter image description here
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>




Answer Source

It seems it's sufficient if you remove the class if_facebook_834722 from the a link which wraps the facebook image, and change position:relative to postion: absolute in the CSS rule for the image (.if_facebook_834722) - see snippet below.

@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;
}
<!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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download