Issue with code

43 posts / 0 new
Last post
AUS-LGBT's picture
Issue with code

Hi I've run into an issue with CSS, my id's don't seem to work and I've tried all the solutions I can think of and the most I've done to change it is add a container around it lol. Any help would be much appreciated

Attachments

Yes

Subscription Note: 

Choosing to subscribe to this topic will automatically register you for email notifications for comments and updates on this thread.

Email notifications will be sent out daily by default unless specified otherwise on your account which you can edit by going to your userpage here and clicking on the subscriptions tab.

AUS-LGBT's picture
Here's my HTML if that helps

Here's my HTML if that helps

Attachments

Attach Image/Video?: 

Yes
arakish's picture
To apply styles to an HTML

To apply styles to an HTML tag with the "id" attribute, the style needs to be proceeded with a "#" character such as shown below:

div#page { height: auto; width: 950px; margin-left: 50px; } /* control main text width for easier reading */

In the example above, the style can only be applied to a <div> that has the "id" of "page". In the HTML, it would be thus:

<div id="page">
some other stuff here
</div>

rmfr

EDIT: forgot to use entity for the less than and greater than symbols

AUS-LGBT's picture
Sorry I tried that and it

Sorry I tried that and it didn't work

Grinseed's picture
Vanderbilt will be here any

Vanderbilt will be here any time now to call bullshit on all this because atheists dont believe in code.

arakish's picture
Sorry, it has to be in the

Sorry, it has to be in the CSS file. Then link to it from inside the HTML file.

rmfr

arakish's picture
Here is an old HTML file I

Here is an old HTML file I wrote that also shows how to imbed styles within the HTML file itself. Just copy and paste the below into an editor, then save it as an HTML file, then open in your favorite browser.

Notice the section that begins <style type="text/css"> and ends </style>. Of course, not all the styles were used, but were there if I needed.

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>New Onaviu Skill Listing</title>

