Web Hosting Talk






PDA

View Full Version : Simple HTML Question - Help Needed

DataDork
05-09-2005, 01:30 PM
Good Morning Everyone!

I have a simple HTML question and I was hoping someone could answer it for me.

Here is the HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DataDork</title>
<style type="text/css">
body, html { height: 98%; }
#center { vertical-align: center; }
#container { width: 700px; margin: auto; height: 100%; }
</style>
<meta http-equiv="keywords" content="" />
<meta http-equiv="description" content="" />
<meta http-equiv="author" content="James Edmonds" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="shortcut icon" href="/favicon.ico" />
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" id="container">
<tr>
<td id="center"><img src="/images/datadork.gif" alt="DataDork" width="700" height="228" /></td>
</tr>
</table>
</body>
</html>

I need to insert a background image, called /images/background.gif and I am confused how to add it to the above code.

Simple?
the_pm
05-09-2005, 01:43 PM
Very simple. Where exactly do you need to insert it? Into the table? Into the entire page?

For the table, make the following addition to your #container rule:
#container { background: url(path/file.ext); width: 700px; margin: auto; height: 100%; }

For the entire page:
body { background: url(path/file.ext); }

You can do other things with the background, like tile it along an axis, shift its position so that it starts tiling from one of the nine points of the container (top left, top middle, top right, center left, center center, center right, bottom left, bottom middle, bottom right). You can also set the background to not repeat at all. If any of these items are of interest, give some more detail, and I'll give you the mark-up :)

How're things with the new sweetie?
DataDork
05-09-2005, 01:57 PM
lol, she is still in the training period but I am hopeful she will graduate with honors soon. lol

I need it for the entire page and, I am sorry to admit, I am confused were to insert "body { background: url(/images/background.gif); } correctly. Can you provide an example.

I really appreciate you taking a minute to help me out.
DataDork
05-09-2005, 02:01 PM
Figured it out. Thanks for your help....
the_pm
05-09-2005, 02:04 PM
Sure thing. That's a rule that would go into your stylesheet in the <head> section of your page.

The placement should look something like this:

body, html { height: 98%; }
body { background: url(/images/background.gif); }

By the way, if you ever end up with more content on a page than can fit on a screen, you're going to find that setting the body and html to 98% height will leave an odd gap at the bottom of the page. In the future, if you find yourself puzzled over this, there's your answer.

Also, you might find yourself wanting to remove the padding around the contents of your pages. The best way to do this is to expand upon the piece of CSS code I gave you so it looks like this:

body { background: url(/images/background.gif); margin: 0; padding: 0; }

HTH :)

Edit: Ah, just noticed you got it. Well good!
DataDork
05-09-2005, 02:13 PM
Here is the final result. After getting your reply, I added your suggestions. Does it look correct?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DataDork</title>
<style type="text/css">
body, html { height: 100%; }
body { background: url(/images/background.gif); margin: 0; padding: 0; }
#center { vertical-align: center; }
#container { width: 700px; margin: auto; height: 100%; }
</style>
<meta http-equiv="keywords" content="" />
<meta http-equiv="description" content="" />
<meta http-equiv="author" content="James Edmonds" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="shortcut icon" href="/favicon.ico" />
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" id="container">
<tr>
<td id="center"><img src="/images/datadork.gif" alt="DataDork" width="700" height="228" /></td>
</tr>
</table>
</body>
</html>

Thanks again for your time. I owe you one..
the_pm
05-09-2005, 02:21 PM
Looks correct to me, my friend. Does it work properly when you display it?
DataDork
05-09-2005, 02:51 PM
Originally posted by the_pm
Looks correct to me, my friend. Does it work properly when you display it?

Looks good on my end, when displayed.

DataDork (http://www.datadork.com)

Thanks again...
the_pm
05-09-2005, 02:55 PM
Yep, looks good :)

You're welcome.