2017-02-01 6 views
1

基本的に目標は、このコードの間に2つのメインセクションを持つことです。 1すべてのテキストである左側のセクションと、右側にあるもう1つのセクションは、テーブルイメージの下にあるプロパティのテーブルです。HTML書式設定エラー

@font-face { font-family: UbuntuG; src: url('ubuntu-fonts/Ubuntu-L.ttf'); } 
 
body { 
 
    background-color: #1d1d1d; 
 
} 
 
h1 { 
 
    color: white; font-family: UbuntuG; font-size: 30; 
 
} 
 
h2 { 
 
    color: white; font-family: UbuntuG; font-size: 18; 
 
} 
 
p { 
 
    color: white; font-family: Arial; font-size: 16; 
 
} 
 
p_ANum { 
 
    color: white; font-family: Arial; font-size: 10; text-align: left; 
 
} 
 

 
table, th, td { 
 
    border: 1px solid #1d1d1d; border-spacing: 0; color: white; font-family: Arial; font-size: 16; 
 
} 
 
td { 
 
    text-align: center; 
 
    padding: 0; 
 
    height: 48px; 
 
    min-width:48px; 
 
} 
 
ul{ 
 
    margin: 0px 0; 
 
} 
 
a { 
 
     display: block; 
 
     text-decoration: none; 
 
     color: white; 
 
     height:43px; 
 
     line-height:43px; 
 
}
<html> 
 
    <head> 
 
    <title>Periodic Table</title> 
 
    <meta content="??"> 
 
    <link rel="stylesheet" type="text/css" href="theme.css"> 
 
    <style> 
 
     table, th, td { border: 5px solid white; border-spacing: 0; color: #1d1d1d; font-family: Arial; font-size: 16; } 
 
    </style> 
 
    </head> 
 
    <body style="margin-top:20;margin-left:15%;margin-right:3%;"> 
 
    <h1>Hydrogen</h1> 
 
    
 
    <div align="right"> 
 
     <table><tr><h2>Atomic Properties</h2> 
 
      <td bgcolor=white><b>Atomic number</b></td> 
 
      <td bgcolor=white>1</td> 
 
     </tr><tr> 
 
      <td bgcolor=white><b>Atomic Mass</b></td> 
 
      <td bgcolor=white>1.007825 g.mol ^-1</td> 
 
     </tr><tr> 
 
      <td bgcolor=white><b>Electronegativity</b></td> 
 
      <td bgcolor=white>2.1</td> 
 
     </tr><tr> 
 
      <td bgcolor=white><b>Densitys</b></td> 
 
      <td bgcolor=white>0.0899*10 ^-3 g.cm ^-3 at 20 °C</td> 
 
     </tr><tr> 
 
      <td bgcolor=white><b>Melting Point</b></td> 
 
      <td bgcolor=white>- 259.2 °C</td> 
 
     </tr><tr> 
 
      <td bgcolor=white><b>Boiling Point</b></td> 
 
      <td bgcolor=white>- 252.8 °C</td> 
 
     </tr><tr> 
 
      <td bgcolor=white><b>Vanderwaals radius</b></td> 
 
      <td bgcolor=white>0.12 nm</td> 
 
     </tr><tr> 
 
      <td bgcolor=white><b>Ionic Radius</b></td> 
 
      <td bgcolor=white>0.208 (-1) nm</td> 
 
     </tr><tr> 
 
      <td bgcolor=white><b>Isotopes</b></td> 
 
      <td bgcolor=white>3</td> 
 
     </tr><tr> 
 
      <td bgcolor=white><b>Electronic shell</b></td> 
 
      <td bgcolor=white>1s^1</td> 
 
     </tr><tr> 
 
      <td bgcolor=white><b>Energy of first Ionisation</b></td> 
 
      <td bgcolor=white>1311 kJ.mol -1</td> 
 
     </tr><tr> 
 
      <td bgcolor=white><b>Discovered by</b></td> 
 
      <td bgcolor=white>Henry Cavendish 1766</td> 
 
     </tr> 
 
    </div> 
 
     <div align="Right"> 
 
     <img src="assets/H_atomic.png"> 
 
     <img src="assets/H_mainpic.png"> 
 
    </div> 
 
    <span align="left"> 
 
     <p> 
 
First element in the periodic table. In normal conditions it’s a colourless, odourless and insipid gas, formed by diatomic molecules, H2. The hydrogen atom, symbol H, is formed by a nucleus with one unit of positive charge and one electron. Its atomic number is 1 and its atomic weight 1,00797 g/mol. It’s one of the main compounds of water and of all organic matter, and it’s widely spread not only in The Earth but also in the entire Universe. There are three hydrogen isotopes: protium, mass 1, found in more than 99,985% of the natural element; deuterium, mass 2, found in nature in 0.015% approximately, and tritium, mass 3, which appears in small quantities in nature, but can be artificially produced by various nuclear reactions. 
 

 
Uses: The most important use of hydrogen is the ammonia synthesis. The use of hydrogen is extending quickly in fuel refinement, like the breaking down by hydrogen (hydrocracking), and in sulphur elimination. Huge quantities of hydrogen are consumed in the catalytic hydrogenation of unsaturated vegetable oils to obtain solid fat. Hydrogenation is used in the manufacture of organic chemical products. Huge quantities of hydrogen are used as rocket fuels, in combination with oxygen or fluor, and as a rocket propellent propelled by nuclear energy. 
 
Hydrogen can be burned in internal combustion engines. Hydrogen fuel cells are being looked into as a way to provide power and research is being conducted on hydrogen as a possible major future fuel. For instance it can be converted to and from electricity from bio-fuels, from and into natural gas and diesel fuel, theoretically with no emissions of either CO2 or toxic chemicals. 
 

 
Properties: Common hydrogen has a molecular weight of 2,01594 g. As a gas it has a density of 0.071 g/l at 0ºC and 1 atm. Its relative density, compared with that of the air, is 0.0695. Hydrogen is the most flammable of all the known substances. Hydrogen is slightly more soluble in organic solvents than in water. Many metals absorb hydrogen. Hydrogen absorption by steel can result in brittle steel, which leads to fails in the chemical process equipment. 
 

 
At normal temperature hydrogen is a not very reactive substance, unless it has been activated somehow; for instance, by an appropriate catalyser. At high temperatures it’s highly reactive. 
 

 
Although in general it’s diatomic, molecular hydrogen dissociates into free atoms at high temperatures. Atomic hydrogen is a powerful reductive agent, even at ambient temperature. It reacts with the oxides and chlorides of many metals, like silver, copper, lead, bismuth and mercury, to produce free metals. It reduces some salts to their metallic state, like nitrates, nitrites and sodium and potassium cyanide. It reacts with a number of elements, metals and non-metals, to produce hydrides, like NAH, KH, H2S and PH3. Atomic hydrogen produces hydrogen peroxide, H2O2, with oxygen. 
 

 
Atomic hydrogen reacts with organic compounds to form a complex mixture of products; with etilene, C2H4, for instance, the products are ethane, C2H6, and butane, C4H10. The heat released when the hydrogen atoms recombine to form the hydrogen molecules is used to obtain high temperatures in atomic hydrogen welding. 
 

 
Hydrogen reacts with oxygen to form water and this reaction is extraordinarily slow at ambient temperature; but if it’s accelerated by a catalyser, like platinum, or an electric spark, it’s made with explosive violence. 
 
     </p> 
 
    </span> 
 
    
 
    </body> 
 
</html>

+0

私はあなたの行ヘッダーに 'th'を使って調べます。また、 'bgcolor'は非標準です(https://developer.mozilla.org/en/docs/Web/HTML/Element/td)。代わりにCSSを使うべきです。 –

答えて

1

最初の問題は、あなたが隣同士に表示する要素にIDやクラスのいずれかを使用していないということです。これは、あなたのCSSが目標とすることを非常に困難にします。提供されたフィドルで、クラス.left.rightを追加して修正します。

次の問題は、<table>タグを閉じることを忘れたことです。私は提供されたフィドルでそれを修正しました。

第3の問題は、テーブルセルにbackground-colorcolorの両方がwhiteであり、読みにくいことです。最初にテーブルの終了タグがないため(これはスタイルが適用されていないため)、これを気付かなかったのです。あなたは黒に、背景色や色のいずれかを変更することで、そのを修正することができます

td { 
    color: #000; 
} 

第4の問題点は、あなたが本当に彼らがテーブルと同じ容器内に収容しているように、あなたのイメージを移動したいということです、

の代わりに...期待通りに山車が働くように:

</tr> 
</div> 
    <div align="Right"> 
    <img src="assets/H_atomic.png"> 
    <img src="assets/H_mainpic.png"> 
</div> 

単純に使用します。

</tr> 
    <img src="assets/H_atomic.png"> 
    <img src="assets/H_mainpic.png"> 
</div> 

私はこれを私のフィドルで修正しました。

今すぐコードがアップ固定されていることを、あなたが望むようにコンポーネントを表示させるためには、あなたが彼らに幅を与える必要があり、そのように、左にそれらをフロート:

.left, .right { 
    float: right; 
    width: 46%; 
    padding: 2%; 
} 

を参照してくださいthis fiddle実際の例については、

希望すると便利です。 :)

+0

本当にありがとうございました。しかし、ページを3つの等級に分けたい場合は、左端の画像、中央のテキスト、右端の同じ値の表をどうすればいいでしょうか? – Apocolyptic

+0

幅が33.33%(余白を差し引いた幅)の3つの列が必要です。あなたはその点でBootstrapを調べたいかもしれません:)しかし、それはあなたの元々の質問ではありません。新しい質問をする必要があります。 –

+0

よろしくお願いします。 – Apocolyptic