luke214 Posted October 26, 2016 Author Share Posted October 26, 2016 Ahh I remember reading about overflow, completely forgot about that! So here's my html in which the video sits in; <div id="wrappertwo"> <div id="example"> <h1><ins>Examples of Geodes</ins></h1> <p>Below is a short video showing different types of Geodes.<br> Take a look to see the different types you can find, or hopefully buy!</p> </div> <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> </div> I've added the overflow: hidden; to my css, but it unfortunately didn't chance the background from pulling :/ Here's the change to my css; #wrappertwo{ overflow: hidden; width: 30%; } It looks exactly the same as what it did before unfortunately :< Link to comment Share on other sites More sharing options...
dsonesuk Posted October 26, 2016 Share Posted October 26, 2016 You have put it on the wrong element? It goes on the parent element of child element you are using top margin on. Link to comment Share on other sites More sharing options...
luke214 Posted October 26, 2016 Author Share Posted October 26, 2016 I used top margin on the video element, and it's parent element is wrappertwo, which is where the overflow is That's right isn't it? Link to comment Share on other sites More sharing options...
dsonesuk Posted October 26, 2016 Share Posted October 26, 2016 No that's considered the grandparent not the direct parent. Link to comment Share on other sites More sharing options...
luke214 Posted October 26, 2016 Author Share Posted October 26, 2016 Oh ok! Who exactly would be the parent then haha. Geode video is inside wrappertwo which is inside mainwrapper Link to comment Share on other sites More sharing options...
Ingolme Posted October 26, 2016 Share Posted October 26, 2016 Which element is the margin on? Is it on the <video> element or on the <div id="GeodeVideo"> element? <video> is a child of <div id="GeodeVideo"> Link to comment Share on other sites More sharing options...
luke214 Posted October 26, 2016 Author Share Posted October 26, 2016 In my css the margin is on the div element Link to comment Share on other sites More sharing options...
luke214 Posted October 26, 2016 Author Share Posted October 26, 2016 (edited) Why exactly is video a child of div by the way? Edited October 26, 2016 by luke214 Link to comment Share on other sites More sharing options...
dsonesuk Posted October 26, 2016 Share Posted October 26, 2016 when changing the margin top on my video Link to comment Share on other sites More sharing options...
luke214 Posted October 26, 2016 Author Share Posted October 26, 2016 Well it is my video isn't it? I changed the margin on the element that's a video Link to comment Share on other sites More sharing options...
luke214 Posted October 26, 2016 Author Share Posted October 26, 2016 So if video is a child of the div, who exactly is the div a child of Link to comment Share on other sites More sharing options...
dsonesuk Posted October 26, 2016 Share Posted October 26, 2016 Video element is direct child element of parent 'GeodeVideo', 'GeodeVideo' being same level as 'example' is its sibling, 'GeodeVideo' and 'example' are direct child elements of 'wrappertwo'. Your family get together at Christmas must be really really confusing. Link to comment Share on other sites More sharing options...
Ingolme Posted October 26, 2016 Share Posted October 26, 2016 An element that is between the tags of another element is a child of that element. <parent><child/></parent> Any element that is inside another element at any level is a descendent: <element> <descendant> <descendant/> </descendant> </element> Any element that wraps around another element is that element's ancestor: <ancestor> <ancestor> <element/> </ancestor> </ancestor> Link to comment Share on other sites More sharing options...
luke214 Posted October 27, 2016 Author Share Posted October 27, 2016 Ahh ok. So because my src="Geode.mp4" is between the video tags, that means I have to put the overflow on the video right? Link to comment Share on other sites More sharing options...
Ingolme Posted October 27, 2016 Share Posted October 27, 2016 One of your elements has a margin, you haven't told us which one so I can't tell you. The parent of that element has to have overflow set to hidden. If you tell us which element has the margin we can tell you exactly which one to put the overflow on. Link to comment Share on other sites More sharing options...
luke214 Posted October 27, 2016 Author Share Posted October 27, 2016 Found it! #Geodevideo{ background: white; width: 90%; padding: 8px; margin-top: 70%; } Link to comment Share on other sites More sharing options...
Ingolme Posted October 27, 2016 Share Posted October 27, 2016 I'm not sure whether you have the margin on the right element. Perhaps you intended to put it on #Geodevideo video Also, 70% margin is really large. It's likely going to mess up your page layout. 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 if you just gave something a div element you could change everything about it in css. How exactly would I go about putting it on the video element then :/ 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 CSS can be applied to any element. Your selector is targeting the <div> element, but it seems you're intending to target the <video> element. You're using the wrong selector for that, use this selector: #Geodevideo video { margin-top: 70%; } Link to comment Share on other sites More sharing options...
luke214 Posted October 27, 2016 Author Share Posted October 27, 2016 Ahh cool I'll give it a go when I'm home from work! Does that apply to all video elements then? Link to comment Share on other sites More sharing options...
Ingolme Posted October 27, 2016 Share Posted October 27, 2016 I think you need to go through the CSS tutorial again to understand what CSS selectors do. The selector I used only applies to <video> elements that are descendants of an element with id="Geodevideo" Link to comment Share on other sites More sharing options...
luke214 Posted October 27, 2016 Author Share Posted October 27, 2016 Ok I'll do that once I get home So once I've done that and applied the margin element to the correct element, where exactly would the overflow go after that? ? Link to comment Share on other sites More sharing options...
Ingolme Posted October 27, 2016 Share Posted October 27, 2016 The overflow would go on #Geodevideo because it's the direct parent of the video element. It seems to have padding already, so overflow may not be necessary. Link to comment Share on other sites More sharing options...
luke214 Posted October 27, 2016 Author Share Posted October 27, 2016 So the plan is to read up on selectors, add the margin to the actual video element, and overflow to the #geodevideo. I'll let you know how it goes later Link to comment Share on other sites More sharing options...
luke214 Posted October 27, 2016 Author Share Posted October 27, 2016 Earlier you said I was intending to target the video element, but I thought because I gave the video an ID selector, by targeting that selector in css I was doing the right thing? 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