luke214 Posted October 27, 2016 Author Share Posted October 27, 2016 (edited) This post is accidental don't know how to delete it Edited October 27, 2016 by luke214 Link to comment Share on other sites More sharing options...
dsonesuk Posted October 27, 2016 Share Posted October 27, 2016 I suggest you show all your code or give a link, because the picture you provided does not make sense? Compared to code provided. The outer div element #Geodevideo has white background, giving the VIDEO elelent a top margin will force it away from top of #Geodevideo exposing the white background-color such as shown in the picture. The collapsing margins cannot be the issue because #Geodevideo uses padding. Adding top margin to #Geodevideo will force it down from element edge above it, the white background-color won't extend because margin is added to outside edge, NOT inside which is what padding is used for. Link to comment Share on other sites More sharing options...
luke214 Posted October 27, 2016 Author Share Posted October 27, 2016 Ok I'll send the code once I'm home. Thanks for all the help by the way! Link to comment Share on other sites More sharing options...
Ingolme Posted October 27, 2016 Share Posted October 27, 2016 From the code you provided earlier, it seems you have applied the same ID on two different elements. This is forbidden, the ID should be unique in the whole document. <div id="Geodevideo"> <video controls="controls" id="Geodevideo" poster="picofrock.png"> <source src="Geodes.mp4" type="video/mp4"> Your browser does not support the video tag. </video> </div> Because the same ID is on two elements the selector is ambiguous now, each browser can choose how to handle this issue. They might apply the style to both elements, just one of them or to none of them. Link to comment Share on other sites More sharing options...
luke214 Posted October 27, 2016 Author Share Posted October 27, 2016 I can't believe i didn't notice I had it id'd TWICE... I feel so stupid haha. Well after removing that it looks great! It doesn't overflow anymore, even when removing the overflow element from my code. I guess that was the reason after all! One question, why is using say a high margin % to position an element bad, if it's already in a container? Because that parent container isn't moving, I don't understand how it would mess up the page layout Link to comment Share on other sites More sharing options...
Ingolme Posted October 27, 2016 Share Posted October 27, 2016 Percentage values for margin are relative to the width of the container, even vertical margins. The wider the container is, the further down from the top your video will be. Is this really the behaviour you want? Link to comment Share on other sites More sharing options...
luke214 Posted October 27, 2016 Author Share Posted October 27, 2016 (edited) Oh right. I thought by just changing the vertical margin it would push my video down into place, and that's it. In what case would I use margins then, if it would just end up messing out my layout? And how should i position my elements without using it? If I can't use margins or positioning I'm starting to run out of ideas haha Edited October 27, 2016 by luke214 Link to comment Share on other sites More sharing options...
Ingolme Posted October 27, 2016 Share Posted October 27, 2016 I'm not sure what your requirements are. You can use a margin, I just don't think a percentage value is what you need. I would need to know exactly what your requirements are. How far from the top should the video be? Link to comment Share on other sites More sharing options...
luke214 Posted October 27, 2016 Author Share Posted October 27, 2016 I would want my video to be 2/3 the way down from the top Link to comment Share on other sites More sharing options...
luke214 Posted October 27, 2016 Author Share Posted October 27, 2016 (edited) Basically where it is in this screenshot, but without using a margin http://pasteboard.co/k6JORoq3Z.png Here's what the CSS looks like; #Geodevideo{ background: white; border: 6px solid black; box-shadow: 0px 0px 50px black; width: 90%; padding: 8px; margin-top: 30%; } The only reason I used a percentage was to make it responsive when resized Wasn't sure if using pixels would completely mess it up if it ended up on a smaller screen Edited October 27, 2016 by luke214 Link to comment Share on other sites More sharing options...
Ingolme Posted October 27, 2016 Share Posted October 27, 2016 Do you really need that much space between the video and the text box above it? It looks poorly designed if you ask me. With your current HTML setup, they should already stack vertically without a problem, you don't even need a margin. Link to comment Share on other sites More sharing options...
luke214 Posted October 27, 2016 Author Share Posted October 27, 2016 It's not the final version haha.Hmm ok, how would I go about having some space between the elements even when they stack vertically? Link to comment Share on other sites More sharing options...
luke214 Posted October 27, 2016 Author Share Posted October 27, 2016 Plus I'd still like to know if using pixels for margins on a responsive website is the right way to go Link to comment Share on other sites More sharing options...
Ingolme Posted October 27, 2016 Share Posted October 27, 2016 You can use a margin, but normally for vertical spacing between elements you use pixels or ems. 70% margin is large and it's relative to the width of the container, it doesn't make a lot of sense to use it as a vertical margin. 1 Link to comment Share on other sites More sharing options...
luke214 Posted October 27, 2016 Author Share Posted October 27, 2016 Makes sense! I thought ems were used for font sizes, guess I was wrong I'll just use pixels then and pray whatever I make still looks good on a smaller screen haha Link to comment Share on other sites More sharing options...
dsonesuk Posted October 27, 2016 Share Posted October 27, 2016 You usually don't worry about height, for small screens because chances are it will inevitably be out of total view and require scrolling, width is more important because it remain the same, and you need to make sure container elements fill as much as possible which may require removing/reducing box shadowing etc with media queries. 1 Link to comment Share on other sites More sharing options...
luke214 Posted October 28, 2016 Author Share Posted October 28, 2016 Awesome! Well that's finally sorted out I can finish off my page and learn more about media queries Thanks! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now