login | register | shoutbox

 What happened to the Messenger Plus! forums on msghelp.net?
Shoutbox » MsgHelp Archive » Skype & Technology » Tech Talk » HTML Help Please

HTML Help Please
Author: Message:
Mentality
Full Member
***

Avatar
The Best Representation OF me IS ME!

Posts: 490
Reputation: 19
39 / Male / Flag
Joined: Jun 2005
O.P. HTML Help Please
Hey not been around these parts in a while. I need some help for a college project.

I'm creating a website for a fictional company but have run into a problem with my coding. The center section where I have placed text works fine when the browser is resized, but the banner and a table I created to hold links moves out of place. I don't know if this problem is caused by my css code or html code, nor do I know how to resolve it, any help would be appreciated.

To replicate the problem, simply open the index page in any brower, then minimise it and mess about with the size of the window, the problem will be seen cleary then when the banner changes position along with the table holding the links.

Please find the folder with all the files necassary for the site to work.

code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Phoenix - Home Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<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>
<link href="mystsyle.css" rel="stylesheet" type="text/css"> - this line has been deleted now on all pages, but not in the attachment.
<link href="mystyle.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
body,td,th {
    color: #000000;
    font-family: Times New Roman, Times, serif;
}
body {
    background-color: #0099CC;
}
a:link {
    color: #0099CC;
}
a:visited {
    color: #0099CC;
}
-->
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body leftmargin="20" topmargin="20">
<div id="text" style="position:absolute; left:125px; top:250px; width:1005px; height:420px; z-index:4; background-color: #0066FF; layer-background-color: #0066FF; border: 1px none #000000;">
 
  <p align="center"><img src="Images/homepage.gif" alt="Home" width="400" height="60"></p> 
  <p align="left">This is the homepage segment of the website.</p>
</div>
<div id="banner" align="center"><a href="index.htm"><img src="Images/PHCMCN2.png" alt="Banner - Links to Home Page" width="1016" height="160"></a></div>
<div id="links" align="center">
  <table width="200" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td><table width="200" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td><a href="index.htm"><img src="Images/homelink.gif" alt="Home" width="200" height="50"></a></td>
          <td><a href="tutorials.htm"><img src="Images/tutorialslink.gif" alt="Tutorials" width="200" height="50"></a></td>
          <td><a href="contact.htm"><img src="Images/contactlink.gif" alt="Contact" width="200" height="50"></a></td>
          <td><a href="enquiries.htm"><img src="Images/enquirieslink.gif" alt="Enquiries" width="200" height="50"></a></td>
          <td><a href="services.htm"><img src="Images/serviceslink.gif" alt="Services" width="200" height="50"></a></td>
        </tr>
        </table>
        <a href="services.htm"></a></td>
    </tr>
  </table>
</div>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<div id="links2">
<div align="center">
  <table width="200" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td><a href="index.htm"><img src="Images/homelink.gif" alt="Home" width="200" height="50"></a></td>
      <td><a href="tutorials.htm"><img src="Images/tutorialslink.gif" alt="Tutorials" width="200" height="50"></a></td>
      <td><a href="contact.htm"><img src="Images/contactlink.gif" alt="Contact" width="200" height="50"></a></td>
      <td><a href="enquiries.htm"><img src="Images/enquirieslink.gif" alt="Enquiries" width="200" height="50"></a></td>
      <td><a href="services.htm"><img src="Images/serviceslink.gif" alt="Services" width="200" height="50"></a></td>
    </tr>
  </table>
</div>
</div>
<p align="center">&nbsp;</p>
</body>
</html>
and heres the code incase you don't need to download the file to find the problem.

Thanks for any help in advance. And yes it is very C**p and basic but I did only start it this morning.

.rar File Attachment: Phoenix website.rar (561.09 KB)
This file has been downloaded 227 time(s).

This post was edited on 10-20-2007 at 11:25 PM by Mentality.
10-20-2007 11:03 PM
Profile E-Mail PM Find Quote Report
NanaFreak
Scripting Contest Winner
*****


Posts: 1476
Reputation: 53
32 / Male / Flag
Joined: Jul 2006
RE: HTML Help Please
what is the problem that you are wanting people to help you fix? that the middle section doesn't center when you resize the window? or that the top menu part move when you resize?
10-20-2007 11:51 PM
Profile PM Find Quote Report
Mentality
Full Member
***

Avatar
The Best Representation OF me IS ME!

Posts: 490
Reputation: 19
39 / Male / Flag
Joined: Jun 2005
O.P. RE: HTML Help Please
That the top menu part moves when I resize is the part I would like help with, I want it to do the same as the middle section.

I want everything centered in the page, but shud the page be resized for some reason, I want everything to stay where it is or even better, should it resize, I want it all to move in, but stay centered at the same time not looking messy. - Sorry I can't explain any clearer than that, this is my first time doing web design so I don't know the exact terminology.

Just need the code that will fix it so I can implement it into the rest of the pages, or at least if someone does that and uploads it, they tell me the problem and the fix so I know for future reference.

Thanks :D


This post was edited on 10-21-2007 at 01:47 AM by Mentality.
10-21-2007 01:32 AM
Profile E-Mail PM Find Quote Report
stu
Junior Member
**

Avatar
Stu

Posts: 82
Reputation: 1
39 / Male / Flag
Joined: Sep 2004
RE: HTML Help Please
If you want the top banner to stay the same as the middle part, you will have to position the top banner absolutely, like you have for the middle part..
code:
<div id="text" style="position:absolute; left:125px; top:250px; width:1005px; height:420px; z-index:4; background-color: #0066FF; layer-background-color: #0066FF; border: 1px none #000000;">
Otherwise when the page resizes, the banner will move, but the middle wont, which from what I can tell is the problem you are referring to..

