Html+css+javascript responsive design

Question

I want to create a html page that display a speedometer. So, I have a background image (the speedometer), and inside of it I have some buttons that are other images. Every button is made with an tag with the img inside:

<div id="speedometer">
    <a href="button1"> <img id="img1" src="..."/></a>
    <a href="button2"> <img id="img2" src="..."/></a>
    <a href="button2"> <img id="img2" src="..."/></a>
</div

So, it's easy to style every element using fixed position, in order for every object to be positioned well.

But my purpose is to have a dynamically resizeable speedometer. So, the first thing I thought is to dynamically set the "speedometer" size to 100% of the width of the screen, and then to find the right percentage for the position of the three button inside. I think this should work, but I'm not sure if this is the best way to do that!

Since I'm not so skilled in html/css/javascript, I would like some suggestion on how to achieve this behaviour!

Thanks!

can't say too much by just looking at this piece of code, but there are several ways to do so. you can use relative values like you said, based on the aspect ratio of each button compared to the main speedometer. but you'll have to consider other elements in in this page too. another way is to use @media query and break down to several screen widths you are targeting, 1080p, 720p etc. — Godinall
– Godinall, Commented Jan 18, 2014 at 16:38

Dave · Accepted Answer · 2014-01-18 16:35:48Z

0

Two ways to approach this.

Use media queries. They're basically a way of declaring your CSS rules based on the current device width. So you would have to go through and define a CSS rule for each width you'd like to support. This is part of CSS3 and may require including a couple js libraries to enable support for older browsers. Also a good idea to include a css reset if you go this route.
Use a framework like Twitter Bootstrap. This is basically a framework which does exactly what I laid out in #1. They provide a lot of very useful pre-defined css classes and minimal javascript to enable the type of rendering you're describing.

answered Jan 18, 2014 at 16:35

Dave

6,1892 gold badges41 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Html+css+javascript responsive design

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related