0

A designer has created an image for us with three selection boxes. I added HTML elements and CSS such that three selection boxes would appear and would overlap the boxes on the image. These were positioned using pixel values.

The image of the designer was too large for mobile devices, so I created a smaller version of it. The image is as follows:

Anonimized image

If the user's device width is below a certain threshold, the page loads this image instead and positions it in the middle. If the device width is smaller than the image, the image should scale to fit, and the selection boxes should also scale to overlap the image. I am having trouble with this last part.

I have prepared a (cleaned) fiddle here. According to my findings so far, there are two opposing CSS rules:

  • The width is dynamic, but the width/height proportion must be equal. I have solved this by adding the following code inspired by this answer:

    #container {
    width: 100%;
    max-width: 458px;
    margin: auto;
}

#banner {
    height: 0px;
    padding-bottom: calc(100% * 350 / 458);
    background-image: url('https://s29.postimg.org/f5xjgn53b/selector_header_small_anonymous.png');
    background-size: 100% 100%;
}
  • I have currently set the height and top of various elements to be a percentage. For these values to be relative to the width, the height of its parents should also be set. However, the #banner element has a height of 0px due to the first solution. Therefore, these now all evaluate to 0px.

How can I adjust my code, such that

  1. The select elements overlap the select elements in the image, and
  2. The select elements are resized whenever the container is resized?

I would prefer this solution to be HTML & CSS only, though javascript is acceptable.

Community
  • 1
  • 1
Rex
  • 610
  • 9
  • 19
  • 1
    If I understand correctly, the point of the overlapping images is to make the selection boxes look nice? If that's the case, I can make a fiddle that'll style the select boxes to look like the image and that way, you're not dealing with images in the first place. This'll allow for easy resizing and positioning. – heraldo Dec 19 '16 at 14:40
  • 1
    If you're using the image as a design to style your select boxes... There is no responsiveness that will help you here. I agree with rex. That style looks incredibly simple. Bold, basic colors. No need for images really. – Andrew Ice Dec 19 '16 at 14:47
  • The image itself is a bit more complicated than the stripped out version that I supplied in my question; I cannot simply convert it to CSS styling unfortunately. It might work if I put the complicated image elements in separate images though... I'll try. – Rex Dec 19 '16 at 14:50
  • You can do pretty much any design with CSS, if you do it right and no how. – Andrew Ice Dec 19 '16 at 14:56

2 Answers2

1

You are trying to do something that is intrinsically impossible. There are a myriad of use-cases I can think of that would break your design. This is also bad practice and bad accessibility on many levels.

Depending on where you live and who your client is, you are at least in breach of the UN treaty on rights of people with disabilities. I know the US and Canada have ratified and enacted into law, as has most of the EU.

However, there is an easier way to do this that is also a lot more compliant.

<div id="container">
<fieldset id="banner">
<ol>
    <li>
    <legend>A descriptive legend (accessibility requirement)</legend>
    <label for="first">A descriptive label (accessibility requirement)</label>
    <select class="selector" id="first" name="first">
        <option value="-1">Selector</option>
    </select>
    </li>
<!--- rinse and repeat --->    
</ol>
</fieldset>
</div>

You are a presenting a list of items, so ol is appropriate semantically. It also offers better navigation for users of assistive technology.

Now, to get the look that you want, style the numbers of the list as described here:

http://www.456bereastreet.com/archive/201105/styling_ordered_list_numbers/

Style the label with that green bar you have there. (Mind to not use color as indicator exclusively, 1 in 12 males is color blind.) And simply give your fieldset a gray background.

I can think of ways to to this CSS-only, but for speed I'd use SVG images for the arrow bit with a PNG fallback for older browsers.

HTH. Good luck and have fun.

David Dylan
  • 214
  • 1
  • 10
  • 1
    Thank you. I decided to convert the original image to CSS and this now works. – Rex Dec 19 '16 at 19:31
0

This seems a very unusual and unwieldy way of going about things. Personally I would split the image into three to show the 1, 2 or 3. Then I would use three separate layout elements to control the selection boxes, either separate divs or maybe table rows. Each layout element would contain an image and a selection box.

Atrix
  • 299
  • 2
  • 6
  • How would this allow the selection boxes to scale with the image? – Rex Dec 19 '16 at 14:52
  • 1
    You wouldn't use the image, unless you split it up into each specific element. – Andrew Ice Dec 19 '16 at 14:55
  • 1
    Well, if you have three separate divs or table rows, I thought you won't have any vertical alignment problem, because that will be taken care of. You would still need a way to scale the size of the selection boxes, but I expect you could adapt your existing technique. – Atrix Dec 19 '16 at 14:59