PDA

Click to See Complete Forum and Search --> : Images on top of other images (Dreamweaver MX)

cyacomini
09-27-2005, 11:17 AM
Howdy,

I wonder if anyone can assist me..

I'm in the process of building a fan site using Dreamweaver MX.

I've prepared my base images using photoshop and am now trying to get them all positioned on a base page. Problem being, none of the images i place seem to show in the preview (f12).

I have a side bar, it's 100w x 600h - it's just a background really where i want to position my button links on top. I already know you cant just drop an image onto another image, it just pushes it to the side. So i've been experimenting with Layout cells.. they seem to be renamed layers once placed. So, for the 7 buttons i have, i created 7 new "Layout cells" - placed them in position and inserted the images onto them. It looks perfect in Dreamweaver, but only 1 shows correctly in the preview with the others out of position of missing altogether..

I'm tearing my hair out here, advice anyone ?
Kamui
09-27-2005, 11:39 AM
can you post an example ? or paste the code?
cyacomini
09-27-2005, 11:54 AM
Full code below - something else i just noticed, IE pops up saying it's blocked Active Content on the preview page.. strange considering the only objects i have on the page are basic images..

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color: #A3CB03;
}
.style1 {
font-family: HelveticaNeue, "HelveticaNeue MediumCond", "HelveticaNeue MediumExt";
color: #FFFFFF;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>

<body>
<table width="439" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutDefaultTable-->
<tr>
<td width="100" height="100" valign="top"><img src="../images/leftyicon.jpg" width="100" height="100"></td>
<td valign="top"><img src="../images/headertitle.jpg" width="400" height="100"></td>
</tr>
<tr>
<td height="606" valign="top"><img src="../images/leftybar.jpg" width="100" height="600"></td>
<td width="401"> <div id="Layer1" style="position:absolute; visibility:inherit; width:70; height:50; z-index:1; background-image: url(../images/buttonbase.jpg); layer-background-image: url(../images/buttonbase.jpg); border: 1px none #000000; left: 25; top: 150;"></div>
<div id="Layer7" style="position:absolute; visibility:inherit; width:70; height:50; z-index:7; left: 25; top: 600; background-image: url(../images/buttonbase.jpg); layer-background-image: url(../images/buttonbase.jpg); border: 1px none #000000;"></div>
<div id="Layer6" style="position:absolute; visibility:inherit; width:70; height:50; z-index:6; left: 25; top: 525; background-image: url(../images/buttonbase.jpg); layer-background-image: url(../images/buttonbase.jpg); border: 1px none #000000;"></div>
<div id="Layer5" style="position:absolute; visibility:inherit; width:70; height:50; z-index:5; left: 25; top: 450; background-image: url(../images/buttonbase.jpg); layer-background-image: url(../images/buttonbase.jpg); border: 1px none #000000;"></div>
<div id="Layer4" style="position:absolute; visibility:inherit; width:70; height:50; z-index:4; left: 25; top: 375; background-image: url(../images/buttonbase.jpg); layer-background-image: url(../images/buttonbase.jpg); border: 1px none #000000;"></div>
<div id="Layer3" style="position:absolute; visibility:inherit; width:70; height:50; z-index:3; left: 25; top: 300; background-image: url(../images/buttonbase.jpg); layer-background-image: url(../images/buttonbase.jpg); border: 1px none #000000;"></div>
<div id="Layer2" style="position:absolute; visibility:inherit; width:70; height:50; z-index:2; left: 25; top: 225; background-image: url(../images/buttonbase.jpg); layer-background-image: url(../images/buttonbase.jpg); border: 1px none #000000;"></div></td>
</tr>
</table>
</body>
</html>
cyacomini
09-30-2005, 03:40 PM
Ok, so i'm messing around with layers right now - am i getting close ? still just isnt looking right..