I am writing a website and am having an odd problem.
#Text {
margin-left:15vw;
width:70vw;
background-color:white;
opacity:0.8;
vertical-align:center;
}
body {
margin:0;
}
<!DOCTYPE html>
<html>
<head>
<title>SomeTitle</title>
<link rel="stylesheet" type="text/css" href="./main.css">
</head>
<body>
<img src="someUnimportantImage.jpg" height="100vh">
<div id="text">
<p>Text</p>
<p>More text</p>
<p>Even more text</p>
</div>
</body>
</html>
My problem is that when I load my page in google chrome (I haven't tried other browsers),
there is a mysterious white space at the top that I can't get rid of
the <html> element doesn't fill the browers height, and therefore
setting the images height="100vh" makes it fill the <html> element, but not the page.
What I need is for <html> to fill the page and for the white space at the top to disappear.
EDIT
I got the whitespace to disapear by using the code at meyerweb.com/eric/tools/css/reset.
When you use viewport units, you don't need to worry about the height/width of the <html> element. However you should move the inline height="100vh" into the CSS instead. And I don't see any "mysterious white space at the top" since you already set body{margin:0;}, it might be caused by your other styles if you still see it.
img {
height:100vh;
}
And be aware, CSS class/id names are case sensitive, #Text and #text are not the same.
body {
margin:0;
}
img {
height:100vh;
}
#text {
margin-left:15vw;
width:70vw;
background-color:white;
opacity:0.8;
vertical-align:center;
}
<img src="//dummyimage.com/500">
<div id="text">
<p>Text</p>
<p>More text</p>
<p>Even more text</p>
</div>
Edit: The white space might be from the <p> tag, as it has some default top and bottom margin from the browser.
i was going through this tutorial, to allign two images inside a dive vertically so that there is no space between them, please take a look
http://mynag.kopiblog.com/2012/11/28/solved-remove-space-below-an-image-in-div-when-vertically-align/
i wrote my code like this
<head>
<style type=”text/css”>
.imgclass
{
background-color:#1122CC;
text-align:center;
}
img
{
display:block;
}
</style>
</head>
<body>
<div class=”imgclass”>
<img src=”pictop.jpg”>
</div>
<div>
<img src=”picbottom.jpg”>
</div>
</body>
</html>
but it didnt workrd as shown in the second pic shown in the link i specified.
What am i doing wrong here.
i want them as two pics alined vertically without any space.
please help
Please replace your quotes with the right ones, “ is not ".
The code is missing doctype and opening html-tag.
Try this:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.imgclass
{
background-color:#1122CC;
text-align:center;
}
img
{
display:block;
}
</style>
</head>
<body>
<div class="imgclass">
<img src="http://image.tutorvista.com/cms/images/38/square1.jpg">
</div>
<div>
<img src="http://image.tutorvista.com/cms/images/38/square1.jpg">
</div>
</body>
</html>
Your result should look like this:
http://pbrd.co/1qt52ku
Tested in Chrome. Other browser may need fixes via line-height, margin, and padding.
I'm trying to create a html document to be shown on iphone and ipad.
It's a simple one but I've some problems with the image position and I'm not sure if I should use relative or absolute position.
What I'd like to have is an image in the center of the page, (a litte bit under the top of the screen) and a youtube iframe centered under the image.
This code is working on portrait but not on landscape as the image will not be in the center if the page.
I'd like also to have some space between the image and the youtube frame.
This is my actual code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta content="width=device-width;" initial-scale="1.0;" maximum-scale="2.0;" name="viewport" user-scalable="1;" />
<body bgcolor="#9fa2b5">
<div align="center">
<img style="position:relative; TOP:15px; LEFT:65px; "src="http://mysite.jpg" alt="image is missing" width=90 height=130>
<p>
</p>
<iframe width="320" height="180" src="http://www.youtube.com/embed" frameborder="1" ></iframe>
</div>
</body>
</html>
There are several different techniques to centre page contents and a few are discussed at this article on w3.org. You are using the align attribute on the div, and it should work. However, in the image tag you are also adding left:65px; which will move the image 65px to the right of centre.
In a pure css solution, you should do the following to the html.
<div class="container">
<img class="rndImage" src="http://myimage.org" alt="image is missing"/>
<iframe class="youtube" src="http://www.youtube.com/embed" frameborder="1" ></iframe>
</div>
And add the following CSS in style block or in an attached css style sheet.
iframe.youtube
{
width:320px;
height:180px;
display:block;
margin:15px auto;
}
img.rndImage
{
display:block;
width:90px;
height:130px;
margin:15px auto;
}
div.container
{
position:relative;
width:100%;
margin:5px, auto;
}
The above code separates out the style from the html and links it by using classes. You can see a working example on JsFiddle.Net.
Is there a way to make the height of the <iframe> reach exactly the bottom of the page? It is hard to judge by using height:xx%, and it might be dependent on browser.
The code is below:
<!DOCTYPE html>
<html>
<body style="margin:0">
<p style="margin:10px"> hello </p>
<iframe src="http://www.weather.com" style="width:100%; height:95%"></iframe>
</body>
</html>
Using JavaScript/jQuery, you can precisely set the right dimension for the IFRAME element, without the need to access to DOM of the frame itself (cross-domain issues), relying on tables or absolute positioning (useless if the content above the frame is dynamic in height):
$(function() {
var aboveHeight = $("#aboveFrame").outerHeight(true);
$(window).resize(function() {
$('#frame').height( $(window).height() - aboveHeight );
}).resize();
});
Example: http://jsfiddle.net/hongaar/jsdYz/
As annoying as it is to use tables for layout, they're still the best way to consistently handle vertical dimensions. The following still displays a few white pixels around the edge of the iframe, and has an extra scrollbar in some versions of Firefox, but is as close as I've been able to achieve:
<!DOCTYPE html>
<html style="padding:0; margin:0; height:100%">
<body style="padding:0; margin:0; height:100%">
<table style="border:0; padding:0; margin:0; height:100%; width:100%">
<tr style="border:0; padding:0; margin:0">
<td style="border:0; padding:0; margin:0">
<p style="margin:10px"> hello </p>
</td>
</tr>
<tr style="border:0; padding:0; margin:0">
<td style="border:0; padding:0; margin:0; height:100%">
<iframe src="http://www.weather.com" style="border:0; padding:0; margin:0; width:100%; height:100%"></iframe>
</td>
</tr>
</table>
</body>
</html>
If you really want to avoid the table elements, you might get some traction out of div tags with display:table, display:table-row, and display:table-cell, but be prepared for even more annoying quirks in certain browsers.
<!DOCTYPE html>
<html style="height:100%">
<body style="margin:0; >
<p style="margin:10px"> hello </p>
<iframe src="http://www.weather.com" style="width:100%; height:100%"></iframe>
</body>
</html>
Well, this seems to be a tricky but you have to keep <html> OR <body> tag height 100% to achieve this
If your <p> tag content is fixed then you can try this way by adjusting the height of <p> and <iframe> relatively..and you have to keep <html> OR <body> tag height 100% otherwise it wont work
I had this same problem recently. I believe you are wanting to expand the height to fit the content that is dynamically loaded. This works like a dream. :)
<!--This script will auto size the height. Must set the id for it to work.-->
<script type="text/javascript">
<!--//
function sizeFrame() {
var F = document.getElementById("myFrame");
if(F.contentDocument) {
F.height = F.contentDocument.documentElement.scrollHeight+30; //FF 3.0.11, Opera 9.63, and Chrome
}
else {
F.height = F.contentWindow.document.body.scrollHeight+30; //IE6, IE7 and Chrome
}
}
window.onload=sizeFrame;
//-->
</script>
Iframe which is a child to the body element is of 100% height with it's parent and before you can make iframe full page you have to declare the height of the body and make it full page too.
Try this. (I thought it would be better if you put your CSS in an external file or just inside the head)
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
body {height:100%;}
iframe {height:100%;width:100%;}
</style>
</head>
<body style="margin:0">
<p style="margin:10px"> hello </p>
<iframe src="http://www.weather.com"></iframe>
</body>
</html>
Demo
<!DOCTYPE html>
<html>
<head>
<style>
html, body
{
height: 100%;
margin:0px;
padding:0px;
}
#divHeader
{
height:25px;
}
#divContent
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
height:100%;
width:100%;
margin-top:-25px;
padding-top:25px;
overflow:hidden;
}
iframe
{
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="divHeader">
header
</div>
<div id="divContent">
<iframe src="http://www.weather.com"></iframe>
</div>
</body>
</html>
you can't. I tried this before, but it is an issue with the iframe it will remain this way, until they find a way to expose the height of the inner html document... following the standards. If you remove the DOCTYPE of the inner document, I guess you'll have some access to it. Make Iframe to fit 100% of container's remaining height
Try this...
<!DOCTYPE html>
<html>
<head>
<style>
html, body
{
height: 100%;
margin:0px;
padding:0px;
}
</style>
</head>
<body>
<iframe src="http://www.weather.com" onload="this.height = document.body.offsetHeight;"></iframe>
</body>
</html>
You could check the demo here
I have always used height:100vh; to give you 100% of the view port
I'm looking to make a custom CSS webpage, but I'm having difficulty getting all the pictures to show unless I make the min-height around 900px. The index code looks like this,
<head>
<style type="text/css">
#import url("stylesheets/mystyle.css");
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Small Biz Labs</title>
</head>
<body>
<div class="wrap">
<div class="conatiner" align="center">
<div class="header">
<center>
<img src="images/logo.png" width="200" height="100" />
</center>
</div>
<div class="text">
<h1>Maybe a header</h1>
<p>some text</p>
</div>
</div>
</div>
</body>
</html>
and the CSS code looks like this...
/*
Document : mystyle
Created on : Jul 18, 2012, 1:12:14 PM
Author : someguy
Description:
Purpose of the stylesheet follows.
*/
html {
background:url(../images/bodybackground.jpg) repeat;
margin:0px;
max-height:100%
}
body {
background:url(../images/paperbackground.jpg) repeat-y center;
margin:0px;
margin:0px;
max-height:100%;
}
.wrap {
background:url(../images/new_backdrop.png) repeat-x center bottom fixed;
margin:0px;
min-height:1050px;
}
.container {
max-width:600px;
}
.header {
}
.text {
text-align:left;
max-width:600px;
padding-left:10px;
}
I'm trying to get the bottles to float over the two textures I made. Allowing for text/images etc. to be placed in the smaller lighter version of the paper texture. So far I can only make this happen if I set the max-height large enough. Any suggestions on how to adjust my code?
The images I'm using can't be posted until I get more points, but if you want to see them let me know and ill shoot you the jpgs and the one png (the one that floats).
If you want to see a semi live version
jsfiddle: http://jsfiddle.net/wKtGv/
Try adding height:100%; to both body and .wrap
http://jsfiddle.net/wKtGv/13/