6 replies [Last post]
Turquoise
Turquoise's picture
Offline
newbie
Last seen: 8 years 29 weeks ago
Timezone: GMT-5
Joined: 2014-07-15
Posts: 4
Points: 5

I didn't think this would be so difficult, but I can't figure it out.

What is the best way to go about coding a horizontal sprite navigation that needs to be right-aligned inside the div so that it is positioned on the right-hand side of my header div? It's a sprite containing three social media sprites with hovers.

I've tried so many ways, but the right-alignment keeps throwing everything off.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 49 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Code?

Can you post a link to what you have? Otherwise, give us what you have for the html and css.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Turquoise
Turquoise's picture
Offline
newbie
Last seen: 8 years 29 weeks ago
Timezone: GMT-5
Joined: 2014-07-15
Posts: 4
Points: 5

CSS and HTML

CSS:

.header {
	width: 960px;
	height: 200px;
	margin: 0 auto;
}
 
.headerLeft {
	width: 470px;
	height: 200px;
	float: left;
	padding: 30px 0 10px 10px;
}
 
.headerRight {
	width: 470px;
	height: 200px;
	float: left;
}
 
#socialMedia {
	position: relative;
	width: 470px;
	height: 42px;
	background: url('img/global/social_media_sprite.png') 0 0 no-repeat;
}
 
#socialMedia li, #socialMedia a {
	height: 42px;
	display: block;
	float: left;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
 
#facebook a {
    left: 329px;
    width: 47px;
	position: absolute;
	background: url('img/global/social_media_sprite.png') 0 0 no-repeat;
}
 
#facebook a:hover {
	background-position: 0 bottom;
}
 
#twitter a {
    left: 376px;
    width: 47px;
	position: absolute;
	background: url('img/global/social_media_sprite.png') -47px 0 no-repeat;
}
 
#linkedin a {
    left: 423px;
    width: 47px;
	position: absolute;
	background: url('../img/global/social_media_sprite.png') -94px 0 no-repeat;
}

HTML:

<div class="header">
<div class="headerLeft"><a href="http://www.progresslakeshore.org" target="_self"><img src="../img/global/logo.png" width="232px" height="90px" alt="Progress Lakeshore logo" /></a></div>
<div class="headerRight">
<div class="phone"><img src="../img/global/iphone.png" width="278px" height="60px" alt="Call us at 920.482.0540!"</div>
<ul id="socialMedia">
	<li id="facebook"><a href="https://www.facebook.com/pages/Progress-Lakeshore/191106907573535">Facebook</a></li>
	<li id="twitter"><a href="https://twitter.com/EDCMC">Twitter</a></li>
	<li id="linkedin"><a href="https://www.linkedin.com/company/1861934?trk=tyah&trkInfo=tarId%3A1397157215146%2Ctas%3Aeconomic%20development%20corporation%20of%20manitowoc%20county%2Cidx%3A1-1-1">Linked</a></li>
</ul>
</div>
</div>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 49 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Work with this

<!DOCTYPE HTML>
 
<html>
<head>
  <meta content="text/html; charset=utf-8"
        http-equiv="Content-Type">
 
  <title>Test page</title>
  <style type="text/css">
/*<![CDATA[*/
 
  html, body {
    background-color: white;
    color: black;
    font: normal 100%/125% sans-serif;
    margin: 0;
    padding: 0;
    }
 
  p {
    font-size: 1em;
    margin: 1.25em 0;
    }
 
  .header {
    height: 200px;
    margin: 0 auto;
    width: 960px;
    }
 
  .headerLeft {
    height: 200px;
    float: left;
    padding: 30px 0 10px 10px;
    width: 470px;
    }
 
  .headerRight {
    overflow: hidden;
    }
 
  .headerRight .phone {
    float: left;
    }
 
  #socialMedia {
    height: 42px;
    background: url('img/global/social_media_sprite.png') 0 0 no-repeat;
    list-style: none;
    overflow: auto;
    padding: 0;
    text-align: right;
    }
 
  #socialMedia li,
  #socialMedia a {
    height: 42px;
    display: inline-block;
    }
 
  #facebook a {
    background: url('img/global/social_media_sprite.png') 0 0 no-repeat;
    }
 
  #facebook a:hover {
    background-position: 0 bottom;
    }
 
  #twitter a {
    background: url('img/global/social_media_sprite.png') -47px 0 no-repeat;
    }
 
  #linkedin a {
    background: url('../img/global/social_media_sprite.png') -94px 0 no-repeat;
    }
 
  /*]]>*/
  </style>
</head>
 
<body>
  <div class="header">
    <div class="headerLeft">
      <a href="http://www.progresslakeshore.org"><img alt=
      "Progress Lakeshore logo"
           height="90"
           src="../img/global/logo.png"
           width="232"></a>
    </div>
 
    <div class="headerRight">
      <div class="phone"><img alt="Call us at 920.482.0540!"
           height="60"
           src="../img/global/iphone.png"
           width="278"></div>
 
      <ul id="socialMedia">
        <li id="facebook"><a href= 
        "https://www.facebook.com/pages/Progress-Lakeshore/191106907573535">Facebook</a></li>
 
        <li id="twitter"><a href="https://twitter.com/EDCMC">Twitter</a></li>
 
        <li id="linkedin"><a href= 
        "https://www.linkedin.com/company/1861934?trk=tyah&amp;trkInfo=tarId%3A1397157215146%2Ctas%3Aeconomic%20development%20corporation%20of%20manitowoc%20county%2Cidx%3A1-1-1">
        Linked</a></li>
      </ul>
    </div>
  </div>
</body>
</html>

Notice that the width and height attributes of an element do not receive a metric, e.g. "px". They either get a "%" or nothing at all.

Pay attention to the way layout is accomplished. left header ism float left, and right header is given a new context with the overflow property. Within right header, the phone block is float left and the list is given a new context. That way, everything flows pretty naturally.

Always make sure everything works before you throw on the bells and whistles.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Turquoise
Turquoise's picture
Offline
newbie
Last seen: 8 years 29 weeks ago
Timezone: GMT-5
Joined: 2014-07-15
Posts: 4
Points: 5

No hyperlinks at all anymore

This code completely removed my hyperlinks - the only thing that wasn't working before was the hover effect. And there's a strange scrollbar next the the icons now.

Turquoise
Turquoise's picture
Offline
newbie
Last seen: 8 years 29 weeks ago
Timezone: GMT-5
Joined: 2014-07-15
Posts: 4
Points: 5

Got it!

I copied the code I had written for a sprite on another website and it worked:

ul#socialMedia {
	width: 470px;
	height: 42px;
	list-style: none;
	margin-left: 329px;
	background: url('img/global/social_media_sprite.png') 0 0 no-repeat;
}
 
ul#socialMedia li {
	display: inline;
}
 
#socialMedia li#facebook a, li#twitter a, li#linkedin a {
    width: 47px;
	height: 42px;
	float: left;
	text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
 
ul#socialMedia li#facebook a:hover {
    background: url(img/global/social_media_sprite.png) 0 -43px no-repeat;
}
 
ul#socialMedia li#twitter a:hover {
    background: url(img/global/social_media_sprite.png) -47px -43px no-repeat;
}
 
ul#socialMedia li#linkedin a:hover {
    background: url(img/global/social_media_sprite.png) -94px -43px no-repeat;
}

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 49 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Not so much

The code I gave you absolutely shows each and every link. Without the images (which you didn't provide and I saw no reason to create or steal), the only visible link was the logo link to the home page using the alternative content.

If a page doesn't work with images turned off or not available, it is a broken page.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.