Jump to content

Need help overlapping pictures in HTML!


Recommended Posts

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 post
Share on other sites
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 post
Share on other sites

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 post
Share on other sites
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 post
Share on other sites
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 post
Share on other sites
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 post
Share on other sites
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...