Jump to content

Need help overlapping pictures in HTML!

AaronH

By AaronH
in HTML/XHTML

Recommended Posts

AaronH Newbie

AaronH

Posted
Posted

I've been trying to figure out how to get these jpegs:breakfast_icon.jpgredSpacer.jpglunch_icon.jpgredSpacer.jpgdinner_icon.jpgSterlingSilver_logo.jpgOn top of this one:ph_1.jpgI have this so far:<table background="" style="background-repeat:no-repeat" border="0" cellspacing="0" cellpadding="0" width="725" height="445"> <div style="position:relative;"> <img src="ph_1.jpg" width="725" height="445" border="0"> <center><h3>Feel free to browse through our fine menus <br />by clicking the PDF links below:</h3> <a href=""><img src="breakfast_icon.jpg" alt="Breakfast Menu Icon" width="300" height="95" border="0" /></a><br /> <img src="redSpacer.jpg" alt="spacer" width="300" height="20" border="0" /><br /> <a href=""><img src="lunch_icon.jpg" alt="Lunch Menu Icon" width="300" height="95" border="0" /></a><br /> <img src="redSpacer.jpg" alt="spacer" width="300" height="20" border="0" /><br /> <a href=""><img src="dinner_icon.jpg" alt="Dinner Menu Icon" width="300" height="95" border="0" /></a> </center> <br /> <div align="right"><a href=""><img src="SterlingSilver_logo.jpg" alt="Serling Silver Meats" width="55" height="55" border="0"></a> </td> </tr> </table> </td>...The pictures show up but they do not overlap. Any help would be much appreciated. Thank you.

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

Offhand I'd say ph_1.jpg needs to be a non-repeating background image somewhere. And what is going on with that table? It's missing some tags, but more important it's not needed. Stick with divs for positioning.

Link to comment
Share on other sites
AaronH Newbie

AaronH

Posted
  • Author
Posted
Offhand I'd say ph_1.jpg needs to be a non-repeating background image somewhere. And what is going on with that table? It's missing some tags, but more important it's not needed. Stick with divs for positioning.
I'm trying to get the pictures to overlap on the background "ph_1.jpg". Not sure how more specific I can get.
Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

Here's some sample code. See what you can make of it. I put the images inside nested divs so we could avoid <br> tags, which are really designed for text and in no way guarantee that one image will align with the one above it.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"   "http://www.w3.org/TR/html4/strict.dtd"><html>	<head>		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">		<title></title>		<style type="text/css">			div.container {				background-image: url("bg.gif");				background-repeat: no-repeat;				background-position: top right;				height: 100px;				width: 100px;			}			a img {				border: 0;			}		</style>	</head>	<body>		<div class="container">			<div><a href="dest.html"><img src="img.jpg"></a></div>			<div><a href="dest.html"><img src="img.jpg"></a></div>			<div><a href="dest.html"><img src="img.jpg"></a></div>			<div><a href="dest.html"><img src="img.jpg"></a></div>		</div>	</body></html>

Link to comment
Share on other sites
AaronH Newbie

AaronH

Posted
  • Author
Posted
You want the pictures to overlap eachother? Then why not just use a editor for the pictures and make one picture of it?:)
The pictures are being used as links. I'd think they'd need to be handled separately.
Link to comment
Share on other sites
AaronH Newbie

AaronH

Posted
  • Author
Posted
Here's some sample code. See what you can make of it. I put the images inside nested divs so we could avoid <br> tags, which are really designed for text and in no way guarantee that one image will align with the one above it.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"   "http://www.w3.org/TR/html4/strict.dtd"><html>	<head>		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">		<title></title>		<style type="text/css">			div.container {				background-image: url("bg.gif");				background-repeat: no-repeat;				background-position: top right;				height: 100px;				width: 100px;			}			a img {				border: 0;			}		</style>	</head>	<body>		<div class="container">			<div><a href="dest.html"><img src="img.jpg"></a></div>			<div><a href="dest.html"><img src="img.jpg"></a></div>			<div><a href="dest.html"><img src="img.jpg"></a></div>			<div><a href="dest.html"><img src="img.jpg"></a></div>		</div>	</body></html>

Almost. I think I'm doing something wrong with the CSS. I thank you for the <div> tip (you can see I'm the epitome of a beginner) but the background won't show up at all "background-image: url("bg.gif");" I've tried typing just the file name, then the entire url, then the entire directory name in the parenthesis but it won't show up.
Link to comment
Share on other sites
Jerry62704 Member

Jerry62704

Posted
Posted
I'm trying to get the pictures to overlap on the background "ph_1.jpg". Not sure how more specific I can get.
What's wrong with his suggestion? Make ph_1.jpg a background and put the others wherever you want to put them.BTW, your fundamental approach is wrong. Don't use tables to position things.Tables for positioning is stupid
Link to comment
Share on other sites
Jerry62704 Member

Jerry62704

Posted
Posted
Almost. I think I'm doing something wrong with the CSS. I thank you for the <div> tip (you can see I'm the epitome of a beginner) but the background won't show up at all "background-image: url("bg.gif");" I've tried typing just the file name, then the entire url, then the entire directory name in the parenthesis but it won't show up.
That is most likely an issue with the URL of the image not being correct. If it is in a folder (images) off of the root of your website, then you would use "images/ph_1.jpg" as the source.
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...