HTML Content Alignment

by Cirrus September 23rd 2009, 5:16 pm

I have an HTML page that has a long table on it, and a navigation list on the left of the page. I want it set up so that the navigation list is at the top, right next to the very beginning of the table. When I put both contents in one big single table, however, the navigation list is centered, and therefore shows up in the middle of the page. >.<

This might be confusing, so here's the code I'm using:

Code:: <BR> <BR> <BR> <center> <div><p align="left"><font size="3"><b>Navigation:</b></font> <BR> <font size="2">NFE Speed Tiers<BR><font size="1.5"> &nbsp-<a href="Uber-Speed-Tier-Pokerealm-Forums-h49.htm">Uber</a><BR> &nbsp-<a href="Speed-Tiers-OU-UU-h46.htm">OU/BL/UU</a><BR> &nbsp-<a href="Speed-Tiers-NU-h48.htm">NU</a> </font> <BR> NFE Tier List<BR> &nbsp<font size="1.5">-<a href="Uber-NFE-Tier-h34.htm">Uber</a><BR> &nbsp-<a href="OU-NFE-Tier-h37.htm">OU</a><BR> &nbsp-<a href="BL-NFE-Tier-h36.htm">BL</a><BR> &nbsp-<a href="UU-NFE-Tier-h35.htm">UU</a><BR> &nbsp-<a href="NU-NFE-Tier-h33.htm">NU</a></font> <BR> Downloads<BR> <font size="1.5"> -<a href="Wallpapers-Pokerealm-Forums-h24.htm">Wallpapers</a></font></p> <table oncontextmenu='return false'; oncopy='return false'; width="100%"> <center> <h1><font size="6">NU Speed Tiers</font></h1><BR> <font size="2">To start out, find the maximum and minimum Speed stat of your Pokemon while taking into account its Speed IV,<BR>and take a look at the area of Pokemon that you can outspeed, then plan your EVs accordingly.<BR><BR> Want an example? Let's say we have a Calm Chinchou with a Speed IV of 31. With 0 Speed EVs, it reaches a<BR>Speed of 146. If you give it 252 Spd EVs, it reaches 233. This means you can never outspeed a maximum Speed Cranidos<BR>under normal conditions, but you can decide what threats you want it to outspeed between Pokemon with a Speed stat<BR>between 146 and 233.</td></center> <td width="8%"> &nbsp </td> </table> <center><BR><BR><font size="4">Speed Boosts</font><BR><BR> <table border="2" color="black" height="40"> <thead> <tr> <th>Boost</th> <th>Multiplication</th> </tr> </thead> <tbody> <tr> <td>+1</td> <td><center>x1.5</center></td> </tr> <tr> <td>+2</td> <td><center>x2</center></td> </tr> <tr> <td>+3</td> <td><center>x2.5</center></td> </tr> <tr> <td>+4</td> <td><center>x3</center></td> </tr> <tr> <td>+5</td> <td><center>x3.5</center></td> </tr> <tr> <td>+6</td> <td><center>x4</center></td> </tr> </table> <BR> <font oncontextmenu='return false'; oncopy='return false'; size="2">To factor in Agility, Rock Polish, Swift Swim, etc., simply multiply your Speed stat by the number specified to find<BR>the Speed stat the Pokemon will have after the boost. Meaning if you wish to outspeed a Pupitar with a Speed of 138<BR>after it uses Dragon Dance, you will need a Pokemon with a Speed of at least 208 (138 x 1.5 +1). </font> <font size="2"> <h1> </h1> <table border="2" color="black" height="40" width="58%"> <thead> <tr> <th width="55%">Pokemon</th> <th width="10%">Speed Stat</th> <th width="8%">Nature</th> <th width="10%">Speed EVs</th> </tr> </thead> <tbody> <tr> <td>Poliwag</td> <td><center>306</center></td> <td>+Speed</td> <td><center>252</center></td> </tr> <tr> <td>Feebas, Magikarp</td> <td><center>284</center></td> <td>+Speed</td> <td><center>252</center></td> </tr> <tr> <td>Poliwag</td> <td><center>279</center></td> <td>Neutral</td> <td><center>252</center></td> </tr> <tr> <td>Combee</td> <td><center>262</center></td> <td>+Speed</td> <td><center>252</center></td> </tr> <tr> <td>Feebas, Magikarp</td> <td><center>259</center></td> <td>Neutral</td> <td><center>252</center></td> </tr> <tr> <td>Cyndaquil</td> <td><center>251</center></td> <td>+Speed</td> <td><center>252</center></td> </tr> <tr> <td>Pichu, Starly</td> <td><center>240</center></td> <td>+Speed</td> <td><center>252</center></td> </tr> <tr> <td>Combee</td> <td><center>239</center></td> <td>Neutral</td> <td><center>252</center></td> </tr> <tr> <td>Pidgey</td> <td><center>232</center></td> <td>+Speed</td> <td><center>252</center></td> </tr> <tr> <td>Cyndaquil</td> <td><center>229</center></td> <td>Neutral</td> <td><center>252</center></td> </tr> <tr> <td>Zubat</td> <td><center>229</center></td> <td>+Speed</td> <td><center>252</center></td> </tr> <tr> <td>Pichu, Starly</td> <td><center>219</center></td> <td>Neutral</td> <td><center>252</center></td> </tr> <tr> <td>Hoppip, Nidoran-M</td> <td><center>218</center></td> <td>+Speed</td> <td><center>252</center></td> </tr> <tr> <td>Poliwag</td> <td><center>216</center></td> <td>Neutral</td> <td><center>0</center></td> </tr> <tr> <td>Pidgey</td> <td><center>211</center></td> <td>Neutral</td> <td><center>252</center></td> </tr> <tr> <td>Zubat</td> <td><center>209</center></td> <td>Neutral</td> <td><center>252</center></td> </tr> <tr> <td>Bulbasaur, Caterpie, Shinx, Torchic</td> <td><center>207</center></td> <td>+Speed</td> <td><center>252</center></td> </tr> <tr> <td>Squirtle</td> <td><center>203</center></td> <td>+Speed</td> <td><center>252</center></td> </tr> </tbody> </table> </font> </center> <BR>

