More HTML Issues D:
3 posters
Page 1 of 1
More HTML Issues D:
HTML page:
Stylesheet:
The page as it looks now:
http://pokerealm.com/pokemon/beta-template-table.html
The issue I'm having this time is the alignment of the text 'Generation 4' and 'Generation 5'. What I hope to have is that text showing just above the two tab sets that I have up, the left having Generation 4 above it, and the right having Generation 5 above it. It might look okay on some screen resolutions, but I tested it on a few smaller resolutions (in particular 600x800), and the text 'Generation 5' looked nowhere near it should be.
What I attempted was to make a table based on percents just above the tabs so that I could hopefully align it above both tabs, but that would be too easy. I also looked online and discovered that I couldn't specify the width of a <li> tag. Since I can't do that, I'm not sure how I can define the width well enough so that it looks consistent on most screen resolutions.
Any help is appreciated.
- Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" id="min-width" lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Murkrow - Pokerealm.com</title>
<link rel="stylesheet" type="text/css" href="../stylesheet-beta.css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<link rel="shortcut icon" type="image/x-icon" href="../images/favicon.png" />
<meta name="description" content="Diamond and Pearl NFE strategies for Murkrow" />
<meta name="keywords" content="ipokerealm, Murkrow moveset, Murkrow strategy, pokerealm, nfe, Murkrow" />
<meta name="distribution" content="global" />
<meta name="robots" content="index,follow" />
<meta name="googlebot" content="index,follow,archive" />
</head>
<body>
<table class="bodylinewidth" width="86%" cellspacing="0" cellpadding="5" border="0" align="center">
<tr>
<td class="bodyline">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center" width="100%" valign="middle">
<a href="http://pokerealm.com"><img src="../images/bannerpic.png" width="100%" border="0" alt="Pokerealm Banner" vspace="1" /></a><br /><br />
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" align="center" width="100%">
<tr>
<td width="55%"> </td>
<td width="45%">
<p class="left"><span class="descript">The official site of Pokemon NFE battling.</span></p>
</td>
<td>
<table cellpadding="5" cellspacing="1" class="searchBox">
<tr>
<td align="center">
<form action="../search/search.php" method="get">
<table>
<tr>
<td>
<div align="left">
<input type="text" name="query" id="query" size="40" value="" />
</div>
</td>
<td>
<input type="submit" value="Search" />
</td>
</tr>
</table>
<input type="hidden" name="search" value="1" />
</form>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" align="center">
<tr>
<td align="center">
<ul id="navbar">
<li><a href="http://pokerealmforums.com/forum.htm" target="Fred"><img src="../images/navbar/forums.png" border="0" hspace="0" alt="Home"
/></a></li>
<li><img src="../images/navbar/nfe-speed-tiers.png" border="0" hspace="0" alt="NFE Speed Tiers" /><ul><li>
<a href="../speed-tiers/uber.html" target="Fred">Uber</a></li>
<li><a href="../speed-tiers/ou.html" target="Fred">OU/BL/UU</a><br /></li>
<li><a href="../speed-tiers/nu.html" target="Fred">NU</a></li></ul></li>
<li><a href="../nfe-list.html" target="Fred"><img src="../images/navbar/nfe-tier-list.png" border="0" hspace="0" alt="NFE Tiers" /></a><ul>
<li><a href="../tiers/uber.html" target="Fred">Uber</a> <a href="../tiers/ou-tier.html" target="Fred">OU</a></li>
<li><a href="../tiers/bl-tier.html" target="Fred">BL</a> <a href="../tiers/uu-tier.html" target="Fred">UU</a></li>
<li><a href="../tiers/nu-tier.html" target="Fred">NU</a></li></ul></li>
<li><a href="../downloads.html"><img src="../images/navbar/downloads.png" border="0" hspace="0" alt="Downloads" /></a></li>
<li><a href="../articles.html"><img src="../images/navbar/articles2.png" border="0" hspace="0" alt="Articles" /></a></li>
</ul>
</td>
</tr>
</table>
<div><br /><br /><br />
<table width="100%">
<tr>
<td width="50%" style="text-align:center;"><span class="descript">Generation 4<br /></span>
<ul class="tabs">
<li class="tabspacer"><strong>Strategy</strong></li>
<li><a href="moves/murkrow.html">Moves</a></li>
</ul></td>
<td width="35%" style="text-align:center;"><span class="descript">Generation 5</span><br />
<ul class="tabs">
<li style="margin-left:11%;"><strong>Strategy</strong></li>
<li><a href="moves/bw/murkrow.html">Moves</a></li>
</ul>
</td>
<td width="15%" class="tabs"> </td>
</tr>
</table>
</div>
<div style="clear: both;"></div>
<div id="page-body">
<!--<ul class="tabs">
<li class="tabspacer"><strong>Strategy</strong></li>
<li><a href="moves/murkrow.html">Moves</a></li>
<li style="margin-left:11%;"><strong>Strategy</strong></li>
<li><a href="moves/bw/murkrow.html">Moves</a></li>
</ul> -->
<div id="emptyidcc" class="no-left">
<table cellpadding="0" cellspacing="0" width="100%" class="three-col">
<tbody>
<tr>
<td valign="top" width="100%">
<div>
<br />
<table class="info" align="center" width="90%">
<tbody>
<tr>
<td> </td>
</tr>
</tbody>
</table>
</div>
<div><br /><br /></div>
<table width="90%" align="center" class="dark-space">
<tr>
<td><br /></td>
<td width="3.6%"> </td>
<td width="15.4%"><div class="cen"><img src="../images/pokemon/hgss/murkrow.png" alt="Murkrow" /></div></td>
<!--Pokemon Picture. Substitute the picture for the Pokemon's name. It must be in all lowercase.-->
<td width="1.9%"> </td>
<td width="16.5%">
<div class="cen"><div class="namefont"><strong>Murkrow</strong></div></div>
</td>
<td width="5.5%"> </td>
<td width="6%"><p class="tier">Tier-OU</p></td>
<td width="3%"> </td>
<td width="5.6%"><div class="cen">Abilities: </div></td>
<td width="1.1%"> </td>
<td width="37.5%">
<div class="infotext">
<div class="left">
<div class="ability">
<span style="abilicol">Insomnia: </span>Prevents sleep.<br /><br />
<span style="abilicol">Super Luck: </span>Increases the user's critical hit rate by 1 stage.</div>
</div>
</div>
</td>
<td width="3.9%"> </td>
</tr>
</table>
<div><br /><br /></div>
<div><br />
<table class="info" align="center" width="90%">
<tbody>
<tr>
<td> </td>
</tr>
</tbody>
</table>
</div>
<br /><br />
<table width="90%" align="center" class="dark-space">
<tr>
<td width="3%"> </td>
<td width="11%"><div class="cen"><img src="../images/elementsymbols/dark.png" alt="Element Symbol" width="32" height="14" /><img
src="../images/elementsymbols/flying.png" alt="Element Symbol" width="32" height="14" /></div></td>
<!--Pokemon Element symbol. Same deal as with the Pokemon picture-sub "fire" for the element type, in all lowercase. Leave the width and height
alone.-->
<td width="18%"><div class="right">
<!--For these, ensure that the width value is the same length as the picture.-->
HP<br /><br />
Atk<br /><br />
Def</div></td>
<td width="21%"><div class="left">
<img src="../images/statincrements/60.png" alt=" " width="60" height="21" /><br /><br />
<img src="../images/statincrements/85.png" alt=" " width="85" height="21" /><br /><br />
<img src="../images/statincrements/42.png" alt=" " width="42" height="21" /></div></td>
<td width="6%"><div class="right">
Sp Atk<br /><br />
Sp Def<br /><br />
Spd</div></td>
<td width="21%"><div class="left">
<img src="../images/statincrements/85.png" alt=" " width="85" height="21" /><br /><br />
<img src="../images/statincrements/42.png" alt=" " width="42" height="21" /><br /><br />
<img src="../images/statincrements/91.png" alt=" " width="91" height="21" /></div></td>
<td width="2%"> </td>
</tr>
</table>
<div><br /><br /></div>
<table class="info" align="center" width="90%">
<tbody>
<tr>
<th width="3%"> </th>
<th class="left" width="31%">Set Name</th>
<th style="text-align: center;" width="19.3%">Nature</th>
<th width="26.1%"> </th>
<th style="text-align: center;" width="14.8%">Item</th>
<th width="16.1%"> </th>
</tr>
</tbody>
</table>
<div><br /></div>
<table width="100%">
<tbody>
<tr>
<td><br /><br /></td>
<td width="7.6%"> </td>
<td width="27%" class="left">MixKrow</td>
<td width="0.3%"> </td>
<td width="18.7%" class="cen">Naive</td>
<td width="18.4%" class="cen"> </td>
<td width="22.8%" class="cen">Expert Belt</td>
<td width="6.2%"> </td>
</tr>
</tbody>
</table>
<br />
<table class="info" align="center" width="90%">
<tbody>
<tr>
<th width="3%"> </th>
<th class="left" width="38%">Moves</th>
<th style="text-align: center;" width="59%">EVs</th>
</tr>
</tbody>
</table>
<div class="attackssect"><br />
<table width="100%">
<tr>
<td width="7.4%"> </td>
<td width="42.6%"><div class="left">
Taunt / Brave Bird<br />Heat Wave<br />Sucker Punch<br />Hidden Power Ice</div></td>
<td width="39.6%"><div class="cen">80 Sp Atk / 252 Spd / 176 Atk</div></td>
<td width="10.4%"> </td>
</tr>
</table>
<table width="100%">
<tr>
<td width="8.1%"> </td>
<td width="86.8%">
<div class="left"><p class="descript">Murkrow's high Speed and the possession of the strongest priority attack in NFE makes it a
useful revenge killer for any team who needs a Ground immunity, or counter to Kadabra. Heat Wave gives Murkrow a reliable way of dealing with
Bronzor, as well as giving Murkrow a more powerful attack against Grass-types than Hidden Power Ice. Sucker Punch is Murkrow's main attack,
slamming Misdreavus, Haunter and most notably Kadabra, very hard, while having the glory of STAB. Taunt works well in forcing the foe to either
switch, or use an attacking move, which allows you to be sure the foe doesn't set-up on a turn that you use Sucker Punch. Brave Bird is an
alternative to provide Murkrow a secondary STAB attack, and give Murkrow a surefire way of dealing with Monferno and Machoke, although most
Monfernos carry a priority attack of their own. Both abilities can work here, as Insomnia is useful against Yanma, Haunter and Golbat, who may try
to use Hypnosis on Murkrow, although the Super Luck boost can at times lead to OHKOs that would normally be 2HKOs.
<br /><br />
80 Sp Atk ensures Heat Wave is always a 2HKO on a 252 HP / 0 Sp Def Metang with Leftovers. It's also a 2HKO against a Levitate Bronzor who doesn't
invest very heavily in Special Defense. Heat Wave is also a 2HKO on any Grotle that doesn't invest more than 252 HP / 100 Sp Def with a +Sp Def
Nature. Speed is maximized with this set to make most use of Taunt and Murkrow's revenge-killing strategy, putting it one point under neutral-
natured, 252 Speed Electabuzz and Kadabra, although Sucker Punch is one's best option against these two, making a Speed tie nearly meaningless.
</p></div>
</td>
<td width="5.1%"> </td>
</tr>
</table>
<table class="info" align="center" width="90%">
<tbody>
<tr>
<th width="3%"> </th>
<th class="left" width="31%">Set Name</th>
<th style="text-align: center;" width="19.3%">Nature</th>
<th width="26.1%"> </th>
<th style="text-align: center;" width="14.8%">Item</th>
<th width="16.1%"> </th>
</tr>
</tbody>
</table>
<div><br /></div>
<table width="100%">
<tbody>
<tr>
<td><br /><br /></td>
<td width="7.6%"> </td>
<td width="27%" class="left">UtiliKrow</td>
<td width="0.3%"> </td>
<td width="18.7%" class="cen">Jolly</td>
<td width="18.4%" class="cen">Ability-Insomnia</td>
<td width="22.8%" class="cen">Leftovers</td>
<td width="6.2%"> </td>
</tr>
</tbody>
</table>
<br />
<table class="info" align="center" width="90%">
<tbody>
<tr>
<th width="3%"> </th>
<th class="left" width="38%">Moves</th>
<th style="text-align: center;" width="59%">EVs</th>
</tr>
</tbody>
</table>
<div class="attackssect"><br />
<table width="100%">
<tr>
<td width="7.4%"> </td>
<td width="42.6%"><div class="left">
Thunder Wave<br />Taunt<br />Snatch / Roost<br />Sucker Punch</div></td>
<td width="39.6%"><div class="cen">112 HP / 4 Atk / 68 Def / 76 Sp Def / 248 Spd</div></td>
<td width="10.4%"> </td>
</tr>
</table>
<table width="100%">
<tr>
<td width="8.1%"> </td>
<td width="86.8%">
<div class="left"><p class="descript">This Murkrow works as a lead, as well as being a very annoying teammate. Taunt shuts down the
likes of Bronzor, and sometimes forces switches, allowing Murkrow to paralyze the switch-in with Thunder Wave if the foe isn't a Ground-type.
Snatch is a nasty surprise for those who predict Sucker Punch, and try to use the turn to set-up. After using Snatch to steal stat boosts, Murkrow
can often use Taunt to prevent the foe from using it again, allowing it to use Sucker Punch or Thunder Wave on the foe. Common set-up attacks
include Dragon Dance and Swords Dance, which Murkrow can make full use of with Sucker Punch and its other utility moves.Sucker Punch is key to
take down faster foes, such as Kadabra. Although the low PP is undesirable, it provides Murkrow the best direct damage output, and works well in
tandem with Taunt by forcing the foe to attack, or switch. For those who don't want to chance Snatch, and whose team would benefit more from
direct Thunder Wave and Taunt usage, Roost is an option over Snatch.
<br /><br />
248 Speed puts Murkrow just behind a neutral-natured, 252 Speed Electabuzz and Kadabra, giving Murkrow the most Speed to pull off Taunt and
Thunder Wave to cripple fast-moving foes. Defenses are maximized to allow Murkrow opportunities to use Thunder Wave multiple times before being
revenge KOed by the foe. 4 Attack ensures that Murkrow's Sucker Punch is always a OHKO on a 0 HP, 0 Defense Misdreavus after Stealth Rock damage.
Other than that, Murkrow doesn't gain any key OHKOs or 2HKOs with Sucker Punch without significant Attack investment, which would then interrupt
its main role of annoying the foe.</p></div>
</td>
<td width="5.1%"> </td>
</tr>
</table>
<table>
<tr>
<td width="5.1%"> </td>
</tr>
<tr>
<td width="8.1%"> </td>
<td width="86.8%">
<div class="left"><p class="teamopt"><b>Team Benefit</b></p></div>
</td>
</tr>
<tr>
<td width="8.1%"> </td>
<td width="86.8%">
<div class="left"><p class="descript">Murkrow provides a nearly unique immunity to both Ground and Psychic attacks, giving Poison-
type Pokemon very good synergy. Nidorino and Nidorina make potent teammates because of this, giving them a potentially free switch-out to Murkrow
if one of their weaknesses are exploited, but have a hard time dealing with Murkrow's most common counters in themselves. Tentacool works in the
same way with Psychic and Ground weaknesses. While they do both fear Electric attacks, Tentacool can counter common problematic Pokemon such as
Magmar and, if Tentacool carries Ice Beam, Shelgon.<br /><br />Murkrow, especially the specially the UtiliKrow set, highly appreciates a rapid
spinner to rid of Stealth Rock damage, as it takes 25% away from it, making Tentacool another viable teammate. Staryu can sometimes lure Grass
attacks that Murkrow can switch into, although it should be noted that Murkrow won't usually be taking too much damage before it faints. Bronzor
is also notable, as it resists Rock and Ice attacks, and is neutral to Electric attacks. Bronzor can then switch to Murkrow when faced with a
Ground attack (Heatproof would be recommended), while having a retreat from attempting to be Taunted, which Mixkrow won't mind.</p></div>
</td>
<td width="5.1%"> </td>
</tr>
<tr>
<td width="8.1%"> </td>
<td width="86.8%">
<div class="left"><p class="teamopt"><b>Counters</b></p></div>
</td>
</tr>
<tr>
<td width="8.1%"> </td>
<td width="86.8%">
<div class="left"><p class="descript">Sneasel outspeeds any Murkrow, and can KO with Ice Punch, while taking little damage from
Sucker Punch. Marshtomp has enough defenses to take nearly any attack from Murkrow, and cause serious damage with Ice Punch, although one must be
wary of the Taunt variation if Stealth Rock is Marshtomp's initial job. Magmar has enough defenses and typing to take most of Murkrow's attacks,
and retaliate with Thunderpunch. Shelgon only fears a non-STAB Shadow Ball, and can retaliate with Dragon Claw, or use Murkrow as setup bait for
Dragon Dance.</p></div>
</td>
</tr>
</table>
<!--VERY IMPORTANT-The amount of divs for the next 4 lines MUST reflect how many strategy sets there are. 5 sets = 4 divs, etc.-->
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div><!-- close div id="page-body" --><br /><br /><br />
<iframe src="../ads.php" width="100%" height="150" name="Ads" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
<div style="visibility:hidden;"><div style="z-index:3;"><script language="JavaScript" src="http://www.counter160.com/js.js?
img=6"></script></div></div>
</td>
</tr>
</table>
</body>
</html>
Stylesheet:
- Code:
#intro {font-size:30px;font-weight:bold;color:#fff;text-decoration:none;}
#vitamins {font-size:20px;font-weight:bold;color:#fff;text-decoration:none;}
#poweritems {font-size:20px;font-weight:bold;color:#fff;text-decoration:none;}
#pokerus {font-size:20px;font-weight:bold;color:#fff;text-decoration:none;}
#berries {font-size:20px;font-weight:bold;color:#fff;text-decoration:none;}
#wildpokemon {font-size:20px;font-weight:bold;color:#fff;text-decoration:none;}
#trainers {font-size:20px;font-weight:bold;color:#fff;text-decoration:none;}
#questions {font-size:20px;font-weight:bold;color:#fff;text-decoration:none;}
#tiers {font-size:30px;font-weight:bold;color:#fff;text-decoration:none;}
#moves {font-size:30px;font-weight:bold;color:#fff;text-decoration:none;}
#prediction {font-size:30px;font-weight:bold;color:#fff;text-decoration:none;}
#team_build {font-size:30px;font-weight:bold;color:#fff;text-decoration:none;}
#teams {font-size:30px;font-weight:bold;color:#fff;text-decoration:none;}
#conclusion {font-size:30px;font-weight:bold;color:#fff;text-decoration:none;}
#navbar {
margin: 0;
padding: 0;
height: 1em; }
#navbar li {
list-style: none;
text-align:center;
float: left;
display: block;
padding: 0px 0px;
background-color: #180254;
color: #fff;
text-decoration: none; }
#navbar li ul {
display: none;
width: 10em;
background-color: #180254;}
#navbar li:hover ul {
display: block;
position: absolute;
margin: 0;
font-family:"Times New Roman", Arial;
font-size:17px;
padding: 0; }
#navbar li:hover li {
float: none;
background-color: #0d0130;}
#navbar li:hover li a {
background-color: #0d0130;
border-bottom: 1px solid #fff;
color: #fff;
}
#navbar li li a:hover {
background-color: #0022AA;
}
#navbar2 {
margin: 0;
padding: 0;
height: 0em;
width: 38.5em;
}
#navbar2 li {
list-style: none;
text-align:center;
display: block;
padding: 0px;
font-family:"Times New Roman", Arial;
background-color: #180254;
color: #fff;
text-decoration: none;
}
/*Possibly the control for the hovering purple area.*/
#navbar2 li ul {
text-align:justify;
width: 30em;
font-family:"Times New Roman", Arial;
display: none;
background-color: #180254;
}
#navbar2 li:hover ul {
text-align:justify;
overflow:auto;
width: 30em;
display: block;
position: absolute;
font-family:"Times New Roman", Arial;
margin: 0;
padding: 0;
}
#navbar2 li:hover li {
overflow:auto;
height: 30em;
width: 40em;
font-family:"Times New Roman", Arial;
float: none;
text-align:right;
background-color: #3333CC;
}
#navbar2 li:hover li a {
background-color: #3333CC;
font-family:"Times New Roman", Arial;
border-bottom: 1px solid #fff;
color: #fff;
}
#navbar2 li li a:hover {
font-family:"Times New Roman", Arial;
background-color: #062d42; }
.dark-space {
background: #180242;
color: white;
border: 1px solid #000000;
border-radius: 30px; -moz-border-radius: 20px; -webkit-border-radius: 20px;
}
.descript {
font-family: "Trebuchet MS", Arial, sans-serif;
font-size:13px;
}
.wrapper {
background-color:#180242;
padding:5px; }
.mainmenu{
font-size : 11px; color : #ffffff }
.bodyline {
background-color: #180254; border: 1px #242424 solid;}
.bodylinewidth {
width:98%}
.forumline {
background-color: #000000; border: 2px #242424 solid; }
.helpline {
background-color: #0f0233; border-style: none; }
.maintitle, .maintitle h1
{font-weight: bold; font-size: 22px; font-family: TrebuchetMS,Verdana,Arial,Helvetica,sans-serif;text-decoration: none; line-height : 120%; color
: #ffffff;}
.forumline .row1,.forumline .row2,.forumline .row3,.forumline .row3Right
{padding: 2px 3px;}.forumline td.pagination {padding:0; }
.maintitle h1
{margin: 0; padding: 0; display: inline; }
.gen
{ font-size : 12px; }
.genmed
{ font-size : 11px; }
.gensmall
{ font-size : 10px; }
.gen,.genmed,.gensmall
{ color : #ffffff; }
.cattitle
{ font-weight: bold; font-size: 12px ; letter-spacing: 1px; color : #3399ff}
a:link
{color:#3399ff}
a:active
{color:#3399ff;}
a:visited
{color:#3399FF;}
a:hover
{color:#DD6900}
a.gen,a.genmed,a.gensmall {
color: #3399ff;
text-decoration: none;
}
a.gen:hover,a.genmed:hover,a.gensmall:hover {
color: #dd6900;
text-decoration: underline;
}
a img {
border: none;
}
a.mainmenu{
text-decoration: none; color : #3399ff;
}
a.mainmenu:hover{
text-decoration: underline;
color : #dd6900;
}
a:link,a:active,a:visited {
color : #3399ff;
}
a:hover {
text-decoration: underline;
color : #dd6900;
}
body {
background-color: #180254;
background-image: url("images/background.jpg");
background-attachment: fixed;
color: #FFFFFF;}
hr {
height: 0px; border: solid #08011a 0px; border-top-width: 1px;}
input.liteoption {
background-color : #19041a;font-weight : normal;}
input {
background-color: #0f0233; }
p.headerfont {
font-size:30px;
font-weight:900;
}
p.red
{color:red;}
p.teamopt {
font-family: "Trebuchet MS", Arial, sans-serif;
font-size:27px;
line-height:0.6em;
}
p.tier {
font-family: "Trebuchet MS", Arial, sans-serif;
font-size:13px;
}
p.attacks {
font-family: "Trebuchet MS", Arial, sans-serif;
font-size:13px;
}
select {
background-color : #161659; }
table.info {
background: url('pokemon/natureitem-beta.png');
}
table.info th {
background-attachment:fixed;
background: url('pokemon/natureitem-beta.png');
text-align: left;
}
th {
color: #0066FF;
font-size: 13px;
font-weight : bold;
background-color: transparent;
height: 18px;
background-image: url("");
padding: 2px 3px;
}
th,td,p {
font-family: Verdana,Arial,Helvetica,sans-serif
}
td.row1,td.row3.over:hover {
background-color: #0f0233;
}
td.row2,td.row1.over:hover {
background-color: #0f0233;
}
td.row3 {
background-color: #08011a;
}
td.rowpic {
background-color: #dee3e7;
background-image: url("http://i75.servimg.com/u/f75/13/25/70/52/dark_b12.png");
}
td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {
background-image: url("http://i75.servimg.com/u/f75/13/25/70/52/dark_b12.png");
background-color:#dee3e7;
border: #000000;
border-style: solid;
height: 28px;
}
td.cat,td.catHead,td.catBottom
{height: 29px;border-width: 0px 0px 0px 0px;}
th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR
{font-weight: bold; border: #161659; border-style: solid; /*height: 20px;*/}
td.row3Right,td.spaceRow
{background-color: #08011a; border: #000000; border-style: solid;}
td.pourcentback { background-color : #180254; }
th.thHead,td.catHead
{ font-size: 12px; border-width: 1px 1px 0px 1px; }
th.thSides,td.catSides,td.spaceRow
{ border-width: 0px 1px 0px 1px; }
th.thRight,td.catRight,td.row3Right
{ border-width: 0px 1px 0px 0px; }
th.thLeft,td.catLeft
{ border-width: 0px 0px 0px 1px; }
th.thBottom,td.catBottom
{ border-width: 0px 1px 1px 1px; }
th.thTop { border-width: 1px 0px 0px 0px; }
th.thCornerL { border-width: 1px 0px 0px 1px; }th.thCornerR { border-width: 1px 1px 0px 0px; }
h1.cattitle
{margin:0; padding: 0; display:inline;}a.cattitle{ text-decoration: none; color : #3399ff; }
a.cattitle:hover
{ text-decoration: underline; }.forumlink{ font-weight: bold; font-size: 12px; color : #3399ff; }
a.forumlink
{ text-decoration: none; color : #3399ff; }a.forumlink:hover{ text-decoration: underline; color : #dd6900; }
.nav
{ font-weight: bold; font-size: 11px; color : #ffffff; }a.nav{ text-decoration: none; color : #3399ff; }
a.nav:hover
{ text-decoration: underline; }
.topictitle,h1,h2
{ font-weight: bold; font-size: 11px; color : #ffffff; }
div.topictitle
{display: inline;}
h2.topic-title
{display: inline; margin: 0; padding: 0;}
a.topictitle:link{ text-decoration: none; color : #3399ff; }
a.topictitle:visited{ text-decoration: none; color : #191985; }
a.topictitle:hover{ text-decoration: underline; color : #dd6900; }
.name{ font-size : 11px; color : #ffffff;}
.name a
{ text-decoration:none; }
.postdetails
{ font-size : 10px; color : #ffffff; }
.postbody
{ font-size : 12px; line-height: 18px}
a.postlink:link
{ text-decoration: none; color : #3399ff }
a.postlink:visited
{ text-decoration: none; color : #191985; }
a.postlink:hover
{ text-decoration: underline; color : #dd6900}
h1.pagetitle
{display: inline;margin: 0;padding: 0;font-size: 12px;color: #ffa34f;}
.resizebox .resize_content
{padding: 5px 10px;
display: inline-block;
}
.resizebox
.resize_filler
{border: none;padding: 0;width: 40px;display: inline-block;}
.namefont
{
font-family: "Trebuchet MS", Arial, sans-serif;
font-size:26px;
}
.cen
{
text-align:center;
}
.left
{
text-align:left;
}
.ability
{
font-size:13px;
color:red;
}
.right
{
text-align:right;
}
.red
{
color:red;
}
table.cen
{
margin-left: auto;
margin-right: auto;
font-size:13px;
text-align:left;
}
span.abilicol {
color:red;
}
span.cen {
text-align:center;
}
.infotext {
font-size:13px;
color:red;
}
p.artictxt {
font-size:12px;
text-align:center;
}
th.cen {
text-align:center;
}
th.cen.a {
text-decoration:none;
}
td.left {
text-align:left
;}
.tinytxt {
font-size:10px;
}
div.tablefont {
font-family: "Trebuchet MS", Arial, sans-serif;
}
table.border {
margin-left: auto;
margin-right: auto;
font-size:13px;
text-align:left;
height:40px;
border-top:2px solid #7c7c7e;
border-right:2px solid #2c2c2c;
border-bottom:2px solid #2c2c2c;
border-left:2px solid #7c7c7e;
}
td.border
{
border-top:1px solid #2c2c2c;
border-right:1px solid #7c7c7e;
border-bottom:1px solid #7c7c7e;
border-left:1px solid #2c2c2c;
}
td.borderdescript
{
border-top:1px solid #2c2c2c;
border-right:1px solid #7c7c7e;
border-bottom:1px solid #7c7c7e;
border-left:1px solid #2c2c2c;
text-align:left;
}
table.sortable {
margin-left: auto;
margin-right: auto;
font-size:13px;
text-align:left;
height:40px;
border-top:2px solid #7c7c7e;
border-right:2px solid #2c2c2c;
border-bottom:2px solid #2c2c2c;
border-left:2px solid #7c7c7e;
}
a.forumlink
{ text-decoration: none; color : #3399ff;}
span.descript
{
font-family: "Trebuchet MS", Arial, sans-serif;
font-size:13px;
}
span.left
{text-align:left;}
h2.spdboost
{
font-size:18px;
}
.tabs {
padding: .3em 0;
margin: 0;
border-bottom: 1px solid #000000;
}
.tabs li {
list-style: none;
margin: 0 0 0 .3em;
display: inline;
text-decoration:none;
}
.tabs li a {
padding: .3em .5em;
border: 1px solid #000000;
border-bottom-color: #000000 !important;
background: #180254;
color: #FFFFFF;
text-decoration: none;
}
.tabs li a:hover {
background: #0F0233;
border-color: #000000;
border-bottom-color: #180254;
text-decoration: none;
}
.tabs li strong {
padding: .3em .5em;
border: 1px solid #000000;
border-bottom-color: #180254;
text-decoration: none;
}
.tabs .tabspacer {
margin-left: 10%;
}
.tabsmoves {
padding: .3em 0;
margin: 0;
border-bottom: 1px solid #000000;
}
.tabsmoves li {
list-style: none;
margin: 0 0 0 .3em;
display: inline;
text-decoration:none;
}
.tabsmoves li a {
padding: .3em .5em;
border: 1px solid #000000;
border-bottom-color: #000000 !important;
/* ^Color of the line under the inactive tab. */
background: #180254; /*Color of the tab when it's not highlighted. */
color: #FFFFFF; /* Color of the text inside the tab. */
text-decoration: none;
}
.tabsmoves li a:hover {
background: #0F0233; /* Color of the tab when highlighted. */
border-color: #000000;
border-bottom-color: #180254;
text-decoration: none;
}
.tabsmoves li strong {
padding: .3em .5em;
border: 1px solid #000000;
border-bottom-color: #180254; /* bottom border of active tab. */
text-decoration: none;
}
.tabsmoves .tabspacer {
margin-left: 10em;
}
table.sortable thead a{
font-weight: bold;
color:#33B1FF;
cursor: default;
text-decoration:none;
}
input.button
{background-color : #0f0233;color : #ffffff;font-size: 11px; font-family: Verdana,Arial,Helvetica,sans-serif;}
input,textarea, select {color : #ffffff;font: normal 11px Verdana,Arial,Helvetica,sans-serif;border-color : #ffffff;}
body
{
background-color:"#FFFFFF";
}
th.cen {
text-align:center;
}
td.left {
text-align:left;
}
p.arkeis {
font-size:10px;
font-family:"Times New Roman", Arial;
}
p.tinytxt {
font-size:10px;
}
div.tablefont {
font-family: "Trebuchet MS", Arial, sans-serif;
font-size:13px;
}
ul.index {
font-family: "Trebuchet MS", Arial, sans-serif;
font-size:13px;
display:inline;
}
ul.index {
display:inline;
list-style-type:none;
}
The page as it looks now:
http://pokerealm.com/pokemon/beta-template-table.html
The issue I'm having this time is the alignment of the text 'Generation 4' and 'Generation 5'. What I hope to have is that text showing just above the two tab sets that I have up, the left having Generation 4 above it, and the right having Generation 5 above it. It might look okay on some screen resolutions, but I tested it on a few smaller resolutions (in particular 600x800), and the text 'Generation 5' looked nowhere near it should be.
What I attempted was to make a table based on percents just above the tabs so that I could hopefully align it above both tabs, but that would be too easy. I also looked online and discovered that I couldn't specify the width of a <li> tag. Since I can't do that, I'm not sure how I can define the width well enough so that it looks consistent on most screen resolutions.
Any help is appreciated.
Last edited by Cirrus on August 7th 2010, 12:25 am; edited 2 times in total (Reason for editing : Used a table.)
Cirrus- Forumember
- Posts : 38
Reputation : 0
Language : English
Re: More HTML Issues D:
What are you doing with the css sheet.
Creating a html page should have nothing to do with with that.
so you are going to have to explain in better details and exactly what you are doing and what you are trying to get.
the html code is all messed up no images or backgrounds appearing so i am not sure what your doing or trying get?
info added
Ok it looks like you tried taking the source code and adding it to your html page.. lol
Well to bad it's not that easy... hehe.
you can create a html page to look like that but that is not the way to do it you have to create it from scratch and add what you want.
Unless someone else knows a way to get that code to work from the source code you are useing?
but like i said i do not exactly know what it is you are trying to get anyway.. so please explain more.
hack if it's the whole page you want like that with all the same stuff. then just place it in a iframe and post to your htmp page.
i cant even test the css code you have it keeps saying it's an error? to may { } so you will have to go through and fix that too.
Creating a html page should have nothing to do with with that.
so you are going to have to explain in better details and exactly what you are doing and what you are trying to get.
the html code is all messed up no images or backgrounds appearing so i am not sure what your doing or trying get?
info added
Ok it looks like you tried taking the source code and adding it to your html page.. lol
Well to bad it's not that easy... hehe.
you can create a html page to look like that but that is not the way to do it you have to create it from scratch and add what you want.
Unless someone else knows a way to get that code to work from the source code you are useing?
but like i said i do not exactly know what it is you are trying to get anyway.. so please explain more.
hack if it's the whole page you want like that with all the same stuff. then just place it in a iframe and post to your htmp page.
- Code:
<center><iframe src='http://pokerealm.com/pokemon/beta-template.html 'width='100%' height='1024px' style='border: 1px solid #B27400'></iframe></center>
i cant even test the css code you have it keeps saying it's an error? to may { } so you will have to go through and fix that too.
kirk- Forumaster
- Posts : 11037
Reputation : 653
Language : English,Vulcan,Klingon, Romulan,& Gorn
Re: More HTML Issues D:
I'm trying to make it so that the Generation 4 text displays directly above the first 2 sets of Strategy and Move tabs. Then to the right, there is a second set of tabs, which I want the text Generation 5 to show directly above. Like this:
It shows up okay on higher screen resolutions, but when I look at it in a smaller screen res, it's really misaligned.
That's what it looks like in a 600x800 resolution. I want it to look the same as the first picture.
I fixed the stylesheet, BTW. It should work now, sorry for the issue.
It shows up okay on higher screen resolutions, but when I look at it in a smaller screen res, it's really misaligned.
That's what it looks like in a 600x800 resolution. I want it to look the same as the first picture.
I fixed the stylesheet, BTW. It should work now, sorry for the issue.
Cirrus- Forumember
- Posts : 38
Reputation : 0
Language : English
Re: More HTML Issues D:
Try experimenting with...
Css (add margin-left)
Your table (<center> G5)
Css (add margin-left)
- Code:
.descript {
font-family: "Trebuchet MS", Arial, sans-serif;
font-size:13px; margin-left:25px;
}
Your table (<center> G5)
- Code:
<tr>
<td width="10%"> </td>
<td width="22%"><span class="descript">Generation 4</span></td>
<td width="68%"><span class="descript"><center>Generation 5</center></span></td>
</tr>
Re: More HTML Issues D:
Okay, I messed around with the td widths and the spacing of the tabs, but it ultimately didn't do much. In a 600x800 screen resolution, it was too much to the left, and on my computer (1600x900), it's too far to the right. Which basically meant nothing I tried could get them to be in the same spot because of percentage differences.
What I tried now is putting both the tabs and the generation text in the same table cell in a full-blown table for both elements. It looks fine in most screen resolutions (even Internet Explorer didn't complain ), but now there's a small line gap between the 2 table cells. In other words, the black line that goes through the screen breaks halfway through the page because of the three separate <td>s. I tried assigning the line to the table and tr as a class (<table class="tabs"> and <tr class="tabs">), but all that did was add a second line, and it didn't make it look the same.
If that small 2-pixel gap could be connected to the 2 <tr>s so that it looks like a full black line, my problem would be fixed. Any help?
What I tried now is putting both the tabs and the generation text in the same table cell in a full-blown table for both elements. It looks fine in most screen resolutions (even Internet Explorer didn't complain ), but now there's a small line gap between the 2 table cells. In other words, the black line that goes through the screen breaks halfway through the page because of the three separate <td>s. I tried assigning the line to the table and tr as a class (<table class="tabs"> and <tr class="tabs">), but all that did was add a second line, and it didn't make it look the same.
If that small 2-pixel gap could be connected to the 2 <tr>s so that it looks like a full black line, my problem would be fixed. Any help?
Cirrus- Forumember
- Posts : 38
Reputation : 0
Language : English
Re: More HTML Issues D:
i dont understand this code it's all messed i dont get anything to appear on my html page.
what version are you useing because i am getting noting but blank images.
i think i managed to get the strategy for generation 5 over like the other one by just changing the margin to 0%..
but when i try to preview it on my html page with the code you have above.
it looks nothing like your preview, no colors no nothing.. but you can see that strategy is in line like the first one in generation 4.
and the real odd thing is i am getting the top of my test forum header come up at the bottom of the page.. hahah
plus i also have your css in my style sheet to just to try to test this to get what you want.. but look what it looks like on my page.
See this is way i always create html pages from scratch.. half of the coding the way it is in there dose not even have to be like that and can be much easier.. sure it will take more time.. but idk i am more old school.
and i am not saying the coding is bad.. but something is definitely up with it on my html page.
I am just confused with the whole thing and i am sure it's just something simple.. but what is baffling me is why it would appare on your html page if it is not appearing on mine.
a html page is a html page..
see check it out?
Info added
well i like the music for sure
Anyway i manged to at least get the background color and the header appearing in my footer... lol i know wacky but it's still not showing alot of images..
Anyway i cant realy tell if this did much?
i just change the margins to
50 25 and back from zero like i had the first time to 11%
As far as those two red circles you have.. man i can barely even see that.
but i am trying to figure it out.. it might be a browser thing to.. where are those lines locate in the code anyway.. thats what i am trying to find now then i can determine if it can be fixed.
but i mean you can barely even see it.. but your forum i guess it would be better if they were just connected like they should be.
oh did you try ronos tabel code.
what version are you useing because i am getting noting but blank images.
i think i managed to get the strategy for generation 5 over like the other one by just changing the margin to 0%..
but when i try to preview it on my html page with the code you have above.
it looks nothing like your preview, no colors no nothing.. but you can see that strategy is in line like the first one in generation 4.
and the real odd thing is i am getting the top of my test forum header come up at the bottom of the page.. hahah
plus i also have your css in my style sheet to just to try to test this to get what you want.. but look what it looks like on my page.
See this is way i always create html pages from scratch.. half of the coding the way it is in there dose not even have to be like that and can be much easier.. sure it will take more time.. but idk i am more old school.
and i am not saying the coding is bad.. but something is definitely up with it on my html page.
I am just confused with the whole thing and i am sure it's just something simple.. but what is baffling me is why it would appare on your html page if it is not appearing on mine.
a html page is a html page..
see check it out?
Info added
well i like the music for sure
Anyway i manged to at least get the background color and the header appearing in my footer... lol i know wacky but it's still not showing alot of images..
Anyway i cant realy tell if this did much?
i just change the margins to
50 25 and back from zero like i had the first time to 11%
- Code:
<td width="50%" style="text-align:center;"><span class="descript">Generation 4
</span>
<ul class="tabs">
<li class="tabspacer"><strong>Strategy</strong></li>
<li><a href="moves/murkrow.html">Moves</a></li>
</ul></td>
<td width="25%" style="text-align:center;"><span class="descript">Generation 5</span>
<ul class="tabs">
<li style="margin-left:11%;"><strong>Strategy</strong></li>
<li><a href="moves/bw/murkrow.html">Moves</a></li>
</ul>
</td>
As far as those two red circles you have.. man i can barely even see that.
but i am trying to figure it out.. it might be a browser thing to.. where are those lines locate in the code anyway.. thats what i am trying to find now then i can determine if it can be fixed.
but i mean you can barely even see it.. but your forum i guess it would be better if they were just connected like they should be.
oh did you try ronos tabel code.
kirk- Forumaster
- Posts : 11037
Reputation : 653
Language : English,Vulcan,Klingon, Romulan,& Gorn
Re: More HTML Issues D:
I know why the images aren't showing up for you. All the images in that page are relatively-linked. Since you're uploading it to a different host and looking at it from another program, they're not showing up. But that doesn't have anything to do with the alignment issue, so it should be okay.
The lines are showing because the class 'tabs' has border-bottom: 1px solid #000000; in it.
The unordered list that I'm using for the 2 tabs on the page have it as a class, thus the line shows up. The problem is the line stops when the table row stops, and all the margins and paddings and everything are set to 0 because I haven't changed them at all. I tried taking the padding: .3em thing out too, but that didn't help. I also tried RoNo's table thing, but it didn't work, assigning the black line to the whole table just made an additional line under the first one. When I added it to the <tr>, it didn't help much, either.
The issue shows up in IE, Chrome and Firefox, from what I tested. And in all screen resolutions that I can test.
The lines are showing because the class 'tabs' has border-bottom: 1px solid #000000; in it.
- Code:
.tabs {
padding: .3em 0;
margin: 0;
border-bottom: 1px solid #000000;
}
The unordered list that I'm using for the 2 tabs on the page have it as a class, thus the line shows up. The problem is the line stops when the table row stops, and all the margins and paddings and everything are set to 0 because I haven't changed them at all. I tried taking the padding: .3em thing out too, but that didn't help. I also tried RoNo's table thing, but it didn't work, assigning the black line to the whole table just made an additional line under the first one. When I added it to the <tr>, it didn't help much, either.
The issue shows up in IE, Chrome and Firefox, from what I tested. And in all screen resolutions that I can test.
Cirrus- Forumember
- Posts : 38
Reputation : 0
Language : English
Re: More HTML Issues D:
well i am out of ideas right know.
ankillian may know or have something to try to help fix it with css.
css is not my best area.. but i can usually get by with most(depending)
I am out for tonight but if you dont have it by tomorrow i will take another crack at it and everthing over again.
ankillian may know or have something to try to help fix it with css.
css is not my best area.. but i can usually get by with most(depending)
I am out for tonight but if you dont have it by tomorrow i will take another crack at it and everthing over again.
kirk- Forumaster
- Posts : 11037
Reputation : 653
Language : English,Vulcan,Klingon, Romulan,& Gorn
Similar topics
» Changes Have Causes Issues With html codes etc
» HTML coding issues
» Custom Landing Page Issues (HTML)
» HTML Issues - Certain Words
» HTML, Java, and other coding issues. (HELP)
» HTML coding issues
» Custom Landing Page Issues (HTML)
» HTML Issues - Certain Words
» HTML, Java, and other coding issues. (HELP)
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum