Menu
Community /Pin to ProfileBookmark
@cootheadJul 16.2006 — #Hi there Ruriko,
try it like this...
I also see that you are not using a DOCTYPE. :eek:
Interesting read...
http://alistapart.com/stories/doctype/
[i]coothead[/i]@cootheadJul 16.2006 — #Hi there Ruriko,
I did not test your code with your images as your site does not appear to allow hot-linking. :eek:
So I had to download them to see the IE effect that you mentioned. ?
Try the code like this...
[i]coothead[/i]
layout position
This is my layout [url]http://examples.awardspace.com/news.html
If you look at 1024×786 it looks fine but when you look at it on 800×600 you see the div layer doesn’t move with the layout. How can I make that div layer move along with layout as the layout position is centered
Sign in
to post a comment3 Comments(s) ↴
0
@cootheadJul 16.2006 — #Hi there Ruriko,try it like this...
[color=navy]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Home Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
margin:0;
padding:0;
background-color:#e78631;
}
#container {
position:relative;
width:720px;
margin:auto;
}
table {
width:720px;
}
.style2 {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size:10px;
position:absolute;
width:113px;
height:73px;
z-index:1;
left:40px;
top:480px;
}
-->
</style>
<script 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>
<!-- ImageReady Slices (dragon.psd) -->
<div id="container">
<table cellpadding="0" cellspacing="0"><tr>
<td colspan="3"><img src="images/index_01.gif" width="720" height="186" alt=""></td>
</tr><tr>
<td rowspan="2">
<img src="images/index_02.gif" width="169" height="414" border="0" usemap="#Map" alt="">
<div id="Layer1" class="style2">
Server Status:<br /><br />
Login: Online<br />
Char: Online<br />
Map: Online
</div>
</td>
<td>
<iframe src="main.html" name="main" width="517" height="382" frameborder="0" marginheight="5" marginwidth="6">
Your browser does not support iframes.
</iframe>
</td>
<td rowspan="2">
<img src="images/index_04.gif" width="34" height="414" alt=""></td>
</tr><tr>
<td><img src="images/index_05.gif" width="517" height="32" alt=""></td>
</tr></table>
</div>
<!-- End ImageReady Slices -->
<map name="Map">
<area shape="rect" coords="26,39,142,70" href="main.php" target="main" alt="">
<area shape="rect" coords="25,77,142,109" href="download.html" target="main" alt="">
<area shape="rect" coords="25,119,142,150" href="server.html" target="main" alt="">
<area shape="rect" coords="26,159,140,190" href="http://com2.runboard.com/bdragonflarero" alt="">
<area shape="rect" coords="25,204,141,236" href="team.html" target="main" alt="">
<area shape="rect" coords="25,246,142,278" href="#" target="main" alt="">
</map>
</body>
</html>[/color]I also see that you are not using a DOCTYPE. :eek:
Interesting read...
[i]coothead[/i]
0
@cootheadJul 16.2006 — #Hi there Ruriko,I did not test your code with your images as your site does not appear to allow hot-linking. :eek:
So I had to download them to see the IE effect that you mentioned. ?
Try the code like this...
[color=navy]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Home Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
margin:0;
padding:0;
background-color:#e78631;
}
#container {
position:relative;
width:720px;
margin:auto;
}
table {
width:720px;
}
.style2 {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size:10px;
position:absolute;
width:113px;
height:73px;
z-index:1;
left:40px;
top:480px;
}[color=purple]
img {
display:block;
}[/color]
-->
</style>
<script 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>
<!-- ImageReady Slices (dragon.psd) -->
<div id="container">
<table border="0"cellpadding="0" cellspacing="0"><tr>
<td colspan="3"><img src="images/index_01.gif" width="720" height="186" alt=""></td>
</tr><tr>
<td rowspan="2">
<img src="images/index_02.gif" width="169" height="414" border="0" usemap="#Map" alt="">
<div id="Layer1" class="style2">
Server Status:<br /><br />
Login: Online<br />
Char: Online<br />
Map: Online
</div>
</td>
<td>
<iframe src="main.html" name="main" width="517" height="382" frameborder="0" >
Your browser does not support iframes.
</iframe>
</td>
<td rowspan="2">
<img src="images/index_04.gif" width="34" height="414" alt=""></td>
</tr><tr>
<td><img src="images/index_05.gif" width="517" height="32" alt=""></td>
</tr></table>
</div>
<!-- End ImageReady Slices -->
<map name="Map">
<area shape="rect" coords="26,39,142,70" href="main.php" target="main" alt="">
<area shape="rect" coords="25,77,142,109" href="download.html" target="main" alt="">
<area shape="rect" coords="25,119,142,150" href="server.html" target="main" alt="">
<area shape="rect" coords="26,159,140,190" href="http://com2.runboard.com/bdragonflarero" alt="">
<area shape="rect" coords="25,204,141,236" href="team.html" target="main" alt="">
<area shape="rect" coords="25,246,142,278" href="#" target="main" alt="">
</map>
</body>
</html>[/color][i]coothead[/i]