I cannot fathom out why the images are ignoring the 90% width wrapper. Taking just the bigger image, I thought its width should be 60% of the wrapper ie 60% of 90%, but it’s 60% of the page width. Perhaps it’s not possible?
I want a 2px padding round the edge of each image but if I add padding:2px to the frame element (as per TED) it doesn’t work. It gives 2px padding round the whole lot.
The smallest image is overlapping the image above it. It is supposed to be 40% from the top (as TED, except they use inline styles) but it seems to be higher, and it doesn’t move relative to the others as I expected.
I have made quite a bit of progress with my site but have come unstuck with the video positioning when I add a couple more and if I try to rearrange them, particularly if I try to put a smaller video top left. It’s as though it is clearing a float. @megazoid you kindly helped me thus far. I have updated the page at http://gandalf458.co.uk/vids/video-section.php but not the codepen
Just pitching in temporarily in the absence of megazoid.
I don’t what your design intent is (I just poppped in), but the page has no <doctype html> and no <head> section. Without a guiding structure, it will most likely fail to render as desired.
If you could simulate a screen shot showing how you expect it to look, that would help.
Thanks for the reply. Yes, that’s what I get. There’s no doctype or head as the page is intended to be included in the main page.
What is not working is that the two last images are not positioning vertically as I wanted/expected. The bottom right has left: 80%; top: 40% but is positioned left 80% top 60% and the bottom left has left 0 top 40% and is positioned left 0 top 80%.
All of the video boxes are position:relative. Which means they never really lose their non-positioned flow in the page. Instead of giving video-4 {top:60%}, try (top:-20%} or {bottom:20%}. It still hasn’t left its place in the flow, but it “appears” to have. Do the same thing with the video-5 box.
Position:relative is not the best way to move things around vertically.
You can toss in some outlines and/or background colors to help visualize the size of the page and its boxes.
EDIT:
I disabled positioning in the following styles and tossed in one float:left.
Thanks @ronpat It does indeed seem to do what I want. I shall have to see what happens if I try a different alignment of images.
Odd, I thought there was another reply to my original question which no longer appears as I had a float: left on .video at one stage and @megazoid said I needed position: absolute on the first video.
Thanks. Each vid has the .video class and one of .video-1 … .video-5 so I guess that amounts to the same thing. I still haven’t plucked up courage to rearrange the vids to see what happens then.
Let me know what happens. I didn’t really examine the video part of the page very thoroughly. It “looks” like it should work, but who knows. Fingers crossed.
It doesn’t seem to work if I change the sizes and positions of the video-1 … video-5 elements. I note that ted.com uses inline CSS for the position, although I can’t believe that makes much difference. I’m also puzzled that on TED the images use position: absolute. I’m now thoroughly confused.
Does TED move the big boxes around, or does TED swap the vids between boxes? I still don’t understand the intent because I don’t have a TV and don’t watch TED.
If you reload the home page of ted.com or if you visit on different occasions the vids do move around a bit. What I’m after is less sophisticated than TED but I want to be able to handle different configurations of video layouts. Basically I would like the %age left and %age top to do what they seem to do on ted.com, that is, they seem to position the images the correct percentage of one of the containing divs.
Am I making any sense at all???
Incidentally, I don’t have TV and I’ve not watched any of the TED videos. I’ve not got further than the home page and have been pulling out what remains of my hair
Thanks for including the link to the TED site. I haven’t seen it in a long time. It’s much nicer now, including subtitles!
Their site uses a lot of JS. Most of the site (all?) does not render if JS is disabled or some links are blocked. They seem to have 5 pattern pages from which more patterns are possible. Those patterns do not appear to be truly random. The one being displayed is just one of the patterns that has been created. They could be swapping the vids between certain boxes, too. FF froze before it would load one of their stylesheets, so I really don’t know how they do it. Just know that it’s not random and there is lots of JS on the page.
I think I’m going to have to give up on the idea of exactly positioning the images using top and left attributes as the TED website does, and rely on floating the images as you have shown me @ronpat. I assume as I’m now using floats on the .video class, that the top and left attributes are now redundant? Or do they still have a use? I noticed that Firefox’s element inspector didn’t have the left and top attributes crossed out.
