Jump to content
luke214

Quick question about size of website height and width

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.

Share this post


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

Share this post


Link to post
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

Share this post


Link to post
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?

Share this post


Link to post
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

Share this post


Link to post
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?

Share this post


Link to post
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

Share this post


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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Makes sense!

I thought ems were used for font sizes, guess I was wrong :P

I'll just use pixels then and pray whatever I make still looks good on a smaller screen haha

Share this post


Link to post
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

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