How would I get it so that the text "NU Speed Tiers" is at the top of the page, right next to where the navigation list is?

by RoNo September 24th 2009, 4:52 am

Try this

Code:: <br> <br> <br> <center> <table style="border: #575757; border-style: solid; border-width: 1px; padding: 6px;"><tr><td> <table style="border: #575757; border-style: solid; border-width: 1px; padding: 6px;"><tr> <td><div><p align="left"><font size="3"><b>Navigation:</b></font> <br><br> <font size="2">NFE Speed Tiers<br><font size="1.5">  -<a href="Uber-Speed-Tier-Pokerealm-Forums-h49.htm">Uber</a><br>  -<a href="Speed-Tiers-OU-UU-h46.htm">OU/BL/UU</a><br>  -<a href="Speed-Tiers-NU-h48.htm">NU</a> </font> <br><br> NFE Tier List<br>  <font size="1.5">-<a href="Uber-NFE-Tier-h34.htm">Uber</a><br>  -<a href="OU-NFE-Tier-h37.htm">OU</a><br>  -<a href="BL-NFE-Tier-h36.htm">BL</a><br>  -<a href="UU-NFE-Tier-h35.htm">UU</a><br>  -<a href="NU-NFE-Tier-h33.htm">NU</a></font><br> <br> Downloads<br> <font size="1.5"> -<a href="Wallpapers-Pokerealm-Forums-h24.htm">Wallpapers</a></font></p> </td></table> <td style="border: #575757; border-style: solid; border-width: 0px; padding: 6px;"> <td width=""> <center> <h1><font size="6">NU Speed Tiers</font></h1><br> <font size="2">To start out, find the maximum and minimum Speed stat of your Pokemon while taking into account its Speed IV,<br>and take a look at the area of Pokemon that you can outspeed, then plan your EVs accordingly.<br><br> Want an example? Let's say we have a Calm Chinchou with a Speed IV of 31. With 0 Speed EVs, it reaches a<br>Speed of 146. If you give it 252 Spd EVs, it reaches 233. This means you can never outspeed a maximum Speed Cranidos<br>under normal conditions, but you can decide what threats you want it to outspeed between Pokemon with a Speed stat<br>between 146 and 233.</td></tr> </table></center> </tr></table></center> <td width="8%"> &nbsp </td> </table> <center><br><br><font size="4">Speed Boosts</font><br><br> <table border="2" color="black" height="40"> <thead> <tr> <th>Boost</th> <th>Multiplication</th> </tr> </thead> <tbody> <tr> <td>+1</td> <td><center>x1.5</center></td> </tr> <tr> <td>+2</td> <td><center>x2</center></td> </tr> <tr> <td>+3</td> <td><center>x2.5</center></td> </tr> <tr> <td>+4</td> <td><center>x3</center></td> </tr> <tr> <td>+5</td> <td><center>x3.5</center></td> </tr> <tr> <td>+6</td> <td><center>x4</center></td> </tr> </table> <br> <font oncontextmenu='return false'; oncopy='return false'; size="2">To factor in Agility, Rock Polish, Swift Swim, etc., simply multiply your Speed stat by the number specified to find<br>the Speed stat the Pokemon will have after the boost. Meaning if you wish to outspeed a Pupitar with a Speed of 138<br>after it uses Dragon Dance, you will need a Pokemon with a Speed of at least 208 (138 x 1.5 +1). </font> <font size="2"> <h1> </h1> <table border="2" color="black" height="40" width="58%"> <thead> <tr> <th width="55%">Pokemon</th> <th width="10%">Speed Stat</th> <th width="8%">Nature</th> <th width="10%">Speed EVs</th> </tr> </thead> <tbody> <tr> <td>Poliwag</td> <td><center>306</center></td> <td>+Speed</td> <td><center>252</center></td> </tr> <tr> <td>Feebas, Magikarp</td> <td><center>284</center></td> <td>+Speed</td> <td><center>252</center></td> </tr> <tr> <td>Poliwag</td> <td><center>279</center></td> <td>Neutral</td> <td><center>252</center></td> </tr> <tr> <td>Combee</td> <td><center>262</center></td> <td>+Speed</td> <td><center>252</center></td> </tr> <tr> <td>Feebas, Magikarp</td> <td><center>259</center></td> <td>Neutral</td> <td><center>252</center></td> </tr> <tr> <td>Cyndaquil</td> <td><center>251</center></td> <td>+Speed</td> <td><center>252</center></td> </tr> <tr> <td>Pichu, Starly</td> <td><center>240</center></td> <td>+Speed</td> <td><center>252</center></td> </tr> <tr> <td>Combee</td> <td><center>239</center></td> <td>Neutral</td> <td><center>252</center></td> </tr> <tr> <td>Pidgey</td> <td><center>232</center></td> <td>+Speed</td> <td><center>252</center></td> </tr> <tr> <td>Cyndaquil</td> <td><center>229</center></td> <td>Neutral</td> <td><center>252</center></td> </tr> <tr> <td>Zubat</td> <td><center>229</center></td> <td>+Speed</td> <td><center>252</center></td> </tr> <tr> <td>Pichu, Starly</td> <td><center>219</center></td> <td>Neutral</td> <td><center>252</center></td> </tr> <tr> <td>Hoppip, Nidoran-M</td> <td><center>218</center></td> <td>+Speed</td> <td><center>252</center></td> </tr> <tr> <td>Poliwag</td> <td><center>216</center></td> <td>Neutral</td> <td><center>0</center></td> </tr> <tr> <td>Pidgey</td> <td><center>211</center></td> <td>Neutral</td> <td><center>252</center></td> </tr> <tr> <td>Zubat</td> <td><center>209</center></td> <td>Neutral</td> <td><center>252</center></td> </tr> <tr> <td>Bulbasaur, Caterpie, Shinx, Torchic</td> <td><center>207</center></td> <td>+Speed</td> <td><center>252</center></td> </tr> <tr> <td>Squirtle</td> <td><center>203</center></td> <td>+Speed</td> <td><center>252</center></td> </tr> </tbody> </table> </font> </center> <br>

