screwed page [Archive] - Lissa Explains it All: Web Design Forums

Monkey Bizzle

09-23-2004, 07:57 PM

In viewing your code to see what the problem was, I noticed a few other errors, so here is your whole code with my comments in red... I changed your words for the sake of the forum :rolleyes:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>your title</title>
<script language="JavaScript1.2" type="text/javascript">
// This script and others available free at http://www.lissaexplains.com
if (window.Event)
document.captureEvents(Event.MOUSEUP);

function nocontextmenu() {
event.cancelBubble = true, event.returnValue = false;

return false;
}

function norightclick(e) {
if (window.Event) {
if (e.which == 2 || e.which == 3) return false;
}
else if (event.button == 2 || event.button == 3) {
event.cancelBubble = true, event.returnValue = false;
return false;
}
}

if (document.layers)
document.captureEvents(Event.MOUSEDOWN);

document.oncontextmenu = nocontextmenu;
document.onmousedown = norightclick;
document.onmouseup = norightclick;
//--></script>

The styles go in the <head> tags, not after so I have moved them. Also, instead of having 2 body sections, you only need one so I fixed that too.
<style type="text/css">
A:link
{text-decoration : none;
color : #FFFFFF;}

A:visited
{text-decoration : none;
color : #FFFFFF;}

A:active
{text-decoration : none;
color : #FFFFFF;}

A:hover
{text-decoration : underline;
cursor : help;
color : #FFFFFF;}

body
{color : #FFFFFF;
background-color : #000000;
font-size : 7pt;
font-family : Trebuchet MS;
cursor : default;
text-align : justify;
line-height :9pt;
scrollbar-face-color:#FF0000;
scrollbar-highlight-color:#000000;
scrollbar-3dlight-color:#000000;
scrollbar-darkshadow-color:#000000;
scrollbar-Shadow-color:#000000;
scrollbar-arrow-color:#000000;
scrollbar-track-color:#000000;}

b, i, u
{color: #FFFFFF;}
</style>
</head>

<body>
<br><br><br><br><br><br><br><br><br>

The reason your divs look messed up is cause you have them absolute positioned but you have your image centered. So, the image keeps moving to stay centered when you resize the page. I have gotten rid of the center tags and put it in an absolute positioned div instead. Of course you will have to change the location so that it is lined up with your existing divs.

<div style="position: absolute; left: ##px; top: ##px; width: ##px; height: vpx; overflow: hidden;">
your image here
</div>

<div style="position:absolute; left:675px; top:375px; width:175px; height:300px; overflow:auto; scrollbar-face-color : #000000; scrollbar-highlight-color : #000000; scrollbar-3dlight-color : #000000; scrollbar-shadow-color : #000000; scrollbar-darkshadow-color : #000000; scrollbar-track-color : #FF0000; scrollbar-arrow-color : #000000;">


<script language="javascript"> var chatterbox = 'no'; </script>
<script language="javascript" src="http://chatter.flooble.com/chatter.php?js=true&id=xNymphetaminex&sid=1798639">
</script><noscript>
<a href="http://chatter.flooble.com/chatter.php?id=xNymphetaminex&sid=1798639&popup=true&w=480&h=400"
target="flooblechatterbox"
onClick="window.open('about:blank','flooblechatterbox','too lbar=no,location=no,directories=no,status=no,menub ar=no,scrollbars=yes,resizable=no,copyhistory=no,w idth=480,height=400');return true;">
<img src="http://img.flooble.com/images/chatter/chaticon.gif" border="0"
align="absbottom">Talk</a>
in my <a href="<A href="http://chatter.flooble.com/">flooble">http://chatter.flooble.com/">flooble chatterbox, a free javascript chat tag board / shoutbox / tagboard program for your xanga, diary, blogger or weblog</a> |
<a href="<A href="http://www.flooble.com/fun/">funny">http://www.flooble.com/fun/">funny joke ratings, random joke, quizzes</a>
</noscript>
<script language="javascript"> if (!chatterbox || chatterbox != 'ok') {
document.write('This <a href="<A href="http://chatter.flooble.com/">flooble">http://chatter.flooble.com/">flooble chatterbox</a> is');
document.write(' temporarily unavailable. It will be back up shortly.'); } </script>

</td></tr></table>



</div>

<div style="position: absolute; left: 240px; top: 145px; width: 85px; height: 50px; overflow: hidden;">

marquee

</div>

<div style="position: absolute; left: 148px; top: 315px; width: 210px; height: 200px; overflow:hidden;">

your blog

</div>

</body>
</html>

Monkey Bizzle

09-24-2004, 04:47 AM

thanx so much but where has the image map i had on it? the stuff i can't c it.?
i took out all the content stuff cause it had a lot of bad words in it. you will have to go back to your original code and copy the code back in.

ok now also at the top when positioning my layout how do i make it centre. i mean u've take n out the <center> bit n its now absolute positioning but how can i make my image fixed center? im now more confused than before but thnx alot for helpin!

Now, hopefully someone will correct me if I am wrong but I think that the only way you can get your layout to center automatically is to put everything in tables and center the table. I don't think you can do that with absolute positioning. However that is why your layout kept changing. At least if you absolute position the image AND the divs, then they will stay together when the page is resized.