PDA

View Full Version : My pages have gone all wierd!

mrbeanyuk
07-04-2008, 08:06 PM
Hey guys! I am a noob (or newb) here, but hoping you may be able to help.

My website - http://www.jivetastic.co.uk has been put together using PHP with a template for the top, footter, navigation and centre.

I went to add some text today and suddenly the page layout has gone all funny!

Can anyone take a look at the source code and tell me whats gone wrong!

The header code is:

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <title>Jivetastic | Amesbury's first and only Modern Jive Venue! </title>
5. <meta name="KEYWORDS" Content="Modern Jive, Amesbury, Amesbury Jive, Jivetastic, Jivetastic!, jivetastic.co.uk, jivetastic.com, jive, swing, salsa, salsa amesbury, salsa salisbury, jive salisbury, ceroc salisbury, ceroc amesbury, rock and roll, rock and roll amesbury, swing amesbury, dancing amesbury, bowman community centre, bowman centre amesbury, bowman community centre amesbury, archers gate amesbury, archers gate">
6. <meta name="Description" content="Fresh, easy to learn, fun modern jive classes every Wednesday at the Bowman Community Centre, Archers Gate, Amesbury. Freestyles last Friday of the month" />
7. <meta name="author" content="Nathan Muirhead" />
8. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
9.
10.
11. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
12. <title>Jivetastic!</title>
13. <link href="http://media.fasthosts.co.uk/htdocs-reminder/style.css" rel="styleSheet" type="text/css" />
14. <!-- JAVAScript controlling the rollover effects of side navigation buttons -->
15. <script language="JavaScript">
16. <!--
17. function FP_swapImg() {//v1.0
18. var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
19. n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
20. elm.$src=elm.src; elm.src=args[n+1]; } }
21. }
22.
23. function FP_preloadImgs() {//v1.0
24. var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
25. for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
26. }
27.
28. function FP_getObjectByID(id,o) {//v1.0
29. var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
30. else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
31. if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
32. for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
33. f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
34. for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
35. return null;
36. }
37. // -->
38. </script>
39. <style type="text/css">
40. <!--
41. .style1 {color: #FFFFFF}
42. body {
43. background-image: url();
44. background-color: #000000;
45. }
46. -->
47. </style>
48. </head>
49.
50. <!-- All the images required by the side navigation should be preloaded in the body tag -->
51. <body link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF" text="#FFFFFF" onLoad="FP_preloadImgs(/*url*/'images/buttonB.gif', /*url*/'images/buttonC.gif', /*url*/'images/buttonE.gif', /*url*/'images/buttonF.gif', /*url*/'images/button11.gif', /*url*/'images/button12.gif', /*url*/'images/button14.gif', /*url*/'images/button15.gif', /*url*/'images/button17.gif', /*url*/'images/button18.gif', /*url*/'images/button1A.gif', /*url*/'images/button1B.gif', /*url*/'images/button1D.gif', /*url*/'images/button1E.gif', /*url*/'images/button22.gif', /*url*/'images/button21.gif')">
52.
53. <div align="center">
54. &nbsp;<table border="0" width="67%" cellspacing="0" cellpadding="0" style="border-style: solid; border-width: 1px" bordercolor="#FFFFFF">
55. <tr>
56. <td align="right" style="padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px" colspan="3">
57. <span>
58. <img border="0" src="images/Jivetastic_Logo.gif" width="448" height="132" align="left"></span><p style="margin-top: 0; margin-bottom: 0">&nbsp;</p>
59. <p style="margin-top: 0; margin-bottom: 0">&nbsp;</p>
60. <p style="margin-top: 0; line-height:18px; margin-bottom: 0;"><font color="#FFFFFF" face="arial"><strong>Jivetastic Ltd</strong> Reg No: 6627685<br />
61. Registered Address: 6 /SP4 7EE<br />
62. Trading Address: Bowman Community Centre, SP4 7XT<br />
63. </font><b>
64. <font face="arial">
65. 01980 677393 / </font></b><b><font face="arial">07846 179835</font></b></p>
66. <p style="margin-top: 0; margin-bottom: 0; line-height:18px"><b>
67. <a href="mailto:contact@jivetastic.co.uk" class="style1">info@jivetastic.co.uk</a></b></td>
68. <td align="right" style="padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px">&nbsp;</td>
69. </tr>
70. <tr>
71. <td align="center" style="padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px" rowspan="2" valign="top">

and the navigation code is:

1. <style type="text/css">
2. <!--
3. .style1 {color: #FFFFFF}
4. .style2 {color: #333333}
5. .style3 {color: #000000}
6. -->
7. </style>
8. <p align="left" style="margin-top: 0; margin-bottom: 0"><a href="index.php"><img border="0" id="img11" src="images/buttonA.gif" height="25" width="100" alt="Home" onmouseover="FP_swapImg(1,0,/*id*/'img11',/*url*/'images/buttonB.gif')" onmouseout="FP_swapImg(0,0,/*id*/'img11',/*url*/'images/buttonA.gif')" onmousedown="FP_swapImg(1,0,/*id*/'img11',/*url*/'images/buttonC.gif')" onmouseup="FP_swapImg(0,0,/*id*/'img11',/*url*/'images/buttonB.gif')" fp-style="fp-btn: Soft Capsule 9; fp-font-style: Bold; fp-font-color-hover: #FFFF00; fp-font-color-press: #FFFFFF; fp-transparent: 1; fp-orig: 0" fp-title="Home"></a></p>
9.
10. <p align="left" style="margin-top: 0; margin-bottom: 0"><a href="classes.php"><img border="0" id="img12" src="images/buttonD.gif" height="25" width="100" alt="Classes" onmouseover="FP_swapImg(1,0,/*id*/'img12',/*url*/'images/buttonE.gif')" onmouseout="FP_swapImg(0,0,/*id*/'img12',/*url*/'images/buttonD.gif')" onmousedown="FP_swapImg(1,0,/*id*/'img12',/*url*/'images/buttonF.gif')" onmouseup="FP_swapImg(0,0,/*id*/'img12',/*url*/'images/buttonE.gif')" fp-style="fp-btn: Soft Capsule 9; fp-font-style: Bold; fp-font-color-hover: #FFFF00; fp-font-color-press: #FFFFFF; fp-transparent: 1; fp-orig: 0" fp-title="Classes"></a></p>
11.
12. <p align="left" style="margin-top: 0; margin-bottom: 0"><a href="venues.php"><img border="0" id="img13" src="images/button10.gif" height="25" width="100" alt="Venues" onmouseover="FP_swapImg(1,0,/*id*/'img13',/*url*/'images/button11.gif')" onmouseout="FP_swapImg(0,0,/*id*/'img13',/*url*/'images/button10.gif')" onmousedown="FP_swapImg(1,0,/*id*/'img13',/*url*/'images/button12.gif')" onmouseup="FP_swapImg(0,0,/*id*/'img13',/*url*/'images/button11.gif')" fp-style="fp-btn: Soft Capsule 9; fp-font-style: Bold; fp-font-color-hover: #FFFF00; fp-font-color-press: #FFFFFF; fp-transparent: 1; fp-orig: 0" fp-title="Venues" /></a></p>
13.
14. <p align="left" style="margin-top: 0; margin-bottom: 0"><a href="crew.php"><img border="0" id="img14" src="images/button13.gif" height="25" width="100" alt="The Crew" onmouseover="FP_swapImg(1,0,/*id*/'img14',/*url*/'images/button14.gif')" onmouseout="FP_swapImg(0,0,/*id*/'img14',/*url*/'images/button13.gif')" onmousedown="FP_swapImg(1,0,/*id*/'img14',/*url*/'images/button15.gif')" onmouseup="FP_swapImg(0,0,/*id*/'img14',/*url*/'images/button14.gif')" fp-style="fp-btn: Soft Capsule 9; fp-font-style: Bold; fp-font-color-hover: #FFFF00; fp-font-color-press: #FFFFFF; fp-transparent: 1; fp-orig: 0" fp-title="The Crew" /></a></a></p>
15.
16. <p align="left" style="margin-top: 0; margin-bottom: 0"><a href="events.php"><img border="0" id="img15" src="images/button16.gif" height="25" width="100" alt="Events" onmouseover="FP_swapImg(1,0,/*id*/'img15',/*url*/'images/button17.gif')" onmouseout="FP_swapImg(0,0,/*id*/'img15',/*url*/'images/button16.gif')" onmousedown="FP_swapImg(1,0,/*id*/'img15',/*url*/'images/button18.gif')" onmouseup="FP_swapImg(0,0,/*id*/'img15',/*url*/'images/button17.gif')" fp-style="fp-btn: Soft Capsule 9; fp-font-style: Bold; fp-font-color-hover: #FFFF00; fp-font-color-press: #FFFFFF; fp-transparent: 1; fp-orig: 0" fp-title="Events"></a></p>
17.
18. <p align="left" style="margin-top: 0; margin-bottom: 0"><a href="contact.php"><img border="0" id="img16" src="images/button19.gif" height="25" width="100" alt="Contact Us" onmouseover="FP_swapImg(1,0,/*id*/'img16',/*url*/'images/button1A.gif')" onmouseout="FP_swapImg(0,0,/*id*/'img16',/*url*/'images/button19.gif')" onmousedown="FP_swapImg(1,0,/*id*/'img16',/*url*/'images/button1B.gif')" onmouseup="FP_swapImg(0,0,/*id*/'img16',/*url*/'images/button1A.gif')" fp-style="fp-btn: Soft Capsule 9; fp-font-style: Bold; fp-font-color-hover: #FFFF00; fp-font-color-press: #FFFFFF; fp-transparent: 1; fp-orig: 0" fp-title="Contact Us"></a></p>
19.
20. <p align="left" style="margin-top: 0; margin-bottom: 0"><a href="register.php"><img border="0" id="img28" src="images/button28.gif" height="25" width="100" alt="Register" onmouseover="FP_swapImg(1,0,/*id*/'img28',/*url*/'images/button29.gif')" onmouseout="FP_swapImg(0,0,/*id*/'img28',/*url*/'images/button28.gif')" onmousedown="FP_swapImg(1,0,/*id*/'img28',/*url*/'images/button30.gif')" onmouseup="FP_swapImg(0,0,/*id*/'img28',/*url*/'images/button29.gif')" fp-style="fp-btn: Soft Capsule 9; fp-font-style: Bold; fp-font-color-hover: #FFFF00; fp-font-color-press: #FFFFFF; fp-transparent: 1; fp-orig: 0" fp-title="Register"></a></p>
21.
22. <p align="left" style="margin-top: 0; margin-bottom: 0"><a href="faq.php"><img border="0" id="img17" src="images/button1C.gif" height="25" width="100" alt="FAQs" onmouseover="FP_swapImg(1,0,/*id*/'img17',/*url*/'images/button1D.gif')" onmouseout="FP_swapImg(0,0,/*id*/'img17',/*url*/'images/button1C.gif')" onmousedown="FP_swapImg(1,0,/*id*/'img17',/*url*/'images/button1E.gif')" onmouseup="FP_swapImg(0,0,/*id*/'img17',/*url*/'images/button1D.gif')" fp-style="fp-btn: Soft Capsule 9; fp-font-style: Bold; fp-font-color-hover: #FFFF00; fp-font-color-press: #FFFFFF; fp-transparent: 1; fp-orig: 0" fp-title="FAQs"></a></p>
23.
24. <p align="left" style="margin-top: 0; margin-bottom: 0"><a href="guestbook.php"><img border="0" id="img34" src="images/button34.gif" height="25" width="100" alt="Offers" onmouseover="FP_swapImg(1,0,/*id*/'img34',/*url*/'images/button36.gif')" onmouseout="FP_swapImg(0,0,/*id*/'img34',/*url*/'images/button34.gif')" onmousedown="FP_swapImg(1,0,/*id*/'img34',/*url*/'images/button35.gif')" onmouseup="FP_swapImg(0,0,/*id*/'img34',/*url*/'images/button36.gif')" fp-style="fp-btn: Soft Capsule 9; fp-font-style: Bold; fp-font-color-hover: #FFFF00; fp-font-color-press: #FFFFFF; fp-transparent: 1; fp-orig: 0" fp-title="Offers"></a></p>
25.
26. <p align="left" style="margin-top: 0; margin-bottom: 0"><a href="Offers.php"><img border="0" id="img18" src="images/button20.gif" height="25" width="100" alt="Offers" onmouseover="FP_swapImg(1,0,/*id*/'img18',/*url*/'images/button21.gif')" onmouseout="FP_swapImg(0,0,/*id*/'img18',/*url*/'images/button20.gif')" onmousedown="FP_swapImg(1,0,/*id*/'img18',/*url*/'images/button22.gif')" onmouseup="FP_swapImg(0,0,/*id*/'img18',/*url*/'images/button21.gif')" fp-style="fp-btn: Soft Capsule 9; fp-font-style: Bold; fp-font-color-hover: #FFFF00; fp-font-color-press: #FFFFFF; fp-transparent: 1; fp-orig: 0" fp-title="Offers"></a></p>
27.
28. <p align="left" style="margin-top: 0; margin-bottom: 0"><a href="links.php"><img border="0" id="img31" src="images/button31.gif" height="25" width="100" alt="Links" onmouseover="FP_swapImg(1,0,/*id*/'img31',/*url*/'images/button32.gif')" onmouseout="FP_swapImg(0,0,/*id*/'img31',/*url*/'images/button31.gif')" onmousedown="FP_swapImg(1,0,/*id*/'img31',/*url*/'images/button33.gif')" onmouseup="FP_swapImg(0,0,/*id*/'img31',/*url*/'images/button31.gif')" fp-style="fp-btn: Soft Capsule 9; fp-font-style: Bold; fp-font-color-hover: #FFFF00; fp-font-color-press: #FFFFFF; fp-transparent: 1; fp-orig: 0" fp-title="Links"></a></p>
29.
30. <p align="left"><font face="Arial" color="#FFFF00" pointsize="8">Designed and built by</font><br /><a href="http://www.hobnetwork.co.uk" target="_blank"><span class="style2"><img src="images/hobnet_logo.png" border="0" height="30" width="100" /></span></a></p>
31. <p align="left"><span class="style1">Visit our friends<br />
32. up north<br />
33. <a href="http://www.jivetastic.com" target="_blank" class="style1">www.jivetastic.com</a></span><span class="style3">

I put this code down for info however it was the /index.php page that I edited!

Thanks :)
rangana
07-05-2008, 04:08 AM
Could you please explain what makes the layout funny? What oddity have you observed that should'nt be there?

Also, see if fixing your validation errors (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.jivetastic.co.uk%2F&charset=%28detect+automatically%29&doctype=Inline&group=0) provides an aide.
itsjareds
07-05-2008, 06:18 AM
What's weird? Is it that you want what is on the bottom to be at the center-right?
mrbeanyuk
07-05-2008, 11:45 AM
All the stuff is at the bottom of the page where the intent was to have the logo at the top, the navigation on the left and all the text (which seems to have turned black from white) in the middle top.

Thanks
rangana
07-05-2008, 12:39 PM
Containt your "menu" in one element, probably a <div>:

<td style="padding: 1px 4px;" rowspan="2" align="center" valign="top">
<div style="float:left;">
<p style="margin-top: 0pt; margin-bottom: 0pt;" align="left"><a href="http://www.jivetastic.co.uk/index.php"><img id="img11" src="Jivetastic%20_%20Amesbury%27s%20first%20and%20only%20Modern%20Jive%20Venue%21_files/buttonA.gif" alt="Home" onmouseover="FP_swapImg(1,0,/*id*/'img11',/*url*/'images/buttonB.gif')" onmouseout="FP_swapImg(0,0,/*id*/'img11',/*url*/'images/buttonA.gif')" onmousedown="FP_swapImg(1,0,/*id*/'img11',/*url*/'images/buttonC.gif')" onmouseup="FP_swapImg(0,0,/*id*/'img11',/*url*/'images/buttonB.gif')" fp-style="fp-btn: Soft Capsule 9; fp-font-style: Bold; fp-font-color-hover: #FFFF00; fp-font-color-press: #FFFFFF; fp-transparent: 1; fp-orig: 0" fp-title="Home" border="0" height="25" width="100"></a></p>


...and close it at the same time:

<a href="http://www.jivetastic.com/" target="_blank" class="style1">www.jivetastic.com</a></span><span class="style3">
</div>
<!-- MAIN CONTENT

This is a table that is maintained by the user. See the commented out code below to make sure you set the paragraphs and cell attributes correctly.

This is a row and cell for a subject heading

And lastly, change this part:

<table border="0" cellpadding="0" cellspacing="0" width="98%">


into:

<table style="border:0px;padding:0px;margin:0px;width:85px;">


P.S. You've got a number of deprecated tags and attributes. The worst among them all is highlighted:

<font pointsize="12" color="#000000" face="Arial">


It does'nt exist.

Hope it helps.