Right-aligned Sprite Navigation

6 replies [Last post]

Tue, 2014-07-15 00:55

Turquoise

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.

Tags:

CSS Styling

Tue, 2014-07-15 08:50

gary.turner

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.

Tue, 2014-07-15 16:39

Turquoise

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>

Tue, 2014-07-15 20:05

gary.turner

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.

Tue, 2014-07-15 22:55

Turquoise

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.

Tue, 2014-07-15 23:51

Turquoise

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

Wed, 2014-07-16 00:11

gary.turner

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.

Right-aligned Sprite Navigation

Code?

CSS and HTML

Work with this

No hyperlinks at all anymore

Got it!

Not so much

User login

Navigation