Hi there.
I have a problem with images shifting on the web page link below. I want the images to stay put and not shift but I don’t want to use fixed pixels if possible.
http://www.lolabernabe.com/module-01/
Can anyone help?
Thanks so much in advance!
Lola
Hi, liz.
Please validate the HTML.
After that, please explain more fully what you want to see vs. what you do not want to see. To me, the images aren’t “shifting”. You need to explain, perhaps with the aid of a graphic, what you wish your page to look like and when.
Aside:
Your page is a little over 2 MB of which just under 2 MB is used by 4 images.
That would explain why they are shifting - the page doesn’t know how much space to allocate to the images when the HTML first loads, it has to wait several seconds/minutes for the images to load in order to find out how much space they require.
Thanks so much for responding. The pdf wireframe can be seen here:
This is what it’s supposed to look like but things just shift. Must be a CSS issue.
I validated the html code and found some small errors.
Thanks, again,
Lola
Hi there liz,
your four images were actually 3.01MB. 
I have compressed them to 22% of that value
which will greatly improve the loading time. 
images.zip (652.8 KB)
coothead
First, coolhead’s images rock. Overlaying the original images with the “economical” versions shows the differences to be indistinguishable.
liz, When you say that the images “just shift”, I need to find out what that means. It looks to me like you are not talking about the shift that sometimes occurs on page-load. Instead, it seems that you might be talking about how the images are being scaled down and seemingly squished out of place by the text boxes as the screen width narrows.
Is my “guess” accurate or have I misinterpreted?
Yes, your guess is correct! So sorry that was not clear. I did not mean load time.
Yes images shrink around and shift around and mess up even in desktop view. They are supposed to be juxtaposed together, not move. But I don’t want to use fixed pixels, just percentages and ems.
It has something to do with CSS. Someone told me to put the images in a wrapper and maybe put “overflow: hidden”, but that did not work. So, I’m hoping there is a solution to this!
Thanks,
Lola
Thanks coothead Im sorry I wasn’t clear. The load time is not the problem I was referring to. Instead the problem is what ronpqat mentioned–the images moving around, when they should stay put.
It has more to do with structuring the HTML correctly, then styling the images and text boxes with CSS.
I am working with another member at the moment. I will return to this topic when that is finished. In the meanwhile, anyone else is free to hop in with a layout recommendation.
We will recommend the units of measure that are appropriate (primarily percents), but there may be a pixel or two in the mix.
Thanks, ronpat. I will be here…
If you are the only person who will visit your
site then that, of course, may well be true. 
But I assume that you are hoping for others to
poke there proboscises into your “Secret Place”. 
If so, then their all their possible requirements
really need to be considered.
coothead
Hi.
The new index.html has just been uploaded. I also just validated it with validator.w3.org
One error that I don’t understand how to fix is still there:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
but not sure if that is contributing to the image shift problems.
okay that’s fine!
Looks like you found the errors . No, they were not contributing to the problem with the images, but they were significant enough not to be ignored.
After playing with this for a bit, an obvious question has finally come to mind…
You’ve shown a “wireframe” (whatever that is) in the form of a .pdf file. Therefore, it is obvious that the “wireframe” layout would be illegible at mobile widths. Considering the use of mobile layouts these days, do you expect this layout to also be “responsive” down to mobile device sizes? If so, that means changing the layout from the “wireframe” pattern to a one column layout. Is that what you have in mind?
Hi Ron.
The wireframe is just a mock-up to show what the site should look like. I created it, like a sketch, before coding the actual site, so it’s a visual reference point. The wireframe is not to be used as an actual site. I placed it up only for reference to show what this should look like (It’s done in Illustrator).
The actual site, which yes, at some point will be responsive is at: http://lolabernabe.com/module-01/
which you have seen is the one I’m working on/coding, not the wireframe.
I haven’t added media queries yet because I wanted this to look good on the desktop first before I add responsiveness. And yes, once it goes down to mobile size it will be one column, which I haven’t designed yet.
Someone said, “try placing your images into a wrapper with a height set to the same value as the text boxes so that they don’t vary in height.” But not sure how that works in practice or how to do it since I’m still a bit of a beginner.
Thanks,
Lola
Brilliant! Now I understand! Sorry for sounding like a horses behind.
I’ve managed to create something that is quite close to the .pdf, but not perfect. It achieves your design goal of keeping the aspect ratio of the images and their positions but the text of the shorter column (relatively speaking) is not vertically centered (middled). If the shorter of the two mid columns is on the left, the text is on the bottom and IMO looks OK if a tad shorter. If on the right, shorter text at the top might be annoying. In practice, it probably depends on font size and doesn’t matter that much.
I need to play with it more and simplify the code. Right now the code looks as organized as a ball of wire that was salvaged from a junkyard.
Hopefully, later this afternoon, but no promises.
My God you are awesome. Thank you so much for your responsiveness!
I would like one more piece of guidance, please.
The .pdf keeps the aspect ratio of the large schlern.jpg image. Your web page code uses the image as a background-images and limits its height. As the page is resized, the image is cropped significantly. Which do you prefer… keep the full schlem image or limit its height?
Never mind. Done.
Mostly written from scratch.
Caveats and disclaimers…
This code will work in modern browsers only.
Scaling of text and most padding is accomplished with the vw unit of measure. http://caniuse.com/#search=vw
Column widths use percent.
Version 1b mimics the .pdf file.
Images and text resize to fit the width of the window.
Version 1c crops the bottom of the mountain image in wide viewports so the nav menu does not drop below the bottom of the browser window.
You can zoom the font-size-only larger (Firefox) to simulate how the page might look if the user chooses a font size that is larger than your font size. You will find that all but the bottom soup row will adapt as wished. In the soup row, overflow happens as the font-size increases. Floating the image would allow the text to flow below the image but could not be vertically centered at normal sizes as it is now.
The almost ideally magic combination of image aspect ratios and the quantity of text permit this layout.
It has been tested successfully on a PC with Firefox and Chrome.
It has NOT been tested in any version of IE including Edge.
It has not been tested on a Mac.
Surprises/disappointments are possible.
Attached is a liz.zip file containing: (total size 665 KB unpacked)
liz.zip (657.7 KB)
This is a link to the same files in Dropbox (not zipped):
Remember, this code mostly mimics the .pdf, as requested. Your challenge is to modify this code (or write something new) to adapt it to a single column mobile view
Thanks so much for your help and your time used to help me out on this. It’s so appreciated! I will look at this tomorrow.
Also coothead, thank you for your time as well.