For some reason the page i've made has stopped showing the image, it's just showing a small broken page icon, even though it showed it before. I haven't changed the name of the image or its location.
I'm also trying to create a button, but it's not showing up
Here's the html code:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link href="design.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="pic">
<img src="C:\Users\A\Desktop\Untitled.jpg" id="pic">
</div>
<div class='banner'>
</div>
<div class="button">
</div>
</body>
</html>
and here's the css code:
#pic {
position: absolute;
margin-left: 40px;
margin-top: 4px;
z-index: 1;
}
.banner {
height: 100px;
width: 100%;
background-color: #FFFFFF;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
.button {
height: 50px;
width: 120px;
background-color: #BCD2EE;
border-color: #6495ED;
z-index: 3;
}
Body {
background-color: #E8E8E8;
}
The page just shows the white banner at the top of the page and the grey background, but the image just shows a small broken page icon, and the button isn't being created.
You are referencing a file from your local file system. For security reasons this is not possible, and should never be possible. Upload the image to your server, or move it to the correct folder if you use localhost, and reference the image via an url relative to the domainname.
You're using a absolute address to the image, my bet is that you either moved the file or renamed it, or even deleted it. Just make sure the path is correct and it should work.
By the way, the <title> tag should go inside the <head>.
Related
I am generating PDF using ejs file in nodejs. Is it possible to add Footer on every page of the generated PDF?
Here is my ejs file:
<!DOCTYPE html>
<html>
...
<head>
<style>
footer{
background-color: red;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
</head>
<body> ... </body>
<footer>
<p>this is footer</p>
</footer>
</html>
here is my nodejs code snippet:
ejs.renderFile(path.join(__dirname, './views', "report-template.ejs"), { invoicedata: JSON.parse(results[0].jsondata), moment:moment }, (fileerr, data) => {
if (fileerr) {
console.log("Error!", fileerr);
} else {
let options = {
"height": "11.7in",
"width": "8.3in",
}
pdf.create(data, options).toFile("report.pdf", function (err, data) {
if (err) {
console.log("error!!");
} else {
console.log("file created successfully");
}
})
}
})
The output pdf getting is:
screenshot of pdf
Whilst it is fairly easy to emulate page breaks headers and footers in HTML they are not natural for a format that is designed for unfettered page widths or lengths.
It is common to describe HTML objects as % of a variable canvas the conversion to the fixed Cartesian pages needed by PDF is prone to rounding errors.
Here as an example, the primary aim was to emulate a PDF layout in Microsoft Edge (Chrome based) but the fiddle factors that work fairly well for view and print in one browser will need adjustments in another.
SEE the inset where the page for exactly the same code and target printer which is perfect in edge print preview, is subject to creep-age in Internet Explore, on the same printer defaults !! That crap-page thus often requires minor tweaking to keep it in sync, leading to two different copies of source !
<!DOCTYPE html>
<html><head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Dynamic Styles: NewPage Breaking Headline News</title>
<!--
Generic break values
NewPage break values
Column break values
Region break values
Global values
-->
<style type="text/css" media="all">
.body {
position: absolute;
}
#page {
break-before: auto;
margin: 0px;
width: 736px;
height: 1103px;
position: relative;
}
h1 {
text-align: center;
}
#page-break {
position: absolute;
bottom: 0;
width: 100%;
height: 20px;
padding: 20px;
background-color: red;
text-align: center;
}
</style>
</head>
<body>
<div id="page">
<div>
<br><h1>Headline on Page 1</h1>
...
more content on Page 1
...
</div>
<div id="page-break"> Footline on Page 1 </div>
</div>
<div id="page">
<br><h1>Headline on Page 2</h1>
...
more content on Page 2
...
<div id="page-break"> Footline on Page 2 </div>
</div>
<div id="page">
<br><br><h1>Headline on Page 3</h1>
...
more content on Page 3
...
<div id="page-break"> Footline on Page 3 </div>
</div>
</body></html>
Maybe this CSS can help? I.e. change "absolute" position to fixed?
#media print {
footer {
position: fixed;
bottom: 0;
}
}
There were some comments in this question that might be helpful:
How to use HTML to print header and footer on every printed page of a document?
I am buliding a custom email template and i am trying to put text in a specific position on an image. This template is built dynamically via mustache on a camunda workflow model.
The codes below can be tested/viewed at w3schools
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
text-align: left;
color: white;
}
.top-left {
position: absolute;
top: 170px;
left: 250px;
}
</style>
</head>
<body>
<div class="container">
<img data-imagetype="External" src='img_snow_wide.jpg' width="1000" height="600">
<div class="top-left">{{happyBirthday}}</div>
</div>
</body>
</html>
As you may see {{happyBirthday}}, which will display values dynamically, is showing on the desired place on the image when using CODE A.
However the template received via email shows the value for {{happyBirthday}} below the image. I was able to get the snippet of code, CODE B, from the elements tab on chrome console via inspect,
CODE B
<div>
<style>
<!-- .rps_9d84 .x_container {
text-align: left;
color: white
}
.rps_9d84 .x_top-left {
top: 170px;
left: 250px;
color: #000080
}
-->
</style>
<div class="rps_9d84">
<div>
<div class="x_container">
<img data-imagetype="External" src="img_snow_wide.jpg" width="1000" height="600">
<div class="x_top-left">{{happyBirthday}}</div>
</div>
</div>
</div>
</div>
As you may see the two codes are similar in the key aspects of the css code i.e. top-left, which determines the position of the dynamic text on the image.
I am not an html expert and i do not see the difference between the two sets of code. Could someone point out what i am missing here ?
You are missing the position: absolute; property on .x_top-left
Since your top-left class element doesn't seem to apply the absolute position style (in CODE B), which will by default always be placed under or next to the previous element.
Try to set the position element with the !important flag.
.top-left {
position: absolute !important;
top: 170px;
left: 250px;
}
I'm new in html and css so i have a question.
I am messing around with some stuff but after placing some images on my page i can't click on my links anymore.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title>Rijschool Houben</title>
</head>
<body>
<div id="header"></div>
<div id="header-pic"><img src="image/test.png"></div>
<p>
<div id="nav-bar">
<ul>
<li>|Home|</li>
<li>Info|</li>
<li>Prijzen|</li>
<li>Acties|</li>
<li>Machtiging|</li>
<li>Theorie|</li>
<li>Begeleid rijden|</li>
<li>Bromfiets|</li>
<li>Contact|</li>
</ul>
</div>
</p>
<p>
<div id="icon-main">
<i class="fa fa-mobile" style="font-size:28px;"></i><a>046-4524501</a><br />
<i class="fa fa-paste" style="font-size:18px;"></i><a>raymond#rijschoolhouben.nl</a><br />
<i class="fa fa-facebook-official" style="font-size:20px;"></i><a>Volg ons op Facebook!</a>
</div>
</p>
<p>
<div id="img-1">
<img src="image/1.jpg" alt="Scooter" width="330px" height="400px"/>
</div>
<div id="img-2">
<img src="image/2.jpg" alt="Geslaagde 1" width="337px" height="400px"/>
</div>
<div id="img-3">
<img src="image/3.jpg" alt="Geslaagde 2" width="337px" height="400px"/>
</div>
<div id="img-4">
<img src="image/4.jpg" alt="Geslaagde 3" width="337px" height="400px" />
</div>
<div id="img-5">
<img src="image/5.jpg" alt="Geslaagde 4" width="337px" height="400px" />
</div>
<div id="img-6">
<img src="image/6.jpg" alt="Geslaagde 5" width="337px" height="400px" />
</div>
</p>
</body>
</html>
CSS:
div#header{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
background-color: white;
}
div#header-pic{
position: fixed;
height: 50px;
left: 500px;
}
div#nav-bar{
position: fixed;
padding-top: 130px;
left: 0;
width: 100%;
white-space: nowrap;
}
div#nav-bar ul{
list-style: none;
text-align: center;
background-color: #323232;
padding: 10px 0;
}
div#nav-bar li{
display: inline;
}
div#nav-bar li a{
text-decoration: none;
color: white;
padding: 14px 16px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
div#icon-main{
position: fixed;
color: #323232;
padding: 10px;
}
div#icon-main i{
padding: 5px;
}
div#icon-main a{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
div#img-1 {
position: fixed;
left: 0;
padding-top: 184px;
width: 100%;
}
div#img-2 {
position: fixed;
padding-top: 184px;
padding-left: 255px;
}
div#img-3 {
position: fixed;
padding-top: 184px;
padding-left: 915px;
}
div#img-4 {
position: fixed;
padding-top: 184px;
padding-left: 585px;
}
div#img-5{
position: fixed;
padding-top: 184px;
padding-left: 1245px;
}
div#img-6 {
position: fixed;
padding-top: 184px;
padding-left: 1575px;
}
i know the code is bad but i hope someone can help me!
Here is a fiddle.
-Ryan
I looked at your external code. Please add your HTML and CSS to your question in Stack Overflow.
From the external HTML you have the following code:
<a>046-4524501</a>
Which does not work as a link.
You have this code
Home
That works as you would expect it to.
Change this line:
<a>046-4524501</a>
to
046-4524501
Where the href="Where you want the link to go".
It's all about the value for "href"
I did notice you are doing non-responsive html which means it is not mobile friendly or will look the same in smaller browser windows.
Your code is messy but your doing okay.
First off wrap everything you are putting in the header in the header div
The images are floating up to the top over your nav due to the position:fixed
Remove all the empty <p></p> between your div's
Use floats on your images and width of a percentage of 100% plus wrap them in a container/div
If you need me to I can see if I can redo all your html and CSS but think for you would learn better to try it out for yourself.
You could always go look at the HTML5 boilerplate out there and use them to guide you on how to construct good code.
I see that you are trying to create a row of images. Instead of using a system of DIVs why don't you use the more flexible (and more responsive) structure of a list?
Then you can use float: for lining them up in a row and basic CSS to give them sizes. The images will be specified as a background for these li elements (better practice).
Like this: http://codepen.io/Attrexx/pen/KVvwXP
You are placing divs containing the images using padding. That's why you can not use links in the menu. Div blocks cover your links.
Try using something like:
selector {
position: absolute; /* or `fixed` like in your css; see below*/
top: 100px; /* pixels from the top */
left: 100px; /* pixels from the left */
/* you can also use `bottom` and `right` */
}
For example:
div#img-3 { /* or just `#img-3`; see below */
position: absolute;
top: 184px;
left: 915px;
}
Check this w3 schools article for more information on positioning.
Not related to the question:
If you are using CSS's id selector (#), I suggest not to use element selector (e.g. div). So rather than div#img-3 try using just #img-3.
Try avoiding using id selectors at all. You can use class rules, and happily after some time they will result in saving you a lot of work.
If you are using HTML5 then try using semantic elements.
Avoid using fixed position when you don't need to (your page is an example of such page).
Paragraphs (p) shouldn't be used in the same way as div. It may result in bad habit for semantic sites.
Rather than using positioning (position), experiment with float or different display types (e.g. inline-block). Use it only when it is really needed.
Read about HTML Responsive Web.
I'm currently having some trouble coding the navigation bar for a new website. I currently have it set up so that each 'link' (not currently hyperlinked) is in the form of an image. I am then using some free javascript code to display the current UTC time.
I want the links (images) to display in the center of the navigation bar and the outputted time to appear on the right of the navigation bar. I have managed to do this using the float:right; attribute on the tag however this then causes the centered images to move to the left slightly. I have been trying to stop them from moving but I've been unsuccessful, hence why I'm asking here. If anyone knows how I can keep the images completely centered with the javascript time to the right that would be great. Thanks!
HTML:
<html>
<head>
<title>Personnel Tracking System - E-3+</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<script language="JavaScript">
function tS(){ x=new Date(tN().getUTCFullYear(),tN().getUTCMonth(),tN().getUTCDate(),tN().getUTCHours(),tN().getUTCMinutes(),tN().getUTCSeconds()); x.setTime(x.getTime()); return x; }
function tN(){ return new Date(); }
function lZ(x){ return (x>9)?x:'0'+x; }
function y2(x){ x=(x<500)?x+1900:x; return String(x).substring(2,4) }
function dT(){ if(fr==0){ fr=1; document.write('<font size=2 face=Arial color=white><b><span id="tP">'+eval(oT)+'</span></b></font>'); } document.getElementById('tP').innerHTML=eval(oT); setTimeout('dT()',1000); }
var mN=new Array('Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'),fr=0,oT="tS().getDate()+' '+mN[tS().getMonth()]+' '+y2(tS().getYear())+' '+'~'+' '+lZ(tS().getHours())+':'+lZ(tS().getMinutes())+':'+lZ(tS().getSeconds())+' '";
</script>
</head>
<body>
<div id="navbar">
<center>
<img src="images/homebutton.png" />
<img src="images/e-3button.png" />
<img src="images/resignedbutton.png" />
<img src="images/firedbutton.png" />
<img src="images/desertersbutton.png" />
<img src="images/mosrosterbutton.png" />
<img src="images/divider.png" />
<p style="float:right;"><script language="JavaScript">dT();</script></p>
</center>
</div>
</body>
</html>
CSS:
html, body {
margin: 0;
padding: 0;
}
body {
background: #bababa;
}
#navbar {
background: url(images/navbarbg.png);
width: 100%;
height: 55px;
vertical-align: middle;
margin: 0;
}
img {
margin: 0;
padding: 0;
}
Maybe something like this:
#navbar {
position: relative;
background: url(images/navbarbg.png);
width: 100%;
height: 55px;
vertical-align: middle;
margin: 0;
}
#navbar p{
position: absolute;
top: 0;
right: 0;
}
Then remove the float from the p tag. Positioning something absolute will remove it from the flow of the container, so it won't push everything else around.
I'd like to add a png frame over a kwicks image slider, but when I do, I lose the interactivity.
How can I add a png frame over an element without losing the interactivity of the element below?
You can see the example here: www.jujumamablog.com/jujumama/dev.html
Below is the code for the dev page:
<!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" xml:lang="en" lang="en" dir="ltr">
<head>
<title>Kwicks Examples: Example 1</title>
<script src="http://jmar777.googlecode.com/svn/trunk/js/jquery-1.2.6.js" type="text/javascript"></script>
<script src="http://jmar777.googlecode.com/svn/trunk/js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="http://kwicks.googlecode.com/svn/branches/v1.5.1/Kwicks/jquery.kwicks-1.5.1.pack.js" type="text/javascript"></script>
<style type="text/css">
/* defaults for all examples */
.kwicks {
list-style: none;
position: relative;
margin: 5px 0;
padding: 0;
}
.kwicks li{
display: block;
overflow: hidden;
padding: 0;
cursor: pointer;
}
/* example 1 */
#example1 .kwicks li{
float: left;
width: 96px;
height: 200px;
margin-right: 2px;
}
#example1 #kwick1 {
background-color: #53b388;
}
#example1 #kwick2 {
background-color: #5a69a9;
}
#example1 #kwick3 {
background-color: #c26468;
}
#example1 #kwick4 {
background-color: #bf7cc7;
}
#example1 #kwick5 {
background-color: #bf7cc7;
margin-right: none;
}
#sliderFrame{
background: transparent url('sliderFrame.png') no-repeat scroll 0 0;
display: block;
height: 206px;
position: absolute;
// top: 150px;
width: 504px;
z-index: 99;
margin-top: -4px;
}
</style>
<script type="text/javascript">
$().ready(function() {
$('.kwicks').kwicks({
max : 205,
spacing : 5
});
});
</script>
</head>
<body>
<div id="example1">
<div id="sliderFrame"></div> <!-- This blocks ineteractivity -->
<ul class="kwicks">
<li id="kwick1"></li>
<li id="kwick2"></li>
<li id="kwick3"></li>
<li id="kwick4"></li>
<li id="kwick5"></li>
</ul>
</div>
<div style="clear:both;"></div>
<div id="example1">
<ul class="kwicks">
<li id="kwick1"></li>
<li id="kwick2"></li>
<li id="kwick3"></li>
<li id="kwick4"></li>
<li id="kwick5"></li>
</ul>
</div>
<div style="clear:both;"></div>
</body>
</html>
Thanks in advance
Unfortunately using z-index to 'layer' elements will cause the below elements to become non-interactive, but they are still obviously visible.
Therefore, there's two options here:
JavaScript - much like the coloured boxes below (layer 1), place a further element (layer 3) over the 'rounded corners' image (layer 2) but making the background-color: transparent for those interactable boxes, then referencing the JavaScript to move the 1st layer boxes as well as the 3rd layer boxes.
CSS - slice the rounded corner image to be used within those interactive boxes, and use them as background images. This would be a fair amount of work, trial and error to get it right but would mean no extra javascript or messing around with z-index.
Hope that helps, and doesn't confuse matters further :)
You can't place one element over another and retain the lower-level's interactivity. At least, not without using Javascript; and I can't think of a plugin or script that achieves what you want.
Could you use the image as some form of background for the element for which you want to retain the functionality?