(edit border color or remove it by setting width to 0px)

HTML Content Alignment Cirrus-table01

(right click view image)

HTML Content Alignment Break_gray

Colors?

by Cirrus September 24th 2009, 6:10 pm

Thanks, Rono.

That worked well for that page, but I'm also having the same problem with this one:

Code:: <BR> <BR> <BR> <center> <p align="left"><font size="3"><b>Navigation:</b></font> <BR> <font size="2">NFE Speed Tiers<BR><font size="1.5"> &nbsp-<a href="Uber-Speed-Tier-Pokerealm-Forums-h49.htm">Uber</a><BR> &nbsp-<a href="Speed-Tiers-OU-UU-h46.htm">OU/BL/UU</a><BR> &nbsp-<a href="Speed-Tiers-NU-h48.htm">NU</a> </font> <BR> NFE Tier List<BR> &nbsp<font size="1.5">-<a href="Uber-NFE-Tier-h34.htm">Uber</a><BR> &nbsp-<a href="OU-NFE-Tier-h37.htm">OU</a><BR> &nbsp-<a href="BL-NFE-Tier-h36.htm">BL</a><BR> &nbsp-<a href="UU-NFE-Tier-h35.htm">UU</a><BR> &nbsp-<a href="NU-NFE-Tier-h33.htm">NU</a></font> <BR> Downloads<BR> <font size="1.5"> -<a href="Wallpapers-Pokerealm-Forums-h24.htm">Wallpapers</a></font></p> <p align="left"> <table width="100%"> <tr> <td width="12%">&nbsp</td> <td width="5%"><font size="6">OU</font></td> <td width="78%"> &nbsp </td> </tr> </table> <table width="100%"> <tr> <td width="10.5%"> &nbsp </td> <td> <font size="2"> <table border="2" color="black" height="40"> <thead> <tr> <th width="130">Pokemon</th> <th width="230">Abilities</th> <th width="65">HP</th> <th width="65">Atk</th> <th width="65">Def</th> <th width="65">SpA</th> <th width="65">SpD</th> <th width="65">Spe</th> </tr> </thead> <tbody> <tr> <td>Bayleef</td> <td>Overgrow</td> <td>60</td> <td>62</td> <td>80</td> <td>63</td> <td>80</td> <td>60</td> </tr> <tr class="a"> <td> <a href="http://pokerealm.aforumfree.com/Bronzor-DP-Pokerealm-Forums-h29.htm">Bronzor</a> </td> <td>Levitate / Heatproof</td> <td>57</td> <td>24</td> <td>86</td> <td>24</td> <td>86</td> <td>23</td> </tr> <tr> <td><a href="http://pokerealm.aforumfree.com/Charmeleon-DP-Pokerealm-Forums-h45.htm">Charmeleon</a></td> <td>Blaze</td> <td>58</td> <td>64</td> <td>58</td> <td>80</td> <td>65</td> <td>80</td> </tr> <tr class="a"> <td>Cranidos</td> <td>Mold Breaker</td> <td>67</td> <td>125</td> <td>40</td> <td>30</td> <td>30</td> <td>58</td> </tr> </p> </td> </tr> </table>

