Site size issues

johnh2009 · October 2, 2009

not really a PHP thing but very annoying...

Ok so im making a sitre for my aikido club, im not very good when it comes to layouts but i try none the less...

Anyway the problem is this (any help you can give would be great):

My main index page loads up and its all fine and well etc etc etc then when i go to the about page i can see an obvious change in size etc but when i look in the coding on dreamweaver they seem to be exactly the same. As i mentioned i am not very good when it comes to layout...i made this site in a table (probably a bad idea but i know nothing else)...ill post both pages:

About Page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Billingham Aikido Club</title>

</head>

<tr>

<td width="746" align="center" id="fontti">Billingham Aikido Club</td>

</tr>

<tr>

<td colspan="3" id="font" align="center">Northfield Sportsdrome, Thames Road, Billingham, Stockton on Tees, TS22 5EG</td>

</tr>

<tr>

</tr>

<tr>

<td colspan="3" id="fontt" align="center">About Aikido</td>

</tr>

<tr>

<li><a href="about.php">Aikido</a></li>

<li><a href="kogusoku.php">Kogusoku</a></li>

<li><a href="phpbb3/index.php">Forum</a></li>

</ul></div></td>

<td id="fontp" valign="top" align="justify">Aikido (合気道) is a <a href="http://en.wikipedia.org/wiki/Japanese_martial_art" title="Japanese martial art">Japanese martial art</a> developed by <a href="http://en.wikipedia.org/wiki/Morihei_Ueshiba" title="Morihei Ueshiba">Morihei Ueshiba</a> as a synthesis of his martial studies, philosophy, and religious beliefs. Aikido is often translated as "the Way of unifying (with) <a href="http://en.wikipedia.org/wiki/Qi" title="Qi">life energy</a>"or as "the Way of harmonious spirit."Ueshiba's goal was to create an art that practitioners could use to defend themselves while also protecting their attacker from injury.

Aikido is performed by blending with the motion of the attacker and redirecting the force of the attack rather than opposing it head-on. This requires very little physical energy, as the <a href="http://en.wikipedia.org/wiki/List_of_aikidoka" title="List of aikidoka">aikidōka</a> (aikido practitioner) "leads" the attacker's <a href="http://en.wikipedia.org/wiki/Momentum" title="Momentum">momentum</a> using entering and turning movements. The techniques are completed with various <a href="http://en.wikipedia.org/wiki/Throw_%28grappling%29" title="Throw (grappling)">throws</a> or <a href="http://en.wikipedia.org/wiki/Joint_locks" title="Joint locks">joint locks</a>.Aikido can be categorized under the general umbrella of <a href="http://en.wikipedia.org/wiki/Grappling" title="Grappling">grappling</a> arts.

Aikido derives mainly from the martial art of <a href="http://en.wikipedia.org/wiki/Dait%C5%8D-ry%C5%AB_Aiki-j%C5%ABjutsu" title="Daitō-ryū Aiki-jūjutsu">Daitō-ryū Aiki-jūjutsu</a>, but began to diverge from it in the late 1920s, partly due to Ueshiba's involvement with the <a href="http://en.wikipedia.org/wiki/Oomoto" title="Oomoto">Ōmoto-kyō</a> religion. Ueshiba's early students' documents bear the term aiki-jūjutsu. Many of Ueshiba's senior students have different approaches to aikido, depending on when they studied with him. Today aikido is found all over the world in a number of styles, with broad ranges of interpretation and emphasis. However, they all share techniques learned from Ueshiba and most have concern for the well-being of the attacker.</td>

<td valign="top" id="fontpx" align="center"><img src="225px-Morihei-Ueshiba.jpg" width="125" height="152"/>O'Sensei

Morihei Ueshiba

</td>

</tr>

</table>

<?php require 'newsbits.php'; ?>

<tr>

</tr>

</table>

</body>

</html>

Index Page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Billingham Aikido Club</title>

</head>

<tr>

<td width="746" align="center" id="fontti">Billingham Aikido Club</td>

</tr>

<tr>

<td colspan="3" id="font" align="center">Northfield Sportsdrome, Thames Road, Billingham, Stockton on Tees, TS22 5EG</td>

</tr>

<tr>

</tr>

<tr>

<td colspan="3" id="fontt" align="center">About Billingham Aikido Club</td>

</tr>

<tr>

<li><a href="about.php">Aikido</a></li>

<li><a href="kogusoku.php">Kogusoku</a></li>

<li><a href="phpbb3/index.php">Forum</a></li>

</ul></div></td>

<td id="fontp" align="justify">Billingham Aikido Club, is part of the Kogusoku Aikido Association and is ran by Sensei Rob Dowson and Sensei John Harland.

The Club takes place every friday night at Northfield school, Billingham (full address above). The club is more known for being held at the Billingham Forum where we have ran for over 15years, until August 2008 when we moved due to impending redevelopment.

The home of the Kogusoku Aikido Association lies within Sunderland (North East England) and has several smaller branches throughout the region such as our club in Billingham.

