Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Kurt Archer
Kurt Archer
5,139 Points
Posted by Kurt Archer
Kurt Archer
5,139 Points

Responsive image header buttons

Hey all! I have a challenge I am hoping to get some input on. It has to do with a responsive image header broken up into multiple images which serve as buttons. The site I am working on has 3 main areas. I'll call them area A,B and C. Each area will take the user to a WP multisite sub-page, where branding will be slightly different. The challenge I am faced with is how to make the banner header responsive using multiple images.

Scenario 1: I lay a background image and then lay the buttons overtop and then set various fixed width responsive sizes so that the buttons and background do no lose alignment.

Scenario 2: I create a list of images with 0 margin/padding and set it inline to act as a header banner (so only 1 layer) and then.. would I just set responsive fixed with settings for the images also?

Scenario 3: How would I do this with a fluid width? using percentages. any other scenario you think I am missing? Thanks!

3 Answers

Casey Ydenberg
Casey Ydenberg
15,622 Points
Casey Ydenberg
Casey Ydenberg
15,622 Points

Use image maps: http://www.w3schools.com/tags/tag_map.asp

I THINK that the coordinates defined correspond to pixels in the raw image. Therefore, when the browser calculates how large to make the image in reality, the coordinates will simply resize with it. I'm not sure about this, so set up a test before you code it into your site.

Kurt Archer
Kurt Archer
5,139 Points
Kurt Archer
Kurt Archer
5,139 Points

That is a good idea Casey, only challenge with that approach is how to create a hover effect for the buttons. I think I can set it so the full image changes on hover, but that'll mean 3 large banner images. I want to test to see if the responsiveness stays in aspect ratio when resized also, so i'll test it out. Thanks for the idea!

junebrunken
junebrunken
707 Points
junebrunken
junebrunken
707 Points

Kurt Archer I'm very interested to heat if that worked?