Jump to content

Quick question about size of website height and width


luke214

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 :<
Link to comment
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.

Link to comment
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>
Link to comment
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.

Link to comment
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.

Link to comment
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%;
}
Link to comment
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"

Link to comment
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.

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...