The Billingham Aikido Club has been part of the Kogusoku Aikido Association since it formed in April 2007.

For more information please look throughout this website, or come along to watch or join in and start training for yourself.

We are currently looking for new starters and everyone is welcome and as an added bonus First Lesson is Free!</td>

</tr>

</table>

<?php require 'newsbits.php'; ?>

<tr>

</tr>

</table>

</body>

</html>

Bricktop · October 2, 2009

Hi johnh2009,

You haven't posted your CSS code but these are the two differences I can see in the HTML code, but neither would affect the sizing of the text on the page as a whole.

- On line 14 on the index page you have an alt attribute (alt="") but none on the about page.

- On line 20 on the index page the id of the td is "fontp" but on the about page it's just "font"

Post the contents of your CSS for further assistance.

Hope this helps.

johnh2009 · October 2, 2009

thanks for the quick reply:)

here is CSS

@charset "utf-8";

/* CSS Document */

#navigation ul {

margin-left: 0;

padding-left: 0;

list-style-type: none;

float: left;

list-style-type: none;

}

#navigation a {

font-family: Tahoma;

display: block;

padding: 5px;

width: 100px;

border-bottom: 1px solid #00F;

}

#fontti {

font-family: Tahoma;

font-size:42px;

color:#FFF

}

#font {

font-family: Tahoma;

font-size:22px;

color:#C00

}

#fontt {

font-family: Tahoma;

font-size:22px;

color:#00F

}

#fontp {

font-family: Tahoma;

font-size:16px;

color:#FFF

}

#navigation a:link, #navlist a:visited {

color:#C00;

text-decoration: none;

}

#navigation a:hover {

background: #000 url(arrow.gif) 96% 50% no-repeat;

background-color: #000;

color:#C00;

}

-->

</style>

NOTE: i didnt make this just butchered something i found on the net

Bricktop · October 2, 2009

Hi johnh2009,

Using your code and CSS I can see no difference in text size when viewing the pages. Changing point 2 above moves the page up slightly in line with the index page but other than that it looks the same to me!

johnh2009 · October 2, 2009

that is so weird, the title of billingham aikido club for example...when i switch from the two on this computer i see it move around an inch to the left, including the pictures i have etc...is it possible that those affect it?

johnh2009 · October 2, 2009

ok in order for you to see it how it is i have temporarily put it online, you can find it on this address:

http://213.107.83.111/aikido/

Bricktop · October 2, 2009

Hi johnh2009,

Thanks for posting the link, it's the images on the right side of the page causing the table to increase/decrease in size.

Hope this helps.

johnh2009 · October 2, 2009

great stuff any suggestions on how to fix it before i start playing with them

EDIT: tried changing the size of them, stil not working

That is the code for the pics btw:

<td valign="top" id="fontpx" align="center"><img src="225px-Morihei-Ueshiba.jpg" width="94" height="114"/>O'Sensei

Morihei Ueshiba

</td>

Bricktop · October 2, 2009

It would be better to set the td width via CSS.

On your About page the TD containing the right hand image has an id set, it also contains text. This is making the table appear a different size to the other page.

johnh2009 · October 2, 2009

i took the id off and removed the text and it looks fine now thanks for taking a look your help is really appreciated

Bricktop · October 2, 2009

No problem johnh2009, good luck with the site!

johnh2009 · October 2, 2009

indeed on the long way to go, still trying to find my feet which is not going well at all.

Its all very daunting and i feel very inferior in the design part...struggling plenty id have to say, i wanted this to be a very user friendly site but finding it hard to write the code from memory

haku · October 5, 2009

Don't bother looking at the site in Dreamweaver - dreamweaver is not a browser, and does not use the same rendering engine as any browser, so however it looks in dreamweaver is pretty much irrelevant to the real world. Do your code in Dreameweaver, then look at it in a browser - thats the only method that works properly.

johnh2009 · October 9, 2009

Don't bother looking at the site in Dreamweaver - dreamweaver is not a browser, and does not use the same rendering engine as any browser, so however it looks in dreamweaver is pretty much irrelevant to the real world. Do your code in Dreameweaver, then look at it in a browser - thats the only method that works properly.

this is something i never knew ill certainly do this for here on. Is there any preference between IE and firefox? i have the ability to use both but is there one i should more target for than another

haku · October 10, 2009

You should make your site work in both.

The problem is that IE renders code different than any other browser. All the other browsers render their code according to standards - IE doesn't follow their standards. Its a big headache. So the best thing to do is code your site in firefox, then adjust it to work in IE as well. This is easier said than done for a beginner, but it's pretty much essential.

johnh2009 · October 10, 2009

ill certainly do this thank you for the advice

Any more advice you have i will be happy to hear it

haku · October 12, 2009

Stop using tables for layout. That's my best piece of advice.

johnh2009 · October 12, 2009

sat with Learning CSS from Lynda.com now

Sign In

Site size issues

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information