HTML Help Please - Printable Version
-Shoutbox (https://shoutbox.menthix.net)
+-- Forum: MsgHelp Archive (/forumdisplay.php?fid=58)
+--- Forum: Skype & Technology (/forumdisplay.php?fid=9)
+---- Forum: Tech Talk (/forumdisplay.php?fid=17)
+----- Thread: HTML Help Please (/showthread.php?tid=78341)
HTML Help Please by Mentality on 10-20-2007 at 11:03 PM
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:and heres the code incase you don't need to download the file to find the problem.
<!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"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </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"> </p>
</body>
</html>
Thanks for any help in advance. And yes it is very C**p and basic but I did only start it this morning.
RE: HTML Help Please by NanaFreak on 10-20-2007 at 11:51 PM
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?
RE: HTML Help Please by Mentality on 10-21-2007 at 01:32 AM
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 
RE: HTML Help Please by stu on 10-21-2007 at 02:23 AM
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: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..
<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;">
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
RE: HTML Help Please by NanaFreak on 10-21-2007 at 04:24 AM
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"> </p>
</body>
</html>
RE: HTML Help Please by Mentality on 10-21-2007 at 10:52 AM
Thank you Nana 
RE: HTML Help Please by NanaFreak on 10-21-2007 at 11:09 AM
its ok dude, its simple stuff =p
RE: HTML Help Please by Mentality on 10-21-2007 at 03:22 PM
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.