Jump to content

Quick question about size of website height and width


luke214

Recommended Posts

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

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

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

Link to comment
Share on other sites

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

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

If I can't use margins or positioning I'm starting to run out of ideas haha

Edited by luke214
Link to comment
Share on other sites

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

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 :o
Wasn't sure if using pixels would completely mess it up if it ended up on a smaller screen
Edited by luke214
Link to comment
Share on other sites

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

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.

  • Like 1
Link to comment
Share on other sites

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.

  • Like 1
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...