I want to show another image on hover and due to the layout of the homepage I need to use sprite to do it. I've got it working fine, but I'm using fixed width and height for the container.
You can see my JSFiddle here:
http://jsfiddle.net/mckeene/fhk0byqt/4/
The problem arises when I want to make it responsive. I can use max-width: 100%, but what about the height?
OK, this solution is based on the known fact that some properties like padding-top and margin-top, when given values in percentage, are calculated based on the width of an element rather than its height.
Making an element “as high” as required by the known dimensions of a responsive image can be done by using padding-top – I used a value of 66.54% here based on your image’s dimensions (half the image height divided by the width, times 100) to span the container element up to the required height.
Now normally to display the upper half of an image first, and then the second half on hover, I would use absolute positioning – but we can’t use top here, since a value in percentage for that property would be based on the height. But luckily, as already mentioned, margin-top is one of those properties where percentage is calculated based on the width – so we can use margin-top: -66.54% here to “pull” the image up over its container’s padding first to show its upper half, and then double that (margin-top: -133.1%) to pull it up even further on hover, to show its lower half.
Related
My image changes size and I want to know how to keep a label in the same spot on the image no matter the size. I want to keep the label inside of a speech bubble, is there a way to put constraints on it to do this, or is there another way? I'm working in Xcode.
Instead of giving constant position values, derive the required position using height and width of the image using mathematical calculation.
Example:
Let's say the image size is 400x400 and you want a label at bottom right
You can derive it as
X=width-width*0.75
Y=height-height*0.8
Now even if the height and width varies, the label will be in same location
I've been provided with 8 individual images (top left, top, top right etc) for a border around the main (fixed width) content box. If I was given a single image, I'd use border-image.
What's the best way to use the 8 images? Divs with absolute positioning? Or is it such a pain I should just combine them into one?
What's so hard about combining the images into one? It has numerous other advantages, like reducing the number of HTTP requests the client needs to make, for example.
An alternative is to use CSS3's multiple background image feature, where you'd set each image as a layer in your box.
Eric Myer used a technique whereby (just to explain technique) the image was a little circle. Then, that was the background graphic in four separate divs each abs positioned in the corners of a containing div w/relative position. Background position was changed for each and a regular border was used for the straight lines in effect getting rounded corners. The circle had to be filled with white or whatever bckgrnd color you used.
This way, one could expand. You still need to have the height expand should changes occur, right?
I'd make one for the top and bottom and a third that repeats on the Y for the middle, that way your box will expand if content is added. Height that is.
I am using Xcode's auto layout feature for the first time in a project where I have several NSPopUpButtons.
Now what I want to achieve is to have two popUpButtons in a row together with their labels and when the window is resized I want both popUpButtons to adjust their width while keeping the horizontal spacing between each other.
However no matter how I apply the constraints I just don't get the popUpButtons to change their size with the window. They will always break their horizontal spacing constraints and just increase/decrease the spacing to the labels. I hope it gets a bit clearer what I have done from this screenshot:
I have set the spacings between the labels and the popUpButtons to fixed values with 1000 priority and have set the width constraints fo the popUpButtons to be greater or equal to the initial size.
How must I set my constraints to have the popUpButtons resize?
While writing this question I realized what the trick is:
In the size inspector of the NSPopUpButton I had to reduce the Content Hugging Priority.
Obviously this controls how closely the view wants to 'hug' its content. So when the hugging priority is higher than the resize priority the view will not want to increase its size because that would mean to have more empty space between its bounds and its content.
Then in my special case, I could also pin both NSPopUpButtons to have the same width and voilà: the popUpButtons will perfectly resize while keeping the spacing constant.
I want to use sprites for list background images. I have seen a few methods of doing this, but they all require set height and/or widths for each list item. The dimensions of each list item I have will be different so I can't set that.
Ideally, I want to be able to have a sprite image set up, then choose to display only part of it e.g. 50px by 50px in the top left corner, but I want the content of the list element to be able to be any height and width. I am also trying to ensure that the sprite image always remains centered in comparison to the list text next to it.
Any ideas?
The problem:
I have a set width and height image Lets say height:160px; width:200px; with an image in each box.
The image can vary in size but I need a solution that will always center the image vertically and horizontally within the box no matter what it's size.
Horizontal doesn't seem to be a problem by using margin: 0 auto but vertical is proving difficult. I have tried vertical align: center but this doesnt appear to work either
Any help is appriciated
Thanks
center is not a valid value for vertical-align (you're probably confusing it with middle). Still, vertical-align isn't the correct method here and is often a misunderstood property. I've recommended the following site a few times and it should help you, too:
http://phrogz.net/css/vertical-align/index.html