I have a iFrame that I cannot get flush on the left side of the web browser. It appears to be stuck. It seems to be off around 300 - 400 px. Any Ideas? Thank you.
Here my CSS code below:-:
.wrapper {
display: block;
position:fixed;
top: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 100px 0 20px;
}
.wrapper iframe {
height: 100%;
width: 100%;
}
<div class="wrapper">
<iframe src="My Source"></iframe>
</div>
In this case it is the margin of the body tag, just include this in your css:
html, body {margin: 0px;}
demo: https://jsfiddle.net/1ap4fg30/
You need to take into account the default styles of the browser engine.
To make all elements render consistently across browsers you need to use some type of css reset or normalising style sheet.
Take a look at this for example: https://necolas.github.io/normalize.css/
I was able to resolve this issue by making a simple modification to the CSS.
I added left: 0; to the CSS.
Here is what it looks like now:
.wrapper {
display: block;
position:fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 100px 0 20px;
}
.wrapper iframe {
height: 100%;
width: 100%;
}
Thank you to all who assisted and viewed.
I also suggest checking out Peter's reply, as the information that he provided is very beneficial and informative.
-Z
Related
I'm looking for a HTML & CSS way to display this embed video as a 75vh height hero background.
For now, the iFrame keep his width: 100% and his height: 75vh but the images in itselves aren't covering the whole header width.
Actually, I need it to behave like a background-size: cover property.
Here is a quick attached jsfiddle to illustrate this issue, best way to see it is in a new tab.
https://jsfiddle.net/wollsale/9yrvLy72/
PS : I know there is a loads of articles talking about that kind of problem, but I didn't found a solution that works for me.
body {
background: #aaa;
margin: 0;
padding: 0;
height: 2000px;
}
body {
background: #aaa;
margin: 0;
padding: 0;
height: 2000px;
}
header {
background: #ddd;
height: 75vh;
width: 100%;
}
.video__wrapper {
position: relative; padding-bottom: 53.25%; /* 16:9 */ padding-top: 25px;
}
.video__inner {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
min-height: 100%;
}
<body>
<header>
<iframe src="https://www.youtube.com/embed/w7Ap0k7qp2k?autoplay=1&loop=0&rel=0&showinfo=0&controls=0&autohide=1" frameborder="0" class="video__inner"></iframe>
</header>
<main></main>
</body>
EDIT
This article explain how to use HTML & CSS only to kind of "crop" a video in order to make it covering to whole viewport.
https://fvsch.com/code/video-background/
See it in action with this great codepen
https://codepen.io/cvn/pen/WbXEoX?q=youtube+object+fit&limit=all&type=type-pens
This article explain how to use HTML & CSS only to kind of "crop" a video in order to make it covering to whole viewport.
https://fvsch.com/code/video-background/
See it in action with this great codepen
https://codepen.io/cvn/pen/WbXEoX?q=youtube+object+fit&limit=all&type=type-pens
I tried to create a full screen website without scrollbars and have problems defining the margins for that. Given is a minimum example:
html {
margin: 0;
padding: 0;
height: 100%;
background: yellow;
}
body {
margin: 0;
padding: 0;
height: 100%;
max-height: 100%;
background: green;
}
h1 {
background: gray;
}
<body>
<h1>Heading 1</h1>
</body>
Why do I get the yellow background of the html element in the top of the side? Even more surprising to me is that the yellow part disappears, if I add text before the h1 element.
html {
margin: 0;
padding: 0;
height: 100%;
background: yellow;
}
body {
margin: 0;
padding: 0;
height: 100%;
max-height: 100%;
background: green;
}
h1 {
background: gray;
}
<body>
Add some text and the yellow part disappears.
<h1>Heading 1</h1>
</body>
Is there any idea to avoid the yellow part in the top without adding text before the heading element?
Your body element is a non-floating block-element, just as the contained h1 element. Therefore the size/position of the bodyelement adapts to its child-element h1, which has a margin (margin-top) defined as default.
There are multiple solutions for your problem, one is to make the body-element float. The advantage of this is (compared to removing the margin on the h1) is, that i will work the same way, even if a different element with a margin is inserted.
html {
margin: 0;
padding: 0;
height: 100%;
background: yellow;
}
body {
margin: 0;
padding: 0;
height: 100%;
max-height: 100%;
background: green;
float: left;
width: 100%;
}
h1 {
background: gray;
}
<body>
<h1>Heading 1</h1>
</body>
html {
margin: 0;
padding: 0;
height: 100%;
background: yellow;
}
body {
margin: 0;
padding: 0;
height: 100%;
max-height: 100%;
background: green;
float: left;
width: 100%;
}
h1 {
background: gray;
}
<body>
<h1>Heading 1</h1>
</body>
Just put margin-top:0; on your h1. Example here
I recommend using a CSS reset to avoid problems like this. Eric Meyer's is very well-known and simple.
When starting a new project or as a general rule, always try to reset a lot of the predefined css values that browsers "add". There's some "css reset" stylesheets already created, which you can find with a google search, but for a simple solution you can always start with:
* { margin: 0; padding: 0;}
Then you can always add additional rules that will affect all elements in your document like "font-family: sans-serif" etc.
That way you're sure that you have a solid starting point without having too many different looks across browsers.
Later on you can then add the rules more explicitly to the elements that need styling
this is how I would do a full screen website and it is very simple and clean:
<body>
<h1>Main heading</h1>
</body>
The CSS code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: green;
height: 100vh;
}
h1 {
color: #fff;
font-size: 40px;
}
So, if you give to your body a height of 100vh (viewport height) it will stay 100% of the window, no matter the size of it.Like this you won't have a problem with scrollbars.
This is why often something like normalize.css is added to a project to avoid these things with different browsers etc. height: 100vh; would work. To get ride of scroll bars you can also use overflow-y: hidden; or overflow-x: hidden; depending on the situation.
Try this:
.img-responsive { background-size: 100%; }
OR
.img-responsive { background-size: cover; }
Instead of img tag, use background-image for fullscreen image.
<header>
<div class="menu_area">...</div>
</header>
html, body, header {
height: 100%;
}
header {
background-image: url('images/image1.jpg');
background-size: cover;
}
I have no idea how to fix this.
Putting things on position: relative will null out the bottom: 0px, and will also create tons of white space on pages that don't fit the entire height due to lack of content.
Putting it on absolute makes it cover content of pages that do have content long enough to generate a scroll bar.
.footer {
width: 100%;
height: 150px;
background: #3167b1;
position: absolute;
bottom: 0px;
}
This should be working right? For some reason it just doesn't. Is it Wordpress? Never had this problem before and I have already gone through and cleaned up a lot of issues that may have caused it.
EDIT:
Silly me... I forgot the html here.
Right now it has nothing in it so it is just:
<div class="footer"></div>
I have it like that just to test it.
To see what is happening you can visit it here:
http://www.yenrac.net/theme
I hope that helps clarify some things.
I have also created this theme from scratch.
If I got your question right, this should work:
http://jsfiddle.net/9qq1dtuf/
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 170px;
}
.footer {
width: 100%;
height: 150px;
background: #3167b1;
position: absolute;
bottom: 0px; left: 0;
}
Please try bellow css
.footer {
position: fixed;
bottom: 0;
height: 150px;
background: #3167b1;
width: 100%;
left: 0;
}
<div class='footer'>
</div>
Well, I doubt it's Wordpress ...unless you are using a pre-made theme (or something along those lines). It's pretty hard to see what you've done without seeing the HTML. But anyways, heres what I think might have been the problem:
You have selected the footer element that has a class of "footer". I'm going to go ahead and make an educated guess that you meant to select the footer element by its name (NOT it's class). So maybe it's just a small little tiny bitty fix (i.e. remove the "." before footer in your CSS):
footer {
width: 100%;
height: 150px;
background: #3167b1;
position: absolute;
bottom: 0px;
}
Just add this to your css:
body {
margin: 0;
padding: 0;
background: #efefef;
font-family: 'Lato', serif;
padding-bottom: 174px; //add this line - height of footer + margin from content
}
I added 24px margin from content as an example. It would be best if you added this to your css:
* {
box-sizing: border-box;
}
or just for the body
body {
box-sizing: border-box;
}
So as your added padding does not add to your height and you get unnecessary scroll-bars.
I have a simple for some but I can't solve the problem for some time now.
I have the problem pasted here on JSFiddle.
I wanted to make div[id='content'] to fill-in the remaining height. I've followed some tutorials on CSS about display: table and display:table-row yet, I can't have it work on mine.
Thanks in advance you would help me big-time.
You need to add:
html{
height:100%;
}
Demo Fiddle
This gives your viewport a size from which the 100% assigned to the body can be calculated, otherwise it is effectively 100% of nothing. You may also want to add a % to the height value for body
Add this:
html, body, html > body, html body {
height:100%;
min-height:100%;
}
The many expressions are for all browsers, IE etc is kinda buggy with only html { height: 100%; }
fiddle
Try this css using position fixed
body {
margin: 0px;
width: 100%;
height: 100%;
background: red;
}
#nav {
height: 25px;
background: blue;
}
#content {
height: 100%;
background: green;
position: fixed;
bottom: 0px;
top: 25px;
width: 100%;
}
Use the CSS min-height property.. I normally set this using java scripts screen.height - header height - footer height..
Regards
Adam
I want to set my wrapper to be 100% height. But I am unable to do so despite setting the height to 100%.
Currently, My main_wrapper is empty. It should give me a background color of red.
My aim is to have a footer at the bottom using fixed but that is off topic. But it will be good if someone could give a link for position fixed.
<html>
<head runat="server">
</head>
<body class="body">
<form id="form1" runat="server">
<div id="main_wrapper">
</div>
<div class="clear"></div>
</form>
</body>
</html>
* {
margin: 0; padding: 0;
border: none;
box-sizing: border-box;
-moz-box-sizing: border-box; /* Firefox */
-webkit-box-sizing: border-box; /* Safari */
}
.clear {
clear: both;
}
html {
margin: 0;
width: 100%;
height: 100%;
/* min-width: 640px; min-height: 480px;*/
}
body {
margin: 0; /*Top and Bottom 0, Left and Right auto */
width: 100%;
height: 100%;
}
.body #main_wrapper {
margin: 0;
width: 100%;
height: 100%;
backgroud: #f00;
}
#form1 #main_wrapper {
margin: 0;
width: 100%;
height: 100%;
background:#f00;
min-width: 640px;
min-height: 480px;
}
maybe it's just typo :
.body #main_wrapper {
margin: 0;
width: 100%;
height: 100%;
backgroud: #f00; } <<-- typo
There is nothing wrong with your code.
You are setting your divs height and width correctly but you forget that your div is inside a form, which you are not specifying the height/width.
Just add
#form1{ width: 100%; height: 100%; }
To your css and it will work fine.
EXAMPLE
er, yeah... check out http://jsfiddle.net/5PZcq/2/
#main_wrapper {
position:absolute;
margin: 0;
width: 100%;
height: 90%;
background: #f00;
}
#footer {
position:absolute;
top:90%;
height: 10%;
width: 100%;
background: blue;
}
I think this captures whats going here.
In order to control a div's size with percentages, you have to declare it position:absolute. The clear thing is cool but only works with floating divs. In my example I have the main div (90% tall) and a footer div (10% tall) with opacity less than one I can see entries stuck in the clear, but when the opacity line is removed, the 'clear' div disappears behind the main red div.
So the question is, why do you even need the clear thing at all? Obviously I can't tell the complete scope of your project. Does this example make more sense?