Take the 2-minute tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.

I have a set of links with background images on this CodePen.

Result

I am seeking feedback to see if I did this the most optimal way. For example, I made a sprite so that I can just load one image. And I leveraged inheritance so that I did not have to assign every containing div a class. Just used a child selector and for the individual buttons, I used :nth-of-type to pass the background image.

Tell me your thoughts if this could use improvement.

HTML

<div class="introSelect">
  <div>
    <a href="#"> <!-- Link Pending -->
      <span>Dentist</span>
    </a>
  </div>

  <div>
    <a href="#"> <!-- Link Pending -->
      <span>Patient</span>
    </a>
  </div>

  <div>
    <a href="#"> <!-- Link Pending --> 
      <span>Lab</span>
    </a>
  </div>

</div>

CSS

.introSelect { text-align:center; }
.introSelect div {
  display:inline-block;
  position: relative;
  text-align: center;
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/101702/bruxzir-user-sprites_1.png') no-repeat;
  width: 90px;
  height: 90px;
}
.introSelect div:nth-of-type(1) {
  background-position: 0 -180px ; 
}
.introSelect div:nth-of-type(2) { 
  background-position: -90px -180px; 
}
.introSelect div:nth-of-type(3) { 
  background-position: -180px -180px; 
}

.introSelect a {
  display:block;
  text-decoration: none; 
}
.introSelect span {
  background-color: rgba(152, 216, 242, 0.7);
  color: #444;
  font-weight: bold;
  letter-spacing: 1px;
  position: absolute; bottom: 0; left: 0; right: 0;
}
share|improve this question
    
Would it be possible for you to use a CSS preprocessor like LESS or SASS? E.g. the templating features of Sass would remove the need for some of the hard-coded pixel offsets. –  amon Jan 30 at 21:57
    
@amon, i agree with you but the product owner does not want anything other than standard CSS because of future maintainers. –  JGallardo Jan 30 at 22:01
1  
@Malachi I read fast and appreciated what they had to say about the self-documenting class. I had this at first but had big stupid names. I liked their suggestion of .introSelect .lab etc. I agreed that using classes like that would reduce having to change CSS and HTML later. –  JGallardo Jan 30 at 22:10
1  
@JGallardo You might be able to change your client's mind with Compass (for Sass), which will generate sprite sheets and the corresponding CSS (see: compass-style.org/help/tutorials/spriting). –  cimmanon Jan 30 at 22:11

2 Answers 2

up vote 11 down vote accepted

There hasn't been a good reason to use extra elements such as spans for purposes of hiding text in the last 10 years. If you need to support very old browsers, negative indentation is the simplest method. Otherwise, there's plenty of clean, modern techniques to choose from.

.foo {
    text-indent: -100em;
}

There's not really a good reason to use nth-child here. You'd be better off using self-documenting class names. If the order of the images need to be adjusted, then you don't have to make modifications in multiple places (markup and CSS).

.introSelect .dentist {
  background-position: 0 -180px ; 
}
.introSelect .patient { 
  background-position: -90px -180px; 
}
.introSelect .lab { 
  background-position: -180px -180px; 
}
share|improve this answer

if you don't want to mess with all the headache of the HTML and CSS you could just create an Image map

in other words you create the image

Image you want

and then you map out the separate squares using the HTML syntax and link them to the right pages. this minimizes the amount of HTML and CSS, and makes sure that your font is always displayed.

if you want to see how to do it check with this link about Creating HTML Image Maps

it would look something like

<img src="MenuMap.gif" usemap="#MenuMap" />

<map name="MenuMap">
    <!-- these are only examples.  use a picture editor to get the coords. -->
    <area shape="polygon" coords="19,44,45,11,87,37,82,76,49,98" href="http://www.trees.com/save.html">
    <area shape="rect" coords="128,132,241,179" href="http://www.trees.com/furniture.html">
    <area shape="circle" coords="68,211,35" href="http://www.trees.com/plantations.html">
</map>

the only time that I ever did this I was using Dream Weaver and it gave me the coords.

I think this would be the perfect use for it though. if you want to make it look the way you want.

if the person zooms in or whatever the picture stays the same and so does the map, so they would always hit the links. No Divs, no Spans, just nice and neat.


Updates from Research

Responsive Image Maps jQuery Plugin by Matt Stow a little link that I stole from an answer, probably can't be used as OP said that they wanted to use pure CSS, not sure how this translates for jQuery though.

also, found this out about SEO on image maps,

sounds like there are some Google Search Bots that don't crawls these "links" and some that do, but the final decision that every blog that I have seen so far is that the image map is SEO Friendly and will still show up for SEO.

Joe Hall Post

Image Map Crawlability

What you should know about Image Maps

When it comes down to it, Google is all about content, and alt content is something that SEO is driven on, but you can't just spam it with keywords, because we all know that Google is savvy to this abuse and will shut you down.

One person mentioned the href saying

an href is an href is an href

I am going to have to agree with this. I think that Google watches the traffic in and out of the site as well as the content on the page to determine what is relevant and what isn't.


I Tried to make sure that all the links I looked for were the newest ones that I could find

share|improve this answer
3  
MSPaint also gives you the coords ;) –  Mat's Mug Jan 30 at 21:55
2  
Ewww. This reduces searchability, thus also SEO and accessibility. Don't. Use. Maps. At least not for navigation or such. –  amon Jan 30 at 22:00
    
it's for a mobile site. let the desktop Site use HTML and stuff. but the mobile site you want small and fast loading @amon, that is why I say do it this way. –  Malachi Jan 30 at 22:04
2  
The site is completely responsive. And this is what it looks like in mobile. Hence why i used <div> 's that whose size and background image will be controlled with media queries. –  JGallardo Jan 30 at 22:07
3  
@JamesKhoury The alt attribute also helps search engines to find relevant pictures too doesn't it? –  Malachi Jan 31 at 14:08

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.