If you want the middle part to move like the banner, you can just align the middle to center, like you did for the banner..
code:
<div id="banner" align="center">

Or, you can get rid of that all together, and center everything on the page using css.. for that, there is basically 2 steps (your content all goes inside the container div)
code:
body {
margin: 0px;
text-align: center;
}

#container {
margin: 0 auto;
text-align: left;
width: 900px;
}

And might I sugest using a smaller width, it is quite large if you want to be resizing the page.. Anyways, hope that helps

This post was edited on 10-21-2007 at 02:23 AM by stu.
-Stu

http://jeremyhodgson.kicks-ass.net
http://jjcustomz.kicks-ass.net
10-21-2007 02:23 AM
Profile E-Mail PM Web Find Quote Report
NanaFreak
Scripting Contest Winner
*****


Posts: 1476
Reputation: 53
32 / Male / Flag
Joined: Jul 2006
RE: HTML Help Please
code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Phoenix - Home Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<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>
<link href="mystyle.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
body,td,th {
color: #000000;
font-family: Times New Roman, Times, serif;
}
body {
background-color: #0099CC;
}
a:link {
color: #0099CC;
}
a:visited {
color: #0099CC;
}
-->
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body leftmargin="20" topmargin="20">
<div id="text" style="position:absolute; left:125px; top:250px; width:1005px; height:420px; z-index:4; background-color: #0066FF; layer-background-color: #0066FF; border: 1px none #000000;">

  <p align="center"><img src="Images/homepage.gif" alt="Home" width="400" height="60"></p>
  <p align="left">This is the homepage segment of the website.</p>
</div>
<div id="banner" align="center"><a href="index.htm"><img src="Images/PHCMCN2.png" alt="Banner - Links to Home Page" width="1016" height="160"></a></div>
<div id="links" align="center">
  <table width="200" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td><table width="200" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td><a href="index.htm"><img src="Images/homelink.gif" alt="Home" width="200" height="50"></a></td>
          <td><a href="tutorials.htm"><img src="Images/tutorialslink.gif" alt="Tutorials" width="200" height="50"></a></td>
          <td><a href="contact.htm"><img src="Images/contactlink.gif" alt="Contact" width="200" height="50"></a></td>
          <td><a href="enquiries.htm"><img src="Images/enquirieslink.gif" alt="Enquiries" width="200" height="50"></a></td>
          <td><a href="services.htm"><img src="Images/serviceslink.gif" alt="Services" width="200" height="50"></a></td>
        </tr>
        </table>
        <a href="services.htm"></a></td>
    </tr>
  </table>
</div>
<div id="text" style="margin:0 auto 0 auto; width:1005px; height:420px; z-index:4; background-color: #0066FF; layer-background-color: #0066FF; border: 1px none #000000;">

  <p align="center"><img src="Images/homepage.gif" alt="Home" width="400" height="60"></p>
  <p align="left">This is the homepage segment of the website.</p>
</div>
<br/>
<div id="links2">
<div align="center">
  <table width="200" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td><a href="index.htm"><img src="Images/homelink.gif" alt="Home" width="200" height="50"></a></td>
      <td><a href="tutorials.htm"><img src="Images/tutorialslink.gif" alt="Tutorials" width="200" height="50"></a></td>
      <td><a href="contact.htm"><img src="Images/contactlink.gif" alt="Contact" width="200" height="50"></a></td>
      <td><a href="enquiries.htm"><img src="Images/enquirieslink.gif" alt="Enquiries" width="200" height="50"></a></td>
      <td><a href="services.htm"><img src="Images/serviceslink.gif" alt="Services" width="200" height="50"></a></td>
    </tr>
  </table>
</div>
</div>
<p align="center">&nbsp;</p>
</body>
</html>
10-21-2007 04:24 AM
Profile PM Find Quote Report
Mentality
Full Member
***

Avatar
The Best Representation OF me IS ME!

Posts: 490
Reputation: 19
39 / Male / Flag
Joined: Jun 2005
O.P. RE: HTML Help Please
Thank you Nana ;)
10-21-2007 10:52 AM
Profile E-Mail PM Find Quote Report
NanaFreak
Scripting Contest Winner
*****


Posts: 1476
Reputation: 53
32 / Male / Flag
Joined: Jul 2006
RE: HTML Help Please
its ok dude, its simple stuff =p
10-21-2007 11:09 AM
Profile PM Find Quote Report
Mentality
Full Member
***

Avatar
The Best Representation OF me IS ME!

Posts: 490
Reputation: 19
39 / Male / Flag
Joined: Jun 2005
O.P. RE: HTML Help Please
HA! make me feel stupid man. I tried setting the banner and table to absolute like I did with the middle section before I asked for help but it didn't seem to work, but I'm new to all this so no doubt I did something wrong in the process.
10-21-2007 03:22 PM
Profile E-Mail PM Find Quote Report
« Next Oldest Return to Top Next Newest »


Threaded Mode | Linear Mode
View a Printable Version
Send this Thread to a Friend
Subscribe | Add to Favorites
Rate This Thread:

Forum Jump:

Forum Rules:
You cannot post new threads
You cannot post replies
You cannot post attachments
You can edit your posts 		HTML is Off
myCode is On
Smilies are On
[img] Code is On