For some reason, I can't get any thing to appear after the </div> marking if I change the position to absolute. (so if the answer to this is easier than what I've done wrong with the position:relative, that would be fine!)
It looks fine on here, http://www.inkiw.net/index3.html
But as soon as I go to another page, with the same code, it shifts to the right: http://www.inkiw.net/graphics/index.html
Thank you for your time.
My Code:
CODE
<html>
<head>
div.cfooter {
width: 300px;
background-image: url(http://inkiw.net/layout/bottom.png);
height: 20px;
}
</head><body>
<body background="/layout/tablebg.png" style="background-repeat:repeat-y" bgcolor="#F0ECE3">
<div style="position:absolute;
top:0px;
left:0px;
z-index:1;">
<MAP NAME="layout">
<AREA SHAPE="RECT" COORDS="652,145,696,160" HREF="http://inkiw.net/blog/journal.cgi" TITLE="Blog">
<AREA SHAPE="RECT" COORDS="708,147,764,160" HREF="http://inkiw.net/about/index.html" TITLE="About">
<AREA SHAPE="RECT" COORDS="481,145,556,161" HREF="http://inkiw.net/graphics/index.html" TITLE="Graphics">
<AREA SHAPE="RECT" COORDS="573,146,636,161" HREF="http://inkiw.net/projects/index.html" TITLE="Projects">
<AREA SHAPE="RECT" COORDS="777,144,836,159" HREF="http://inkiw.net/index.html" TITLE="Home">
</MAP>
<img src="/layout/top.png" USEMAP="#layout" border="0" alt="" style="position:absolute; top:0px;left:0px" z-index:2;>
</div>
<head>
<title>Inkiw.net</title>
<link href="tutorsty.css" rel="stylesheet" type="text/css" />
<link href="flexcrollstyles.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src="flexcroll.js"></script>
</head>
<BODY>
<div style="position:relative; z-index:3; top:135px; left:470px; width:370; color:395d31;font-size:11px;font-family:verdana ref, verdana, sans-serif;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sapien ipsum, ultrices eget, ultricies id, placerat at, massa. In ante. Sed non urna. Maecenas hendrerit lectus in lacus. Sed enim velit, consectetur non, elementum sit amet, gravida vitae, sapien. Suspendisse potenti. Integer at dui. Nulla eu augue. Ut dolor odio, sagittis vel, pharetra eget, tincidunt nec, purus. Sed suscipit arcu in urna. Donec faucibus arcu at turpis rhoncus tincidunt. Duis ac orci eu nulla euismod ultrices.
Donec fringilla tellus ut purus. In hac habitasse platea dictumst. Praesent at mauris. Fusce in turpis. Morbi eleifend ligula sit amet velit. Curabitur blandit interdum tortor. In fermentum augue eu orci. Nullam at ante sed est dignissim volutpat. Fusce mi est, ultricies sed, dictum vel, placerat sed, augue. Vivamus placerat ipsum id neque. Quisque luctus feugiat odio. Duis auctor faucibus eros. Vivamus bibendum, lacus eget pharetra convallis, nibh leo bibendum erat, vitae tristique elit ligula id purus. Quisque convallis lacinia metus. Curabitur adipiscing accumsan sem. Nunc tristique, tortor eget mollis rhoncus, lorem tortor rutrum quam, posuere tempus urna justo ac dolor. Quisque velit ligula, semper quis, venenatis vel, imperdiet at, lorem.
Mauris semper mollis orci. Aenean magna. Nam tincidunt. Aenean ligula diam, tincidunt eget, lobortis vitae, tincidunt eu, nibh. Integer lacus quam, porttitor iaculis, facilisis id, sollicitudin quis, nisl. Proin eget sapien. In metus. Etiam faucibus. Etiam eu sapien at velit molestie accumsan. Vestibulum ultricies. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In feugiat semper libero. Sed consequat. In placerat risus eget lorem. Integer ultrices egestas odio. Nam iaculis libero commodo enim.
Curabitur consequat, purus ut suscipit varius, velit orci porta ligula, non vehicula nisi nibh non nulla. Vestibulum ante purus, ullamcorper at, imperdiet id, lobortis vitae, pede. Mauris egestas ante vitae elit suscipit laoreet. Suspendisse nec sem adipiscing ante fringilla rutrum. Suspendisse pellentesque velit non neque. Maecenas at eros. Nullam eleifend, magna vitae varius vehicula, leo magna commodo pede, ac volutpat sapien sem eget odio. Quisque tincidunt, diam quis fermentum aliquet, odio est adipiscing turpis, sit amet rutrum lacus dui ut felis. Quisque ligula. Mauris metus leo, dictum eget, dignissim quis, semper quis, lectus. Sed at odio congue felis euismod volutpat. Suspendisse ipsum ipsum, facilisis vel, varius vel, vulputate non, orci.
Cras sagittis. Ut in velit a nibh blandit pellentesque. Vivamus ac tellus. Nam nunc. Fusce pulvinar ultrices diam. Aenean rutrum lacus. Nullam sed quam. Curabitur felis dolor, auctor vitae, viverra et, mollis eu, erat. Cras rutrum. Duis in massa sit amet nisl dapibus faucibus. Aenean commodo pede bibendum erat. Etiam vestibulum lacus. Aliquam hendrerit risus a mi. Ut sit amet lectus sed leo convallis placerat. Proin feugiat sollicitudin quam.
Nulla sollicitudin nulla quis tortor. Donec placerat ultricies mauris. Maecenas quis risus. Ut adipiscing eros ut justo. Vivamus et nisi eget neque porta convallis. In quis massa. Donec ultrices erat sed pede dignissim rhoncus. Aliquam nunc massa, facilisis tempor, mollis sit amet, mattis id, justo. Suspendisse faucibus lacus. Curabitur sit amet dolor. Nulla hendrerit volutpat sapien. Duis sodales. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam sagittis consectetur odio. Maecenas gravida luctus pede. Maecenas egestas arcu eleifend nisi. Donec lorem tellus, pellentesque quis, elementum et, ornare sit amet, ante. Nullam eleifend leo accumsan nisl. Phasellus eu nibh id arcu ultrices vehicula.
<br><br><br>
</div>
