PDA

Click to See Complete Forum and Search --> : image overlap

nildarb
10-12-2005, 04:59 PM
New to this forum and And learning HTML. I'm using a background img and an image for a banner and links (on left side) . My problem is that the background shows above , to the left, and at the bottom of the of the other images . Other than combining the images is there a way toget rid of this "overlap ". Does not matter what browser, editor, etc.
Daniel T
10-12-2005, 05:04 PM
I don't quite understand what you mean, could you post an example page or code so we can take a look? Linking to a page would help us the most.
nildarb
10-12-2005, 07:27 PM
I haven't uploaded to a website yet .The background image extends under the other images and shows at the extreme left side by a few pixels. This also happens on the top. It has to be something very simple ; I just can't find it in any tutorials . Here is the code :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>abcdefg Home</title>
</head>
<body
style="background-image: url(file:///C:/Documents%20and%20Settings/Brad/My%20Documents/Web%20Page/Web%20Page/Canvas.bmp);">
<img src="skybanner.jpg"><img src="mesquiteburl.bmp">
</body>
</html>
Daniel T
10-12-2005, 09:17 PM
Would you be able to upload your images aswell? Also, it might help if you used a valid doctype (http://www.alistapart.com/stories/doctype/).
KDLA
10-13-2005, 03:40 PM
You need to use CSS to control this. Normally, images have an "implied" padding around them, especially in IE. You've got to override that with a style tag.

Try this approach:
<img src="skybanner.jpg" style="margin: 0; padding: 0;"><img src="mesquiteburl.bmp" style="margin: 0; padding: 0;">

If not that, this:
<body
style="background-image: url(file:///C:/Documents%20and%20Settings/Brad/My%20Documents/Web%20Page/Web%20Page/Canvas.bmp); padding: 0;">

You can adjust those numerical settings to whatever works. Margin is the space around the object from the page border; padding is the space between objects.

http://www.w3schools.com/css/css_margin.asp
http://www.w3schools.com/css/css_padding.asp

KDLA
Daniel T
10-13-2005, 03:57 PM
Actually, images don't have a default margin/padding...
KDLA
10-13-2005, 07:06 PM
I meant when you're trying to align an inserted image with a background. IE gives it to them - about 4px - just enough to be annoying.
nildarb
10-14-2005, 03:13 PM
Thanks for ya'lls help . That was exactly what I was curious about . I guess I just keep need to keep on reading . :)