2017-02-01 12 views
1

Grundsätzlich ist das Ziel, 2 Hauptabschnitte zwischen diesem Code zu haben. 1 Abschnitt auf der linken Seite, der alles Text ist und der andere, der auf der rechten Seite ist, die oben ist die Tabelle der Eigenschaften dann unter den Tabellenbildern.HTML Formatierungsfehler

@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

Ich würde mit 'th' für Ihre Zeilenüberschriften betrachten. Beachten Sie auch, dass "bgcolor" kein Standard ist (https://developer.mozilla.org/en/docs/Web/HTML/Element/td) und Sie stattdessen CSS verwenden sollten. –

Antwort

1

Das erste Problem ist, dass Sie, die Sie nebeneinander weder IDs oder Klassen an den Elementen verwenden angezeigt werden sollen. Dies macht es sehr schwer für Ihr CSS zu zielen. Ich werde das in der bereitgestellten Geige beheben, indem ich die Klassen .left und .right hinzufüge.

Das nächste Problem ist, dass Sie vergessen haben, Ihr <table> Tag zu schließen. Ich habe das in der bereitgestellten Geige behoben.

Das dritte Problem ist, dass Sie sowohl background-color als auch color von white für Ihre Tabellenzellen haben, so dass sie sehr schwer zu lesen sind. Sie haben dies zunächst nicht bemerkt, weil Ihr End-Tag für die Tabelle fehlte (was bedeutete, dass die Stile nicht darauf angewendet wurden). Sie können, dass durch Änderung entweder die Hintergrundfarbe oder Farbe schwarz reparieren:

td { 
    color: #000; 
} 

Das vierte Problem ist, dass Sie wirklich Ihre Bilder bewegen wollen, so dass sie innerhalb des gleichen Behälter wie der Tabelle enthalten sind, so dass der Schwimmer wie erwartet ...

statt Arbeit:

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

einfach verwenden:

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

Ich habe das in meiner Geige behoben.

Nun, da der Code oben geregelt wird, um die Komponenten wie Sie sich anzeigen lassen machen möchten, können Sie sie mit einer Breite geben müssen, und treiben sie nach links, wie zum Beispiel:

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

Siehe this fiddle für ein funktionierendes Beispiel.

Hoffe, das hilft! :)

+0

Vielen Dank, es hat mir sehr geholfen. Wenn ich jedoch die Seite in 3 gleiche Kategorien unterteilen möchte, wobei die Bilder ganz links, der Text in der Mitte und die gleiche Wertetabelle ganz rechts angezeigt werden, wie würde ich das tun? – Apocolyptic

+0

Sie würden drei Spalten mit jeweils einer Breite von 33,33% (minus Margen) benötigen. Vielleicht möchten Sie in diesem Zusammenhang in Bootstrap :) Aber das ist nicht Ihre ursprüngliche Frage, und sollte eine neue Frage zu stellen, die gestellt werden :) –

+0

In Ordnung, ich werde es merken ty – Apocolyptic

Verwandte Themen