<style type="text/css">
<!--
div#page { height: auto; width: 875px; float: left; left: 50px; position: relative; }
div#skilllist { height: auto; width: 850px; }
body { background: #cccccc; font-family: "Verdana", sans-serif; font-size: 10pt; color: #000000; }
a:link { color: #000099; text-decoration: none; }
a:visited { color: #990099; text-decoration: none; }
a:hover { font-style: italic; color: #009900; text-decoration: underline; }
a:active { font-style: italic; color: #990000; text-decoration: underline; }
abbr { color: #006666; }
abbr:hover { cursor: help; font-style: italic; }
p { padding: 5px; }
/* Strong Styles */
.str { font-weight: bold; }
.strred { font-weight: bold; color: #990000; }
.strgrn { font-weight: bold; color: #009900; }
.strbrn { font-weight: bold; color: #666600; }
.strprp { font-weight: bold; color: #660066; }
.strgry { font-weight: bold; color: #333333; }
.strblu { font-weight: bold; color: #000099; }
/* Emphasized Styles */
.emp { font-style: italic; }
.empred { font-style: italic; color: #990000; }
.empgrn { font-style: italic; color: #009900; }
.empbrn { font-style: italic; color: #666600; }
.empprp { font-style: italic; color: #660066; }
.empgry { font-style: italic; color: #333333; }
.empblu { font-style: italic; color: #000099; }
/* Underlined Styles */
.und { text-decoration: underline; }
.undred { text-decoration: underline; color: #990000; }
.undgrn { text-decoration: underline; color: #009900; }
.undbrn { text-decoration: underline; color: #666600; }
.undprp { text-decoration: underline; color: #660066; }
.undgry { text-decoration: underline; color: #333333; }
.undblu { text-decoration: underline; color: #000099; }
/* Strong and Emphasized Styles */
.stremp { font-style: italic; font-weight: bold; }
.strempred { font-style: italic; font-weight: bold; color: #990000; }
.strempgrn { font-style: italic; font-weight: bold; color: #009900; }
.strempbrn { font-style: italic; font-weight: bold; color: #666600; }
.strempprp { font-style: italic; font-weight: bold; color: #660066; }
.strempgry { font-style: italic; font-weight: bold; color: #333333; }
.strempblu { font-style: italic; font-weight: bold; color: #000099; }
/* Strong and Underlined Styles */
.strund { font-weight: bold; text-decoration: underline; }
.strundred { font-weight: bold; text-decoration: underline; color: #990000; }
.strundgrn { font-weight: bold; text-decoration: underline; color: #009900; }
.strundbrn { font-weight: bold; text-decoration: underline; color: #666600; }
.strundprp { font-weight: bold; text-decoration: underline; color: #660066; }
.strundgry { font-weight: bold; text-decoration: underline; color: #333333; }
.strundblu { font-weight: bold; text-decoration: underline; color: #000099; }
/* Emphasized and Underlined Styles */
.empund { font-style: italic; text-decoration: underline; }
.empundred { font-style: italic; text-decoration: underline; color: #990000; }
.empundgrn { font-style: italic; text-decoration: underline; color: #009900; }
.empundbrn { font-style: italic; text-decoration: underline; color: #666600; }
.empundprp { font-style: italic; text-decoration: underline; color: #660066; }
.empundgry { font-style: italic; text-decoration: underline; color: #333333; }
.empundblu { font-style: italic; text-decoration: underline; color: #000099; }
/* Strong, Emphasized, and Underlined Styles */
.strempund { font-style: italic; font-weight: bold; text-decoration: underline; }
.strempundred { font-style: italic; font-weight: bold; text-decoration: underline; color: #990000; }
.strempundgrn { font-style: italic; font-weight: bold; text-decoration: underline; color: #009900; }
.strempundbrn { font-style: italic; font-weight: bold; text-decoration: underline; color: #666600; }
.strempundprp { font-style: italic; font-weight: bold; text-decoration: underline; color: #660066; }
.strempundgry { font-style: italic; font-weight: bold; text-decoration: underline; color: #333333; }
.strempundblu { font-style: italic; font-weight: bold; text-decoration: underline; color: #000099; }
/* Main Table Styles*/
table { border: 1px solid #000000; border-collapse: separate; empty-cells: hide; table-layout: auto; }
td { border: 1px solid #000000; padding: 3px; }
tr#hdrred { background: #cc6666; font-family: "Times New Roman", serif; font-size: 20pt; font-style: italic; font-weight: bold; color: #000000; }
tr#hdrblu { background: #6666cc; font-family: "Times New Roman", serif; font-size: 16pt; font-style: italic; font-weight: bold; color: #000000; }
/* XScripts Styles */
sup { font-size: 80%; }
sub { font-size: 80%; }
/* Indentation Styles */
.indent005 { margin-left: 5px; }
.indent010 { margin-left: 10px; }
.indent015 { margin-left: 15px; }
.indent020 { margin-left: 20px; }
.indent025 { margin-left: 25px; }
.indent030 { margin-left: 30px; }
.indent040 { margin-left: 40px; }
.indent050 { margin-left: 50px; }
.indent060 { margin-left: 60px; }
.indent080 { margin-left: 80px; }
.indent100 { margin-left: 100px; }
.indent120 { margin-left: 120px; }
.indent140 { margin-left: 140px; }
.indent160 { margin-left: 160px; }
.indent180 { margin-left: 180px; }
.indent200 { margin-left: 200px; }
/* Copyright and Special Notice Style */
.copyright { font-family: "Times New Roman", serif; font-size: 9pt; font-style: italic; padding: 2px; color: #006666; text-align: center; }
.specnote { font-size: 8pt; font-style: italic; padding: 2px; color: #996600; text-align: center; }
.lastmod { font-size: 8pt; font-style: italic; padding: 2px; color: #666666; text-align: center; }
/* Page Titles and Headers */
h1 { font-family: "Times New Roman", serif; font-size: 32pt; font-style: italic; font-weight: bold; color: #a32638; }
h2 { font-family: "Times New Roman", serif; font-size: 28pt; font-style: italic; font-weight: bold; color: #a32638; }
h3 { font-family: "Times New Roman", serif; font-size: 24pt; font-style: italic; font-weight: bold; color: #a32638; }
h4 { font-family: "Times New Roman", serif; font-size: 20pt; font-style: italic; font-weight: bold; color: #a32638; }
h5 { font-family: "Times New Roman", serif; font-size: 16pt; font-style: italic; font-weight: bold; color: #a32638; }
h6 { font-family: "Times New Roman", serif; font-size: 12pt; font-style: italic; font-weight: bold; color: #a32638; }
/* Text Sizes */
.size4 { font-size: 4pt; }
.size6 { font-size: 6pt; }
.size8 { font-size: 8pt; }
.size10 { font-size: 10pt; }
.size12 { font-size: 12pt; }
.size14 { font-size: 14pt; }
.size16 { font-size: 16pt; }
.size18 { font-size: 18pt; }
.size20 { font-size: 20pt; }
.size22 { font-size: 22pt; }
.size24 { font-size: 24pt; }
.size26 { font-size: 26pt; }
.size28 { font-size: 28pt; }
.size30 { font-size: 30pt; }
.size32 { font-size: 32pt; }
.size34 { font-size: 34pt; }
.size36 { font-size: 36pt; }
.size40 { font-size: 40pt; }
.size44 { font-size: 44pt; }
.size48 { font-size: 48pt; }
.size52 { font-size: 52pt; }
.size56 { font-size: 56pt; }
.size60 { font-size: 60pt; }
.size64 { font-size: 64pt; }
.size68 { font-size: 68pt; }
.size72 { font-size: 72pt; }
.size78 { font-size: 78pt; }
.size84 { font-size: 84pt; }
.size90 { font-size: 90pt; }
.size96 { font-size: 96pt; }
.size102 { font-size: 102pt; }
.size108 { font-size: 108pt; }
.size114 { font-size: 114pt; }
.size120 { font-size: 120pt; }
.size126 { font-size: 126pt; }
.size132 { font-size: 132pt; }
.size138 { font-size: 138pt; }
.size144 { font-size: 144pt; }
-->
</style>

<script language="JavaScript" type="text/javascript">
<!--
function academic () {
document.getElementById('skilllist').innerHTML="<table align='center' width='90%'> <tr align='center' id='hdrred'> <td colspan='4'>Academic Skills</td> </tr> <tr align='center' id='hdrblu'> <td>Group</td> <td>Category</td> <td>Subcategory</td> <td>Skills</td> </tr> <tr align='center'> <td rowspan='3'>Academics</td> <td>Linguistics<sup>1</sup></td> <td rowspan='3'></td> <td>Lip Reading<sup>2</sup>, Auditory Languages†, Olfactory Languages†, Somatic Languages†, Tactile Languages†, Thought Languages†, Visual Languages†, Vocal Languages†, Written Languages†, others?…</td> </tr> <tr align='center'> <td>Lore</td> <td>Culture†, Region†, Artifact, Demon, Dragon, Faerie, Fauna, Flora, Heraldry†, History†, Metal, Species/Race†, Religion, Spell, Stone, Symbolic<sup>3</sup>, Wood, Undead, Runic<sup>3</sup>, Glyphic<sup>3</sup>, Philosophy, Wardic<sup>3</sup>, Xeno†, etc.</td> </tr> <tr align='center'> <td>Science</td> <td>Research, Mathematics, Algebra, Archeology, Architecture, Astronomy, Chemistry, Physics, Calculus, Orbital Mechanics, Celestial Mechanics, Engineering†, Geology, Geographic Information Science, Quantum Mechanics, Micro-Biology, Molecutronics, etc.</td> </tr></table><p align='left'>† — indicates skill has several sub-skills, each of which is a separate skill.<br /><sup>1</sup> — Linguistics examples: <span class='strempgry'>Auditory</span> - not vocal; cricket chirping, cicada buzzing, etc; <span class='strempgry'>Olfactory</span> - communication through odors/chemicals; <span class='strempgry'>Somatic</span> - American Sign Language; <span class='strempgry'>Tactile</span> - American Braille; <span class='strempgry'>Thought</span> - the logic here is for mental/telepathic languages where Elfin thoughts are completely different than Orcish thoughts, or the thought processes of the Maazhat; <span class='strempgry'>Visual</span> - not somatic; Dorjoluna flight patterns, the color flashes of Dhralorga wings, the cuttlefish, etc.; <span class='strempgry'>Vocal</span> - spoken, and would include such things as frog bellows, dolphin chirps and clicks, etc.; <span class='strempgry'>Written</span> - with letters, runes, glyphs, symbols, etc.<br /><sup>2</sup> — must also know the vocal language.<br /><sup>3</sup> — <span class='empred'>For Onaviu <span class='str'>ONLY</span></span>. Symbols, Runes, Glyphs, and Wards are 4 different methods for imbedding power into things. Symbols are sculpted to put power into structures. Runes are gravened to put power into items. Glyphs are written to put power onto paper for later use. Wards are traced to put power temporariy into/onto a place. As said, this is for Onaviu only, unless you wish to use it.</p>";}

function athletic () {
document.getElementById('skilllist').innerHTML="<table align='center' width='90%'> <tr align='center' id='hdrred'> <td colspan='4'>Athletic Skills</td> </tr> <tr align='center' id='hdrblu'> <td>Group</td> <td>Category</td> <td>Subcategory</td> <td>Skills</td> </tr> <tr align='center'> <td rowspan='3'>Athletics</td> <td>Gymnastic</td> <td rowspan='3'></td> <td>Acrobatics, Jumping, Power Training, Contortions, MA Dance<sup>1</sup>, Downhill Skiing, Gym-based Sports†, Pole Vaulting, Surfing, Water Skiing, Diving, Juggling, Tumbling, etc.</td> </tr> <tr align='center'> <td>Movement</td> <td>Climbing, Flying/Gliding, Running, Swimming, Cross Country Skiing, Rappelling, Rowing, Skating, Stilt Walking, Tightrope Walking, Jumping, Scaling, Sprinting, Hurdle Running, etc.</td> </tr> <tr align='center'> <td>Body Development</td> <td>Concussion Hits</td> </tr></table><p align='left'>† — indicates skill has several sub-skills, each of which is a separate skill.<br /><sup>1</sup> — This is the skill used by the Dervish profession from RoCo2, pg 5. Reasoning: The Dervish's dancing is <span class='strempred'>NOT</span> a Trade: Performance skill, although it could be used as such. IMHO, Dervish combat dancing is much more athletic. Alternatively, one could even put Dervish Combat Dancing (MA Dance) into the Combat: Expertise category, or, but not likely, Combat: Training: Unarmed category.</p>";}

function combat () {
document.getElementById('skilllist').innerHTML="<table align='center' width='90%'> <tr align='center' id='hdrred'> <td colspan='4'>Combat Skills</td> </tr> <tr align='center' id='hdrblu'> <td>Group</td> <td>Category</td> <td>Subcategory</td> <td>Skills</td> </tr> <tr align='center'> <td rowspan='10'>Combat</td> <td rowspan='8'>Training</td> <td>Unarmed</td> <td>Wrestling, MA Grapple, MA Strike, MA Sweep, Biting, Clawing, Brawling, etc.</td> </tr> <tr align='center'> <td>Melee</td> <td>Broad Sword, Battle Axe, Spear, War Hammer, Two Handed Sword, Quarterstaff, Nunchaku, etc.</td> </tr> <tr align='center'> <td>Thrown</td> <td>Dagger, Dart, Spear, Javelin, Bola, Boomerang, DrosYa, etc.</td> </tr> <tr align='center'> <td>Missile</td> <td>Bows, Crossbows, Slings, etc.</td> </tr> <tr align='center'> <td>Directed Spells</td> <td>Elemental Bolts, Energy Bolts, Elemental Balls, Energy Balls, Illusionary Strikes, Raw Channel, etc.</td> </tr> <tr align='center'> <td>Siege Weapons</td> <td>Catapult, Ballistae, Cannon, <abbr title='Magnetic Linear Acceleration'>MLA</abbr> Lobber, etc.</td> </tr> <tr align='center'> <td>Firearms</td> <td>Musket, Rifle, Pistol, Blunderbuss, Thunderstick, etc.</td> </tr> <tr align='center'> <td>Energy Weapons</td> <td>Laser Rifle, Blaster Pistol, Plasma Rifle, Essence Lance, Force Sword, etc.</td> </tr> <tr align='center'> <td>Combat Expertise</td> <td rowspan='2'></td> <td>Disarm, Maneuver in Soft/Flexible Armor<sup>1</sup>, Maneuver in Rigid/Inflexible Armor<sup>1</sup>, Mounted Combat‡, Multiple Attacks, Protect, Restricted Quarters Combat, Subdual, <span class='strempred'>Missile Deflection</span>, Reverse Stroke‡, Two Weapon Combo†, MA Dancing<sup>2</sup>, etc.</td> </tr> <tr align='center'> <td>Shield</td> <td>Shield Bash, Shield Move-Through</td> </tr></table><p align='left'>† — indicates skill has several sub-skills, each of which is a separate skill.<br />‡ — GM dependent. Each weapon/type may be separate skills.<br /><sup>1</sup> — <span class='strempgry'>Soft/Flexible Armors</span> include chain, scale, ring mail, soft leather, some padded leathers, etc. <span class='strempgry'>Rigid/Inflexible Armors</span> include plate mail, rigid leather, plate, laminant, some padded leathers, etc. The easiest way to distinguish between soft/flexible armors and rigid/inflexible armors is to hold it up off the ground by at least a meter, perhaps two, and let it drop. If it forms into a lumpy pile, it is soft/flexible armor. If it still somewhat holds its shape, it is rigid/inflexible armor. Another way to tell is if the armor can be laid flat, then folded and rolled up like a bedroll.<br /><sup>2</sup> — for those who feel the Dervish's combat dancing fits better into this category instead of Athletics: Gymnastic.<br /><span class='strempred'>Missile Deflection</span> is a Restricted skill. Additionally, it is skill only learnable in certain cultures.</p><p align='left'><span class='empred'>For Onaviu <span class='str'>ONLY</span>:</span> I am not going to be a super rules monger on the Two Weapon Combo (TWC) skill. Although I probably should be a rules monger, I am going to consider the combo of Sword-Right/Dagger-Left the same as the combo Sword-Left/Dagger-Right. I know the two are quite different, but I have seen some true Ambidextrous persons capable of switching the two weapons without any apparent penalty. <span class='strempbrn'>However</span>, if your character does <span class='strempred'>NOT</span> have the Ambidextrous ability, your character suffers a -30 penalty to the TWC skill. Thus, you can simply list the TWC as TWC: Sword/Dagger. Of course, TWC works best with like weapons (i.e., TWC: Long Sword/Long Sword). The best weapon combo I have seen is General Grievous in <span class='empblu'>Star Wars III: Revenge of the Sith</span>. But was still no match for Obi-Wan.</p>";}

function discipline () {
document.getElementById('skilllist').innerHTML="<table align='center' width='90%'> <tr align='center' id='hdrred'> <td colspan='4'>Discipline Skills</td> </tr> <tr align='center' id='hdrblu'> <td>Group</td> <td>Category</td> <td>Subcategory</td> <td>Skills</td> </tr> <tr align='center'> <td rowspan='12'>Discipline</td> <td>Body</td> <td rowspan='2'></td> <td>Adrenal Focus, Mind Over Body, Stabilization, Stun Removal<sup>2</sup>, Stunned Maneuvering<sup>2</sup>, etc.</td> </tr> <tr align='center'> <td>Mental</td> <td>Meditation‡, Control Lycanthropy, Mnemonics, Speed Reading, Stun Removal<sup>2</sup>, Stunned Maneuvering<sup>2</sup>, etc.</td> </tr> <tr align='center'> <td rowspan='10'>Psions<sup>1</sup></td> <td>Electromagnetic Manipulation</td> <td>Bio-Energy, Electrical Bolt, Electrical Shield, Electrical Wall, Energy Control, Interface, Magnetic Bolt, Magnetic Control, Magnetic Field, Magnetic Shield, Magnetic Wall, Potential Control</td> </tr> <tr align='center'> <td>Harming</td> <td>Bio-Deregulation, Cutting, Organ Destruction, Pain, Psychic Dissection, Degeneration, Separate Spirit, Skeletal Destruction, Stunning, Tissue Destruction</td> </tr> <tr align='center'> <td>Healing</td> <td>Bio-Regulation, Cut Repair, Organ Repair, Unpain, Psychic Surgery, Regeneration, Restore Spirit, Skeletal Repair, Stun Relief, Tissue Repair</td> </tr> <tr align='center'> <td>Metapsions</td> <td>Astral Projection, Metasense, Psychometry, Raw Channel, Sensory Externalization, Shadowmind, Teleportation, Transfer</td> </tr> <tr align='center'> <td>Physical</td> <td>Body Discipline, Changing, Density Control, Desolidification, Dodging, Energy Dispersal, Haste, Hypervision, Infrared Vision, Mind Discipline, Sense Discipline, Ultrasonic/Hypersonic Hearing, Ultraviolet Vision</td> </tr> <tr align='center'> <td>Photonic Manipulation</td> <td>Photon Blast, Luminosity Control, Photonic Shield, Photonic Wall</td> </tr> <tr align='center'> <td>Kinetic Manipulation</td> <td>Flight, Kinetic Bolt, Kinetic Control, Kinetic Field, Kinetic Shield, Kinetic Wall, Telekinesis</td> </tr> <tr align='center'> <td>Radiation Manipulation</td> <td>Radiation Bolt, Radiation Control, Radiation Shield, Radiation Wall</td> </tr> <tr align='center'> <td>Telepathy</td> <td>Behavioral Trigger, Concealment, Confusion, Control, Detection, Empathy, Illusion, Memory Alteration, Mind Defense, Mind Shield, Mind Store, Mind Trap, Paralyze, Probe, Sense Destruction, Sleep, Suggestion, Tele-Receive, Tele-Send</td> </tr> <tr align='center'> <td>Thermal Manipulation</td> <td>Cryonic Bolt, Cryonic Shield, Cryonic Wall, Flame Control, Hyperthermia, Hypothermia, Ice Control, Pyro Bolt, Pyro Shield, Pyro Wall, Temperature Control</td> </tr></table><p align='left'>† — indicates skill has several sub-skills, each of which is a separate skill.<br />‡ — GM dependent on whether different types of Meditation are separate skills (i.e. - the Trances from RMFRP; Healing, Death, Sleep, Cleansing, Transcendence, etc.)<br /><sup>1</sup> — I really liked the categorization created by Defendi, but I never liked the category names and some psion names. Thus, names have been changed. I also added some psions.<br /><sup>2</sup> — Although "stunning" is mostly mental, have you ever had your hand and forearm go numb and tingly after a blow? Aw, just shake it off…</p>";}

function outdoor () {
document.getElementById('skilllist').innerHTML="<table align='center' width='90%'> <tr align='center' id='hdrred'> <td colspan='4'>Outdoor Skills</td> </tr> <tr align='center' id='hdrblu'> <td>Group</td> <td>Category</td> <td>Subcategory</td> <td>Skills</td> </tr> <tr align='center'> <td rowspan='4'>Outdoor</td> <td>Animal Handling</td> <td rowspan='4'></td> <td>each animal type is a separate skill</td> </tr> <tr align='center'> <td>Riding</td> <td>each animal type is a separate skill</td> </tr> <tr align='center'> <td>Drive/Pilot</td> <td>each vehicle type is a separate skill</td> </tr> <tr align='center'> <td>Survival</td> <td>each biome/environment type is a separate skill</td> </tr></table>";}

function perception () {
document.getElementById('skilllist').innerHTML="<table align='center' width='90%'> <tr align='center' id='hdrred'> <td colspan='4'>Perception Skills</td> </tr> <tr align='center' id='hdrblu'> <td>Group</td> <td>Category</td> <td>Subcategory</td> <td>Skills</td> </tr> <tr align='center'> <td rowspan='3'>Perception<sup>1</sup></td> <td>Discernment</td> <td rowspan='3'></td> <td>Alertness<sup>2</sup>, Auditory, Direction, Olfactory, Power, Psion, Reality, Spatial Location, Tactile, Taste, Time, Visual, etc.</td> </tr> <tr align='center'> <td>Searching</td> <td>Detect Traps, Locate Hidden, Surveillance, Read Tracks, Observation, etc.</td> </tr> <tr align='center'> <td>Navigation</td> <td>Astral, Coastal Marine<sup>3</sup>, Celestial Marine<sup>3</sup>, Planar, Terrestrial, Underground, Spatial, etc.</td> </tr></table><p align='left'>† — indicates skill has several sub-skills, each of which is a separate skill.<br /><sup>1</sup> — I made some slight changes to the Perception Group to account for some skills I wanted in this group but were not included in the Public Playtest v1.0.<br /><sup>2</sup> — If you want an "overall" perception skill, then use Alertness and consider all others as specializations.<br /><sup>3</sup> — these are for those who feel that these are two different skills. Coastal Marine is for navigating along ocean coasts where the coast never leaves <abbr title='Line Of Sight'>LOS</abbr>. Celestial Marine is for navigating across oceans where land may not be <abbr title='Line Of Sight'>LOS</abbr> for the greater part of the journey.</p>";}

function social () {
document.getElementById('skilllist').innerHTML="<table align='center' width='90%'> <tr align='center' id='hdrred'> <td colspan='4'>Social Skills</td> </tr> <tr align='center' id='hdrblu'> <td>Group</td> <td>Category</td> <td>Subcategory</td> <td>Skills</td> </tr> <tr align='center'> <td rowspan='3'>Social<sup>1</sup></td> <td>Influence</td> <td rowspan='3'></td> <td>Charm, Dupe, Intimidate, Trade, Bribery, Diplomacy, Interrogation, Propaganda, Public Speaking, etc.</td> </tr> <tr align='center'> <td>Leadership</td> <td>Bolster Moral (allies), Instill Fear (foes)</td> </tr> <tr align='center'> <td>Awareness</td> <td>Contacting, Mingling, Scrounging, Streetwise, etc.</td> </tr></table><p align='left'><sup>1</sup> — I made some slight changes to the Social Group to account for some skills I wanted in this group but were not included in the Public Playtest v1.0.</p>";}

function subterfuge () {
document.getElementById('skilllist').innerHTML="<table align='center' width='90%'> <tr align='center' id='hdrred'> <td colspan='4'>Subterfuge Skills</td> </tr> <tr align='center' id='hdrblu'> <td>Group</td> <td>Category</td> <td>Subcategory</td> <td>Skills</td> </tr> <tr align='center'> <td rowspan='3'>Subterfuge</td> <td>Ambush</td> <td rowspan='3'></td> <td>Melee, Ranged, Thrown, Unarmed, etc.</td> </tr> <tr align='center'> <td>Prowling<sup>1</sup></td> <td>Stalking, Hiding</td> </tr> <tr align='center'> <td>Trickery</td> <td>Pick Pockets, Stage Magic, Sleight of Hand, Card/Dice Cheating, etc.</td> </tr></table><p align='left'><sup>1</sup> — Prowling is the new Category under Subterfuge for Stalking and Hiding. IMHO, <span class='empgrn'>Stalking a target</span> is a <span class='strempred'>completely</span> different skill than <span class='empgrn'>Hiding from a target</span>. Although both may use the same stats for bonus, none shall ever convince me the two skills are the same or combinable.</p>";}

function trades () {
document.getElementById('skilllist').innerHTML="<table align='center' width='90%'> <tr align='center' id='hdrred'> <td colspan='4'>Trades Skills</td> </tr> <tr align='center' id='hdrblu'> <td>Group</td> <td>Category</td> <td>Subcategory</td> <td>Skills</td> </tr> <tr align='center'> <td rowspan='19'>Trades<sup>1</sup></td> <td>Compostion</td> <td></td> <td>Musical Scoring, Reporting, Saga Writing, Speech Writing, Song Writing, Playwright, Artistic Painting, Drafting, Drawing, Cartography, etc.</td> </tr> <tr align='center'> <td colspan='4'></td> </tr> <tr align='center'> <td rowspan='12'>Crafting</td> <td>Metal</td> <td>Armorer, Blacksmith, Tool Maker, Weapon Smith, Etching, Foundry, etc.</td> </tr> <tr align='center'> <td>Food</td> <td>Cooking, Baking, Brewing, Curing, Distilling, Winery, Miller, Culinary Art, Smoking, etc.</td> </tr> <tr align='center'> <td>Cloth</td> <td>Weaving, Spinning, Dying, Sewing, Embroidering, Sail Making, Tailoring, Upholstering, etc.</td> </tr> <tr align='center'> <td>Rope</td> <td>Rope Making, Knottery, Net Maker, Trickery, Macramé, etc.</td> </tr> <tr align='center'> <td>String</td> <td>Net Maker, Macramé, Crocheting, Knitting, etc.</td> </tr> <tr align='center'> <td>Leather</td> <td>Cobbler, Saddler, Tanner, Tooler, Furrier, Skinner, etc.</td> </tr> <tr align='center'> <td>Stone</td> <td>Sculpting, Brick Making, Glass Blower, Lapidary, Masonry, Cutting, Ceramics, Pottery, etc.</td> </tr> <tr align='center'> <td>Wood</td> <td>Carving, Furniture Making, Cabinetry, Boatwright, Shipwright, Carpentry, Cartwright, Lumberer, Wheelwright, Lathing, Cooper, Fletcher, Wicker Worker, etc.</td> </tr> <tr align='center'> <td>Paper</td> <td>Book Binder, Paper Making, etc.</td> </tr> <tr align='center'> <td>Metal Working</td> <td>Iron, Tin, Steel, Copper, Brass, Silver, Gold, Platinum, Bronze, Mithril, each metal is separate skill, etc.</td> </tr> <tr align='center'> <td>Falsification</td> <td>Camouflage, Disquise, Forgery, etc.</td> </tr> <tr align='center'> <td id='dkgrn'>many others…</td> <td id='dkgrn'>far too many to even attempt a listing…</td> </tr> <tr align='center'> <td colspan='4'></td> </tr> <tr align='center'> <td>Mechanical</td> <td rowspan='4'></td> <td>Locks, Traps, Gimmickry, Machination†, Mechanization†, etc.</td> </tr> <tr align='center'> <td>Medical</td> <td>First Aid‡, Diagnostics‡, Herbalism, Poison, Midwifery‡, Surgery‡, Pharmacology, Dentistry‡, Second Aid‡, Autopsy‡, Hypnosis‡, etc.</td> </tr> <tr align='center'> <td>Performance</td> <td>Acting, Dancing, Divination, Mimery, Play Instrument†, Poetic Improvisation, Singing, Tale Telling, Ventriloquism, etc.</td> </tr> <tr align='center'> <td>Vocation</td> <td>Advertising, Barber, Begging, Caving, Farming, Guide, Military Organization, Miner, Rancher, Sailing, Scribing, Seneschal, Teacher, Trapper, Valet, Calligrapher, Evaluation†, Embalmer, Horticulture, Masseur, Taxidermist, Enameler, Painting, Billeting, etc.</td> </tr></table><p align='left'>† — indicates skill has several sub-skills, each of which is a separate skill.<br />‡ — GM dependent on whether different species are separate skills, which they should be.<br /><sup>1</sup> — The Trades group, specifically the Crafting and Vocation categories, could be the "catch-all" for most skills not listed and won't fit elsewhere.</p>";}

function magical () {
document.getElementById('skilllist').innerHTML="<table align='center' width='90%'> <tr align='center' id='hdrred'> <td colspan='4'>Magical Skills</td> </tr> <tr align='center' id='hdrblu'> <td>Group</td> <td>Category</td> <td>Subcategory</td> <td>Skills</td> </tr> <tr align='center'> <td rowspan='3'>Magical<sup>1</sup></td> <td>Delving</td> <td rowspan='3'></td> <td>Attunement, Runes</td> </tr> <tr align='center'> <td>Expertise</td> <td>Grace, Spell Trickery, Transcendence</td> </tr> <tr align='center'> <td>Manipulation</td> <td>Channeling, Power Projection</td> </tr></table><p align='left'><sup>1</sup> — Use this for normal <abbr title='Rolemaster Unified System'>RMUS</abbr>.</p>";}

function power () {
document.getElementById('skilllist').innerHTML="<table align='center' width='90%'> <tr align='center' id='hdrred'> <td colspan='4'>Power Skills</td> </tr> <tr align='center' id='hdrblu'> <td>Group</td> <td>Category</td> <td>Subcategory</td> <td>Skills</td> </tr> <tr align='center'> <td>Power<sup>1</sup></td> <td></td> <td></td> <td>Awareness, Development, Employment, Mastery, Manipulation, Ritual†, Scribing, Specialization†, Structuring</td> </tr></table><p align='left'>† — indicates skill has several sub-skills, each of which is a separate skill.<br /><sup>1</sup> — for Onaviu only, but others may use if desired.</p>";}

function spells () {
document.getElementById('skilllist').innerHTML="<p align='left'>And for those who wish for Spell List Skill categories…</p><table align='center' width='90%'> <tr align='center' id='hdrred'> <td colspan='4'>Spell Lists Skills</td> </tr> <tr align='center' id='hdrblu'> <td>Group</td> <td>Category</td> <td>Subcategory</td> <td>Skills</td> </tr> <tr align='center'> <td rowspan='12'>Spell Lists</td> <td rowspan='4'>Own Realm</td> <td>Own Base</td> <td>each list is as separate skill</td> </tr> <tr align='center'> <td>Open</td> <td>each list is as separate skill</td> </tr> <tr align='center'> <td>Closed</td> <td>each list is as separate skill</td> </tr> <tr align='center'> <td>Other Base</td> <td>each list is as separate skill</td> </tr> <tr align='center'> <td colspan='3'></td> </tr> <tr align='center'> <td rowspan='3'>Other Realm</td> <td>Open</td> <td>each list is as separate skill</td> </tr> <tr align='center'> <td>Closed</td> <td>each list is as separate skill</td> </tr> <tr align='center'> <td>Base</td> <td>each list is as separate skill</td> </tr> <tr align='center'> <td colspan='3'></td> </tr> <tr align='center'> <td rowspan='3'>Arcane Realm</td> <td>Open</td> <td>each list is as separate skill</td> </tr> <tr align='center'> <td>Closed</td> <td>each list is as separate skill</td> </tr> <tr align='center'> <td>Base</td> <td>each list is as separate skill</td> </tr></table>";}
//-->
</script>

</head>

<body onload="academic();">

<div id="page">

<h3>New Skill Listing for Onaviu</h3>

<p class="emprng">But can also be used for the current RMU system. Or, as a guidelines for others' worlds.</p>

<p>Skills in <span class="strempred">bolded, emphasized, and red</span> text are Restricted Skills, regardless. Clicking the links below will load new tables.</p>

<p><a href="#" onclick="academic();">Academic</a>  |  
<a href="#" onclick="athletic();">Athletic</a>  |  
<a href="#" onclick="combat();">Combat</a>  |  
<a href="#" onclick="discipline();">Discipline</a>  |  
<a href="#" onclick="outdoor();">Outdoor</a>  |  
<a href="#" onclick="perception();">Perception</a>  |  
<a href="#" onclick="social();">Social</a>  |  
<a href="#" onclick="subterfuge();">Subterfuge</a>  |  
<a href="#" onclick="trades();">Trades</a>  |  
<a href="#" onclick="magical();">Magical</a>  |  
<a href="#" onclick="power();">Power</a>  |  
<a href="#" onclick="spells();">Spell Lists</a></p>

<div align="center" id="skilllist"></div><br />

<p class="copyright">Copyright © 2013 by Concept Visions, LLC</p>

<!-- Document's Last Modification -->
<p class="lastmod">This document was last modified on:
<script language="JavaScript" type="text/javascript">
<!--
document.write(document.lastModified);
//-->
</script></p>

<!-- Top of Page Link -->
<p><a href="#top">Top of Page</a></p>

</div>

</body>

</html>

rmfr

AUS-LGBT's picture
I tried adding my own style

I tried adding my own style and tried using that format of div#ect to see if that did anything and it erased my image and text that went with that image, so I'm not really sure what to do. And sorry if I'm not understanding much I've only just started coding like a couple days ago.

arakish's picture
Can you show the code again?

Can you show the code again? It would be best to paste it like I did in the above post. However, you will have to change the "<" to "&lt;" and the ">" to "&gt;" else the forum software won't show the code. For that, the best thing to do is create a copy of the file and do a Find and Replace. Then select the whole file and paste into the Comment text box.

Boy it would help if I weren't 8 or 9 hours behind you.

rmfr

AUS-LGBT's picture
&lt!DOCTYPE html&lt

&lt!DOCTYPE html&lt
&lthtml&lt
&lthead&lt
&ltmeta charset="utf-8"&lt
&lttitle>LIONSGATELIONSGATEHomeWorld Wide GamingLorem ipsum dolor sit amet, consectetur adipiscing elit. Proin elit nisi, dictum at consectetur vel, maximus non nunc. Maecenas lobortis velit ac accumsan accumsan.About UsLorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a risus diam. Nam vitae placerat enim, nec ullamcorper odio. Phasellus semper tempus libero, vitae commodo enim sagittis at. Nulla facilisi. Nulla molestie nisi et odio auctor egestas. Maecenas commodo nisl a faucibus dictum.What We DoLorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a risus diam. Nam vitae placerat enim, nec ullamcorper odio. Phasellus semper tempus libero, vitae commodo enim sagittis at. Nulla facilisi. Nulla molestie nisi et odio auctor egestas. Maecenas commodo nisl a faucibus dictum.Subscribe to our NewsletterSubscribeLIONSGATEThe world's greatest gaming website created by Emilae.LIONSGATE GAMING, copyright ©2018

AUS-LGBT's picture
Lol I tried the &It and that

Lol I tried the &It and that happened haha whoops

arakish's picture
Looking at this, I do not the

Looking at this, I do not the closing head and title tags (</head> and </title>). No closing html tag either (</html>).

As Logic said, try using pastebin (https://pastebin.com/index). Just create a new account. A sample of what I tried in a post below.

Sorry, but I am tired. Long day. Fly back home tomorrow. Might be up late (for me).

rmfr

AUS-LGBT's picture
HTMLhttps://pastebin.com
arakish's picture
Miss AUS

Miss AUS

Here is one problem:

Line 28 (CSS): background-image:url("../images/gaming.html");

A background image must be an image, not HTML file. Unless, HTML5 does allow an HTML file to be a background image. I have not had time to look into HTML5 much since it released. That is why most of my HTML files are still HTML4.1.

======================================================================

This MIGHT be another problem. The CSS file extension should be "*.css" not uppercase.

Line 6 (HTML): <link rel="stylesheet" href="CSS/StyleWebsite.CSS">

======================================================================

Another:

Line 45 (HTML): <section id "boxes" style="text-align:center";>

You don't need the semicolon (;), or it should be within the quotemark. And there is a second one:

Line 48 (HTML): <img src="./images/lion.jpg" style="position=center; width:150px";>

And the period (.) is not needed in front of "/images/lion.jpg"

======================================================================

Other than that I don't see any problems. I know I could download the files, but without the other referenced files, It would not work for me.

rmfr

AUS-LGBT's picture
I should have probably

I should have probably clarified more about my problem, see I put the styles in the html to get the pretty format that I wanted because I couldn't get it from the id's. I probably should of mentioned that because I don't have any problems from them, but I still changed what you recommended and the page came out the same.

arakish's picture
Where are the styles located

Where are the styles located in the HTML file?

rmfr

AUS-LGBT's picture
Line 45 - section id "boxes"

Line 45 - section id "boxes" style="text-align:center"
Line 48 - img src="./images/lion.jpg" style="position=center; width:150px"

I tried removing the . before images but my picture wouldn't show. I also removed the < so that the code would show when I post this

arakish's picture
Is the "image" directory

Is the "image" directory directly below where the HTML file is located?

Damn! My fault again. Try removing both the period and the slash.

rmfr

EDIT: Here are some links discussing how Absolute and Relative paths work in HTML.

https://www.lifewire.com/absolute-and-relative-paths-3466467

https://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/

https://www.w3schools.com/Html/html_filepaths.asp

AUS-LGBT's picture
Sorry I mean when I took off

Sorry I mean when I took off the period my image wouldn't show, when I put it back it does

AUS-LGBT's picture
I learnt the . before the /

I learnt the . before the / here
https://www.w3schools.com/html/html_filepaths.asp

arakish's picture
OK. You got it. What about

OK. You got it. What about the CSS file? Still have problems with the HTML?

And sorry about that. I am still tired. Had four days of of driving and hiking.

rmfr

arakish's picture
Miss AUS

Miss AUS

Post away with any problems. I am going to bed. It is 2300hrs where I am at (post will log as 2200hrs).

Keep plugging, you'll get it.

rmfr

AUS-LGBT's picture
Lol thanks and goodnight :)

Lol thanks and goodnight :)

AUS-LGBT's picture
Yeah, the id's still don't

Yeah, the id's still don't work, I only used the styles to make up for it but there are still things I want to do with styling the web page that I cant without them.
Oh sounds like you had a long trip, hope it was fun :)

AUS-LGBT's picture
Lol I figured it out XD I

Lol I figured it out XD I left out the = in my boxes section and I put an incorrect term in the width section in CSS so neither of the ids were functioning. Its all good now, thanks for the help :)

arakish's picture
I knew you would get it

I knew you would get it sooner or later. You've already proven to have brains to go with the beauty. If you have any other problems, I'll be around to help.

rmfr

AUS-LGBT's picture
Thank you so much <3 I

Thank you so much <3 I figured it can be a little stressful going through all the code and having the solutions not work so I really appreciate it :)

Tin-Man's picture
*stumbling into room

*stumbling into room unsteadily*... *shaking head to clear the fog*.... Sorry, ladies and gents. Didn't mean to interrupt. But I accidentally tried reading some of these posts, and a couple of my stabilizer circuits got fried. It's almost like the adults talking in a Charlie Brown cartoon. Whoa.... *shaking head again*... *grabbing door frame to steady self*.... Uh, I'm just gonna go lay down for a bit. Maybe find a technician. Good to see you again, Miss AUS. Carry on... *stumbles back out of room*...

LogicFTW's picture
Use pastebin or other

Use pastebin or other websites like it to copy and paste your code. And provide a link to it. You can even tell it to use html in the css style and it will highlight and color code your code to some extent.

Also, if you have time, download a student evaluation version of microsoft visual studio (It was, at least a few years ago free to use for a few years, may need a .edu email though.)

It's powerful editors and compilers can spot many problems for you, even before you try to compile, like a missed semicolon, improper headings, metadata etc.

Also: the real fun begins when you get basic coding syntax down and the program compiles fine, but does not run as expected.

I do recommend you continue to work at coding and learning, can do it all for free and online, While I did learn how to code in school, (software engineer,) I would say 90+ percent of what I know came from being self taught. While I have moved to cyber security side of things, a competent person that knows their stuff about programing is a very rewarding, and, (to me at least,) fun career path. If both you and arakish get stuck I can try looking at your work so far, I am not fluent in html 5.1+ but; the basics have not changed much.

 
 

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

▮          I am an atheist that always likes a good debate.          ▮
▮   Please include @LogicFTW in responses directed to me.    ▮
▮        Useful list on forum usage. A.R. Member since 2016.      ▮
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

arakish's picture
Thanks again Logic. And

Thanks again Logic. And thanks for offering to help. I have been what is called a "HTML Code Monkey" when I began using HTML almost 25 years ago. Damn! Where does the time go? I shall be the first to admit that I have never done anything super fancy with HTML, but I have learned CSS, Javascript, PHP, damn, can't remember it all. Guess it because I only use HTML to create information pages with little or no interactivity. Just was never something I focused in as a career. Sometimes wished I had because Internet Technologies can be fun...

rmfr

LogicFTW's picture
@arakish

@arakish

I have been what is called a "HTML Code Monkey" when I began using HTML almost 25 years ago.

Been there and done that with C++ back in the day okay maybe not 25 years back, but still over a decade ago.

The day I figured out that debugging, quality assurance, and stress testing was the real coding work was the day I began to move towards working for myself instead of being another code monkey. While I definitely needed the experience, being the base code monkey fixing other people's mistakes all day instead of writing some of your own stuff is not nearly as fun or rewarding. Of course now I still just fix other people's mistakes, (and get paid really well for it!) I just do it from a more top end, macro view and turn into a real problem solver. Of course all the real money in the US is now in cyber security as while people are willing to outsource the heavy lifting for coding these days, you can't really oursource cyber security if you take it seriously. If I ever bothered to get a high level government security clearance I would make more money then I could ever possibly spend.

Maybe because it is my living, but I find internet technologies so often to be quite frustrating. You would not believe what passes for decent "code" especially in the security space. While I have spent my life and career understanding code and all it's possible flaws.

I cringe even at this website (atheist republic) security flaws. All the more reason to remain anonymous when I visit here. Although I do understand why this website is setup the way it is. Atheist do not organize and make the "leaders" boatloads of money like organized religion does. (I have worked with religious institutions and they seem to have no problem cutting me very large checks for my work!)
 
 

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

▮          I am an atheist that always likes a good debate.          ▮
▮   Please include @LogicFTW in responses directed to me.    ▮
▮        Useful list on forum usage. A.R. Member since 2016.      ▮
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Pages

Donating = Loving

Heart Icon

Bringing you atheist articles and building active godless communities takes hundreds of hours and resources each month. If you find any joy or stimulation at Atheist Republic, please consider becoming a Supporting Member with a recurring monthly donation of your choosing, between a cup of tea and a good dinner.

Or make a one-time donation in any amount.