What code am I wrapping the navigation bar and the content with?

by RoNo September 25th 2009, 7:19 am

Try adding your content to this

Code:: <center> <table style="border: #575757; border-style: solid; border-width: 1px; padding: 6px;"><tr><td> <table style="border: #575757; border-style: solid; border-width: 1px; padding: 6px;"><tr><td> [ Content "Nav Box" ] </td></table> <td style="border: #575757; border-style: solid; border-width: 0px; padding: 6px;"> <td width=""> <center> [ Content ] </td></tr> </table></center> <td width="8%"> &nbsp </td> </table> <center> [ Content ] <table border="2" color="black" height="40"> <thead><tr> <th> Content </th> </tr></thead> <tbody> <tr> [ Content <td>+1</td> etc ] </tr> </table> [ Be aware of placing <h1> before content and </h1> after ]

Don't forget ; at then end of  

Have fun!

by Cirrus September 27th 2009, 7:28 pm

Where would I be putting the table itself? I put it in the first [ Content ] field, and it does the same thing as before.

by RoNo September 27th 2009, 7:59 pm

Your Nav Box would go in the 1st [ Content ] section
Additional menus & tables would go in the others.

This should be what you need

Code:: <br> <br> <br> <center> <table style="border: #575757; border-style: solid; border-width: 1px; padding: 6px;"><tr><td> <table style="border: #575757; border-style: solid; border-width: 1px; padding: 6px;"><tr> <td> <p align="left"><font size="3"><b>Navigation:</b></font> <BR> <font size="2">NFE Speed Tiers<BR><font size="1.5"> &nbsp-<a href="Uber-Speed-Tier-Pokerealm-Forums-h49.htm">Uber</a><BR> &nbsp-<a href="Speed-Tiers-OU-UU-h46.htm">OU/BL/UU</a><BR> &nbsp-<a href="Speed-Tiers-NU-h48.htm">NU</a> </font> <BR> NFE Tier List<BR> &nbsp<font size="1.5">-<a href="Uber-NFE-Tier-h34.htm">Uber</a><BR> &nbsp-<a href="OU-NFE-Tier-h37.htm">OU</a><BR> &nbsp-<a href="BL-NFE-Tier-h36.htm">BL</a><BR> &nbsp-<a href="UU-NFE-Tier-h35.htm">UU</a><BR> &nbsp-<a href="NU-NFE-Tier-h33.htm">NU</a></font> <BR> Downloads<BR> <font size="1.5"> -<a href="Wallpapers-Pokerealm-Forums-h24.htm">Wallpapers</a></font></p> </td></table> <td style="border: #575757; border-style: solid; border-width: 0px; padding: 6px;"> <center> <p align="left"> <table width="100%"> <tr> <td width="12%">&nbsp</td> <td width="5%"><font size="6">OU</font></td> <td width="78%"> &nbsp </td> </tr> </table> <table width="100%"> <tr> <td width="10.5%"> &nbsp </td> <td> <font size="2"> <table border="2" color="black" height="40"> <thead> <tr> <th width="130">Pokemon</th> <th width="230">Abilities</th> <th width="65">HP</th> <th width="65">Atk</th> <th width="65">Def</th> <th width="65">SpA</th> <th width="65">SpD</th> <th width="65">Spe</th> </tr> </thead> <tbody> <tr> <td>Bayleef</td> <td>Overgrow</td> <td>60</td> <td>62</td> <td>80</td> <td>63</td> <td>80</td> <td>60</td> </tr> <tr class="a"> <td> <a href="http://pokerealm.aforumfree.com/Bronzor-DP-Pokerealm-Forums-h29.htm">Bronzor</a> </td> <td>Levitate / Heatproof</td> <td>57</td> <td>24</td> <td>86</td> <td>24</td> <td>86</td> <td>23</td> </tr> <tr> <td><a href="http://pokerealm.aforumfree.com/Charmeleon-DP-Pokerealm-Forums-h45.htm">Charmeleon</a></td> <td>Blaze</td> <td>58</td> <td>64</td> <td>58</td> <td>80</td> <td>65</td> <td>80</td> </tr> <tr class="a"> <td>Cranidos</td> <td>Mold Breaker</td> <td>67</td> <td>125</td> <td>40</td> <td>30</td> <td>30</td> <td>58</td> </tr> </p> </td> </tr> </table>

Look these tables over, note where your content is placed
and you should be able to use them as templates.

by Cirrus September 27th 2009, 10:32 pm

That works well for smaller tables that I made, like that one, which only had 4 rows. But what if I wanted to add a much longer one? When I try it, it does the same thing as before.

Thanks for your patience. Smile