add CSS animation to a website with background picture - html

The question is very silly but I've never created a webpage so please do not immediately downvote. AND please don't tell me to watch totorials, I really need to do something like described below only once. For some reasons, I need to make a really simple webpage, containing only a background picture and a CSS3 heart animation I found around. I need the CSS heart animation to be postioned on the left corner with a 100px margin from bottom, overlaying the other image I use as background What do I need to add to HTML to achieve that?
my HTML
<!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" />
<title>Test page</title>
</style>
</head>
<body/>
<center><img src="sbg.jpg" width="1280" height="800" alt="bg" /></center>
</body>
</html>
And the CSS I'm trying to use
SO has very poor CSS formatting so I added the CSS code to pastebin.
Please note that I never worked with CSS and need a detailed explanation. Thanks.

Create a
<div id='bigwrapper></div>
and style it with
#bigwrapper{
width:100%;
height:100%:
}
and the picture of your heart in there. After that, apply the needed CSS
The HTML markup needs work, because without properly formatted tags, several things may not work. You need to open and close tags properly.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test page</title>
<style></style>
</head>
<body>
<center><img src="sbg.jpg" width="1280" height="800" alt="bg" /></center>
</body>
</html>
The center tag has been deprecated in HTML5, and the transitions you are using only work with HTML5 and CSS3.

Related

How can I write a text on a picture in an e-mail (inline css)

I create an html design in mail this code works in any browser but I try email design but it doesn't work.
Can you help me ?
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="x-apple-disable-message-reformatting">
</head>
<body>
<div style="position: absolute;">
<img style="position: static; width: 550px;"
src="imageUrl" alt="sss"/>
</div>
<h1 style="position: absolute; color: black; margin-top: 120px; margin-left: 150px;">Person name</h1>
</body>
</html>
I've tried;
table background and body background. Doesn't work.
I need to show my image and text. But it's not working. It just shows my text. Actually the css code works, but the image looks separate image.
Text should appear on the picture.
I tried multiple methods. Gmail, Outlook etc. I've seen mail providers block css codes. Thanks for the comment. That's why I'm going to use simple backgrounds.

HTML Simple Holding Page not visible on newer browsers e.g. Chrome and Firefox

I want to update an existing/simple holding page on my domain in html.
Unfortunately, I've noticed that this page doesn't seem to appear on newer browsers such as Chrome and Firefox and only seems to load up properly on Internet Explorer.
Is there any advice you could give me to help overcome this issue please?
Thanks
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>"TITLE HERE"</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body style="background:ffffff url('LOGO.jpg') no-repeat center center">
</a>
</body>
</html>
<!--#easybanner4-->
To make a simple HTML page visible by most modern browsers it's better to use HTML5 so first, instead of using <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> just use <!DOCTYPE html>...
About your code, you can fix it by using something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- or <meta charset="iso-8859-1"> -->
<meta name="viewport" content="width=device-width">
<title>"TITLE HERE"</title>
<style>
body {
background:#ffffff url('LOGO.jpg') no-repeat center fixed;
}
</style>
</head>
<body>
link
</body>
</html>

Height in percentage problem in HTML

When the following is rendered, the height parameter of image (img) isn't considered. However, if I vary the width in terms of % for example 80%, it resizes and aspect ratio is intact. If I mention height in terms of px it works. Problems occur only for height being in % and in all browsers.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<img src="image.jpg" alt="Image" border="0" height="15%" width="100%" />
</body>
</html>
If we remove "http://www.w3.org/TR/html4/loose.dtd" from doctype as shown below, % works for height but any padding given to image won't be considered in IE but works fine in rest of browsers.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<img src="image.jpg" alt="Image" border="0" height="15%" width="100%" />
</body>
</html>
I have tried using YUI 3 api for CSS Reset. While it removes all default padding of browsers, it wont solve my problem. Any workaround available ?
Thanks.
Adding the following CSS to my CSS file did the trick.
html, body {
height: 100%;
margin: 0;
padding: 0;
}
Thanks me :D

Rounded Corner box using CSS with Nifty not Working, help me

Im trying to put a rounded rectangle using Nifty technique. But not working help me. My Code is Below
st.html
<!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" />
<title>Untitled Document</title>
<script type="text/javascript" src="nifty.js"></script>
<link href="niftyCorners.css" rel="stylesheet" type="text/css" />
<link href="niftyPrint.css" rel="stylesheet" type="text/css" />
<link href="stm.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
window.onload=function(){
if(!NiftyCheck())
return;
Rounded("div.indian","#377CB1","#9BD1FA");
}
</script>
</head>
<body>
<div class="indian">
<p>I am an Indian</p>
</body>
</html>
stm.css
#charset "utf-8";
/* CSS Document */
.indian
{
height:300px;
width:300px;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:18px;
}
Help me
Your <div class="indian"> is not closed. This is probably keeping the Javascript from finding the <div> in the DOM.
You need to set the "media" for your print stylesheet. The print stylesheet hides all of the work that the Nifty JS does.
You are not setting background colors for the page or the "indian" <div>. Without doing this, the effect will not work correctly.
I don't think that setting the height of the "indian" <div> is supported when using the Nifty technique.
Correcting these errors, your code works as seen here: http://demo.raleighbuckner.com/so/1277789/
Also, you should probably use the newer version of the Nifty technique found here: http://www.html.it/articoli/niftycube/index.html
Your HTML is incorrect. You are missing a closing DIV:
<body>
<div class="indian">
<p>I am an Indian</p>
</div> <!-- This was missing -->
</body>
Also, you're using the old version of Nifty. Try the newer version: http://www.html.it/articoli/niftycube/index.html

Set Page Top Left using Meta Tags - HTML

I want to set Top and Left position of MY Page using Meta Tags
Kindly suggest some solution
I don't think you are looking for meta tags, as in <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />. You are probably looking for CSS and possibly a <div> tag:
<style type="text/css">
div.topLeft {
top:0;
left:0;
}
</style>
<div class="topLeft">In the top left</div>
The CSS should probably end up in CSS file linked throught a <link ... /> tag and you'll probably have other HTML including <html>, <head> and <body> tags.
I don't think its possible.