Jump to content
luke214

Quick question about size of website height and width

Recommended Posts

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 :<

Share this post


Link to post
Share on other sites

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">

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by luke214

Share this post


Link to post
Share on other sites

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%;
}

Share this post


Link to post
Share on other sites

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"

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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? :(

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...