I think this should be simple (and probably is) but can’t seem to find it. I have a box in a responsive design, so the width alters acording to to the view width, thats fine. But how do I constrain the aspect of the box. The width is defined by %, but how do I define the height to always mainatin a fixed aspect ratio?
To get an idea what I’m trying to do, its a map, on the map I want links at specific places on the map.
I have the map image as a background so I can place the links on top of it.
If I add the map as an img instead, that takes care of the aspect, but makes it harder to place the links on top.
I want to use % to place the links, so as the map scales, they stay in place.
Any ideas?
Hi there SamA74,
have you considered using the vw unit instead of the % unit?
[code]
untitled document #box { width:50vw; height:25vw; border:0.5vw solid #000; margin:auto; } #box a { display:inline-block; margin:5vw; font-size:2.5vw; } [/code]I did consider it, but I’m not sure it will fit my needs in this case. For one reason, it works from view width rather than container width, which I don’t think will work in this layout as it is, the other reason is it is not universaly supported yet. It may work if I alter the layout.
While waiting for an answer I did try going down the route of using the img instead of background, as it sets the aspect. But I’m still having problems placing the links, as there is no content as such to define a height to allow placing them by %.
Hi there SamA74,
here is a percent example…
[code]
untitled document body { background-color:rgb(240,240,240); font-size:100%; } #box { position:relative; width:100%; max-width:648px; border:2px solid #000; margin:auto; } #box img { display:block; width:100%; } #box a { position:absolute; width:12.5%; padding:2% 0; top:25%; left:25%; background-color:rgb(255,191,127); font-size:80%; color:#000; text-align:center; } [/code]
coothead
Thanks.
I will check that out.
Youe example works well. But I’m strugling getting it to work on my page.
The one thing that I don’t understand is the use of the Position property. You have it set for the a element to Absolute, yet it appears positioned relative to the parent box container. Eg, setting top and left to 0 puts it in the corner. changing the window height does not move it vertially.
If I use Absolute on my page, the position is relative to the whole page (as I would expect with absolute), independant of the container box, so the link moves over the map as I alter the view size.
Confused by this, more that yours works as it does with Absolute, than that mine doesn’t.
It may be that the actual page is a little more complex than the example. The map box is nested within other containers, there is a header and top menu, a paragraph of text before the map, a side menu floated left.
Position:absolute elements base their positioning off the nearest positioned element, or if none is set, then the viewport.
You will see in cootheads example, that the anchor (a{}) is set to position:absolute, which means it will look for the nearest parent that has position set, otherwise it will base it off the viewport.
Now, if you look at #box{} you will see it has position:relative, which means it will base it off the #box{} instead of the viewport.
Basically, in your code, whatever element you want as the baseline for the absolute element(s), you need to give that parent position:relative (any position value other than “static” will work, but for this case, you want position:relative.)
1 Like
Thanks Ryan.
That seems to work. I had to add position: relative to each generation of parent element. I seem to have been mis-understanding how positions work. I thought absolute meant absolute to the viewport, as that is what seemed apparent. So the parent elements must have the position defined.
I have another question about this task, this may be more tricky. As you may have gathered I’m making a map with a number of links on it at specific points on the map. For responsiveness I want to the links to appear pinned to the map at any scale.
When I posiotion an element on the map, the position is set at the elements corner, eg, top right corner. Say for example I’m using a circle icon for the link, it is the corner (outside of the visible circle) that is pinned. How would I pin the circle centre to the map in a responsive way?
Maybe some trick with margins?
It’s absolute to the viewport only if there is no positioned parent :).
You shouldn’t have needed to set every parent element to position:relative. Just the one you want it to base off of.
Is the circle icon positioned absolute? The container of the map relative?
Yes, it is now, after reading your last post.
I’m just trying setting the anchor width to 5% and giving the img (child of the anchor) -2.5% margins to offest it.
I assume the circle icon has a width/height on it? Look at this technique.
I see where you are coming from with that, to centre the element within its parent. But I just can’t get it working with nested elements.
However I do seem to have something working OK now using negative margins. Maybe a bit of a hack, but if it works…
I abandoned % to set the icon size for px, which is much simpler for this kind of thing, besides, using % they can get a bit too small.
Thank you Coothead and Ryan
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.