Okay I'm trying to go 90% CSS in this design which ive never done before. Only tables are used for the left menu.
First of all i cant seem to get the z-indexes working.
Link: http://setreadygo.com/clients/jnyp/joesny_layout6.html
And this is how it SHOULD look: http://setreadygo.com/clients/jnyp/joesny_layout7.jpg
Second, I cant seem to align the footer properly, now its at the top of the page, it should be at the bottom.
here is the page code, the CSS is embedded for development purposes.
HTML Code:
<html>
<head>
<title>joesny_layout6</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}
var preloadFlag = false;
function preloadImages() {
if (document.images) {
joesny_menu1_01_over = newImage("images/joesny_menu1_01-over.gif");
joesny_menu1_03_over = newImage("images/joesny_menu1_03-over.gif");
joesny_menu1_04_over = newImage("images/joesny_menu1_04-over.gif");
joesny_menu1_06_over = newImage("images/joesny_menu1_06-over.gif");
joesny_menu1_08_over = newImage("images/joesny_menu1_08-over.gif");
preloadFlag = true;
}
}
</script>
<style type="text/css">
#Table_01 {
position:absolute;
left:0px;
top:0px;
width:647px;
height:90%;
}
# joesny_pizza_body {
z-index:1;
float:left;
padding-left:15px;
margin-right:10px;
text-align:left;
}
# left_nav {
z-index:2;
float:left;
width:183px;
height:261px;
}
#joesny-layout6-01 {
position:absolute;
left:0px;
top:0px;
width:647px;
height:180px;
background-image: url(images/joesny_layout6_01.gif);
}
#joesny-layout6-02 {
position:absolute;
left:0px;
top:180px;
width:647px;
height:23px;
background-image: url(images/joesny_layout6_02.gif);
}
#joesny-layout6-03 {
position:absolute;
left:0px;
top:203px;
width:647px;
height:67px;
background-image: url(images/joesny_layout6_03.gif);
}
#joesny-layout6-04 {
position:absolute;
left:0px;
top:270px;
width:647px;
height:90%;
background-image: url(images/joesny_layout6_04.gif);
}
#joesny-layout6-05 {
position:relative;
left:0px;
top:0px;
width:647px;
height:29px;
background-image: url(images/joesny_layout6_05.gif);
}
</style>
</head>
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 20px; margin-left: 0px; margin-right: 0px; background-image:url(jnyp_bg.jpg);" onLoad="preloadImages();">
<div id="Table_01">
<div id="joesny-layout6-01">
TESTTTT
</div>
<div id="joesny-layout6-02">
<div id="joesny_pizza_body">
<table id="left_nav" width="183" height="261" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="#"
onmouseover="changeImages('joesny_menu1_01', 'images/joesny_menu1_01-over.gif'); return true;"
onmouseout="changeImages('joesny_menu1_01', 'images/joesny_menu1_01.gif'); return true;"
onmousedown="changeImages('joesny_menu1_01', 'images/joesny_menu1_01-over.gif'); return true;"
onmouseup="changeImages('joesny_menu1_01', 'images/joesny_menu1_01-over.gif'); return true;">
<img name="joesny_menu1_01" src="images/joesny_menu1_01.gif" width="183" height="38" border="0" alt=""></a></td>
</tr>
<tr>
<td>
<img src="images/joesny_menu1_02.gif" width="183" height="1" alt=""></td>
</tr>
<tr>
<td>
<a href="#"
onmouseover="changeImages('joesny_menu1_03', 'images/joesny_menu1_03-over.gif'); return true;"
onmouseout="changeImages('joesny_menu1_03', 'images/joesny_menu1_03.gif'); return true;"
onmousedown="changeImages('joesny_menu1_03', 'images/joesny_menu1_03-over.gif'); return true;"
onmouseup="changeImages('joesny_menu1_03', 'images/joesny_menu1_03-over.gif'); return true;">
<img name="joesny_menu1_03" src="images/joesny_menu1_03.gif" width="183" height="35" border="0" alt=""></a></td>
</tr>
<tr>
<td>
<a href="#"
onmouseover="changeImages('joesny_menu1_04', 'images/joesny_menu1_04-over.gif'); return true;"
onmouseout="changeImages('joesny_menu1_04', 'images/joesny_menu1_04.gif'); return true;"
onmousedown="changeImages('joesny_menu1_04', 'images/joesny_menu1_04-over.gif'); return true;"
onmouseup="changeImages('joesny_menu1_04', 'images/joesny_menu1_04-over.gif'); return true;">
<img name="joesny_menu1_04" src="images/joesny_menu1_04.gif" width="183" height="36" border="0" alt=""></a></td>
</tr>
<tr>
<td>
<img src="images/joesny_menu1_05.gif" width="183" height="1" alt=""></td>
</tr>
<tr>
<td>
<a href="#"
onmouseover="changeImages('joesny_menu1_06', 'images/joesny_menu1_06-over.gif'); return true;"
onmouseout="changeImages('joesny_menu1_06', 'images/joesny_menu1_06.gif'); return true;"
onmousedown="changeImages('joesny_menu1_06', 'images/joesny_menu1_06-over.gif'); return true;"
onmouseup="changeImages('joesny_menu1_06', 'images/joesny_menu1_06-over.gif'); return true;">
<img name="joesny_menu1_06" src="images/joesny_menu1_06.gif" width="183" height="35" border="0" alt=""></a></td>
</tr>
<tr>
<td>
<img src="images/joesny_menu1_07.gif" width="183" height="1" alt=""></td>
</tr>
<tr>
<td>
<a href="#"
onmouseover="changeImages('joesny_menu1_08', 'images/joesny_menu1_08-over.gif'); return true;"
onmouseout="changeImages('joesny_menu1_08', 'images/joesny_menu1_08.gif'); return true;"
onmousedown="changeImages('joesny_menu1_08', 'images/joesny_menu1_08-over.gif'); return true;"
onmouseup="changeImages('joesny_menu1_08', 'images/joesny_menu1_08-over.gif'); return true;">
<img name="joesny_menu1_08" src="images/joesny_menu1_08.gif" width="183" height="35" border="0" alt=""></a></td>
</tr>
<tr>
<td>
<img src="images/joesny_menu1_09.gif" width="183" height="36" alt=""></td>
</tr>
<tr>
<td>
<img src="images/joesny_menu1_10.gif" width="183" height="43" alt=""></td>
</tr>
</table>
sdfasdf
<p>;aslkdfj;asldkfja;sldfkja;sldkfja;sldkfja;sldkfja;lsdfkja</p>
<p>;alksdjf;askdjf;alskdf</p>
<p>asdflk;askjdf;alskdfjasd</p>
<p>fas;ldfkja;sdlkfjasdf</p>
<p> </p>
</div>
</div>
</div>
<div id="joesny-layout6-03">
</div>
<div id="joesny-layout6-04">
<div id="joesny-layout6-05">
</div>
</div>
</div>
</body>
</html>
|
