I am trying to show an entire website inside an html page. But it is looking at my local resources and showing file not found.
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<style>
body {
margin: 0; /* Reset default margin */
}
iframe {
display: block; /* iframes are inline by default */
background: #000;
border: none; /* Reset default border */
height: 100vh; /* Viewport-relative units */
width: 100vw;
}
</style>
<head>
<meta charset="utf-8" />
<title>Test page</title>
</head>
<body>
<iframe src="http://stackoverflow.com/questions/3982422/full-screen-iframe" />
</body>
</html>
If you have changed anything in URL. Please clear your cache and try again. (Like if you didn't used http:// first and now added that )
Related
I'm relatively new to Front End development, and have been trying to improve my core CSS skills.
I've come across a quirk between Edge (Chromium) and Chrome which does not make much sense to me.
I've attached two images of the same example index.html page opened in both Edge and Chrome.
You can see that in Chrome the text fits fine, but in Edge the text is cut in half! Does Edge do something different with the top margins?
Here is my attached HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./assets/css/style.css" type="text/css">
<title>Hello World</title>
</head>
<body>
<header>Hello, World!</header>
</body>
</html>
And the css:
html, body {
margin: 0;
padding: 0;
}
body {
background-color: #FFFFFF;
width: 100vw;
}
header {
background-color: rgb(115, 165, 216);
}
header {
width: 100vw;
height: 60px;
}
Thanks for your help! :)
This question already has answers here:
Adding external CSS in an HTML file
(5 answers)
Closed 2 years ago.
So I tried displaying an image by making a selector class with a background-image attribute then calling it using the <div> tag. The first time the selector class was between the <head> tags. Everything seems to work fine:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
margin: 0;
}
.bg {
/* The image used */
background-image: url("images.jpeg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-size: cover;
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
</html>
But when I put the selector class inside a separate CSS file, it doesn’t seem to work. Here is the code for the HTML file:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
margin: 0;
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
</html>
Here’s for the CSS:
.bg {
/* The image used */
background-image: url("images.jpeg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-size: cover;
}
Could someone please kindly tell me what I did wrong? I thank you in advance!
Don't forget to import your separate css file on your html page :
<link rel="stylesheet" href="style.css">
And be careful for the right path.
Add a link tag inside of head in your HTML to connect your styles to the HTML.
<head>
<link rel="stylesheet" href="xxx.css">
</head>
Replace xxx.css with the path to your css file.
Check the Mozilla docs for details.
I am trying to force a page break on to the printed version of my page. I am doing this by styling sections that I want to break into a new page. The problem I am having is that when I print an empty page is inserted between the elements. So the page break is working but adding an extra blank page between.
For example the below code should print two pages but it actually prints 4 in total (the two I want and two blank pages).
here is the full html code of the page , including css below;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<title>DEMO</title>
<style type="text/css">
/* JUST IMPORTS , RESTS & MINIMAL DEFAULTS */
/* CSS reset */
* {
padding: 0;
margin: 0;
}
.container-flex-column {
display: flex;
flex-direction: column;
}
.page-width-mobi {
min-width: 1072px;
max-width: 1072px;
}
.new-page {
page-break-before: always;
box-sizing: border-box;
border-bottom: solid lightgray 20px;
}
.page-size-mobi {
min-height: 1505px;
max-height: 1505px;
min-width: 1072px;
max-width: 1072px;
}
</style>
</head>
<body>
<main class="container-flex-column page-width-mobi">
<section class="new-page page-size-mobi">
<h1>Page 1</h1>
</section>
<section class="new-page page-size-mobi">
<h1>Page 2</h1>
</section>
</main>
</body>
</html>
The problem I was having was that I was printing the document with an old version of safari. Safari did not consistently work with the break-before command. I was able to produce the desired outcome printing in an up to date version of chrome
The break commands and the #page css commands are new functionality and not widely supported
I want to write a div for every print page. So i did height of div 100%. Normally in every browser it is working well. But when i print this page it is not working in Chrome.
<!DOCTYPE HTL>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex">
<meta http-equiv="cache-control" content="no-cache">
<title>Brove.NET ISO Yazılımı</title>
<style>
html,body{
padding:0;
margin:0;
height:100%;
width:100%;
}
.sayfa{
height: 100%;
width: 768px;
}
</style>
</head>
<body>
<div class="sayfa" style="background-color:#666666">fds</div>
<div class="sayfa" style="background-color:#cccccc">fds</div>
<div class="sayfa" style="background-color:#aaaaaa">fds</div>
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
</body>
</html>
This is solution, man...
Try this code that is
#media print and (-webkit-min-device-pixel-ratio:0) {
.sayfa{
height: 1101px;
width: 768px;
}
}
This CSS/Chrome issue has been gone over here:
height 100% in chrome
Hope this helps.
Set the width and height of your html and body elements to 100%:
<style>
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
}
</style>
I can't find any documentation on this bug, but it's definitely a bug, no doubt about it.
Your code will execute perfectly in non-Webkit browsers (I'm assuming Safari does the same thing) and shows up fine on the screen, then goes into a magic can of fail upon clicking print, right? What's a guy to do?
Answer, give the HTML and BODY tags a defined height in an "actual" measurement, not percents:
html, body {
margin: 0;
padding: 0;
/* etc */
height: 880px;
}
div.sayfa {
height: 33%;
}
The pages print the same from Firefox 14 and Chrome 19+ using the styles above.
My experiments yielded a printed-page height of 880 pixels for the printer we were using, your mileage will probably vary. EMs work, too, but that caused too many headaches, so I figure a definitive pixel value would work best.
It's a messy workaround, but at least it actually works.
I have here my codes for html and css. I dont seem to catch the problem on why my images wont load or show-up. I tried them to load both on firefox and chrome.
My problem is not on jsfiddle.
And here is my folder structure:
localhost/website/img
localhost/website/css
localhost/website
http://jsfiddle.net/p8eS3/1/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="description" />
<meta name="author" content="author" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
<title>Title</title>
</head>
<body>
<div id="container">
<div id="sidebar">
<div id="logo"></div>
</div>
</div>
</body>
</html>
#charset "utf-8";
/* Body */
#body {
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
background: #ccc;
}
/* Container */
#container {
width: 100%;
background: #000;
}
/* Sidebar */
#sidebar {
background: url(../img/sidebar.png) repeat-y;
width: 40%;
float: left;
position: fixed;
}
/* Logo */
#logo {
background-image: url(../img/logo.png);
}
You have two images, they're added as background images for divs, but those divs do not have layout since the sidebar lacks height and the logo height and width. Which means they do not show up at all. Give them height/width to fix it.
If not the paths to the images are wrong.
The images aren't loading as jsfiddle won't recognise ../img/sidebar.png as this will look locally on their server.
I'm assuming that this is not your initial problem though, and that you are experiencing problems getting the right path on your application.
I would recommend 'rooting' your image url so that it works from the root folder to the location like:
background: url(/img/sidebar.png) repeat-y;
Could be your folder structure. Are the images in a folder the same level as your html file, or a level up. If they're the same level, try replacing ../images with ./images
Your path to the images is most likely off. This will be hard to debug via a js fiddle. Can you post your directory structure?
It's because your divs don't actually take up any space, so you can't see any background. See your modified fiddle for an example of how to fix this.
Alternatively, you might want to consider using HTML img tags.
You have to specify a width and a height to your #logo element so that the BG can appear.
Try,
#sidebar {
background: url(../img/sidebar.png) repeat-y;
width: 40px; /* your background width */
height:60px; /* your background height */
float: left;
position: fixed;
}
/* Logo */
#logo {
background: url(../img/logo.png) 0 0 no-repeat;
width: 40px; /* your logo width */
height:60px; /* your logo height */
}