矢印を生成する要素を使用:before
して、矢印ルックの水平ブレッドクラム メニューを垂直タイムラインに変換します。:after
左の列は としてマークされ、矢印を生成できるようth
に定義する必要があります。display: block
私の問題は、 as の定義が、その高さに応じて高さを調整することをdisplay: block
回避することです。table-cell
table-cell
理解を深めるために、このリンクをすべて見ることができます
このサイトはレスポンシブなので、固定の高さの値を定義できません。ウィンドウのサイズを 400px 未満に変更すると、エラーが発生します。
多分誰かが私にアイデアを持っています... ? :)
コードは次のとおりです。
<table width="100%" border="0" class="zeitstrahl">
<tr>
<th class="datum1" scope="row">1947</th>
<td>Unternehmensgründung durch Erich Friedrich </td>
</tr>
<tr>
<th class="datum2" scope="row">1951</th>
<td>Bau der ersten Aufbereitungsanlage in Stiddien bei Braunschweig,<br>
Jahresleistung 100.000 t</td>
</tr>
<tr>
<th class="datum3" scope="row">1954</th>
<td><p>Bau einer Anlage in Salzgitter Drütte mit einer Jahresleistung <br>
von 600.000 t</p></td>
</tr>
<tr>
<th class="datum4" scope="row">1964</th>
<td>Standortwechsel nach Salzgitter-Immendorf und Bau einer Anlage in Salzgitter Immendorf auf dem Gelände des heutigen Reststoffzentrum
Barum (RZB) mit einer Anfangskapazität von 600.000 t/a und der Erweiterung auf eine Jahresleistung von 1.200.000 t</td>
</tr>
<tr>
<th class="datum5" scope="row">1980</th>
<td>Weltweiter Bau von Aufbereitungsanlagen Mit einem Partner wurden Anlagen u.a. in Indien, China, Ungarn, der UdSSR mit Jahreskapazitäten von 1,0 bis 3,5 Million t geplant und errichtet.</td>
</tr>
<tr>
<th class="datum6" scope="row">1990</th>
<td>Bündelung der Aufbereitungsaktivitäten in einer separaten Gesellschaft und Gründung der Firmen ERICH FRIEDRICH Hüttenservice GmbH
und ERICH FRIEDRICH Handel GmbH</td>
</tr>
<tr>
<th class="datum7" scope="row">2000</th>
<td>Beginn einer weiteren Expansionsphase<br>
ERICH FRIEDRICH Handel GmbH führt Entsorgungsdienstleistungen
in den Stahlwerken der Salzgitter Flachstahl GmbH und der
Georgsmarienhütte GmbH durch, u.a. den Transport von flüssiger
Schlacke, Betreiben der Schlackebette und die anschließende
Aufbereitung zu wiederverwertbaren Hüttenreststoffen</td>
</tr>
<tr>
<th class="datum8" scope="row">heute</th>
<td>Aufbereitungsaktivitäten für die <a href="http://www.peiner-traeger.de" title="Peiner Träger GmbH" target="_blank">Peiner Träger GmbH</a></td>
</tr>
</table>
CSS:
table.zeitstrahl { margin-top: 0px; }
.zeitstrahl th {
position: relative;
display: block;
width: 120px;
color: white;
text-decoration: none;
padding: 60px 0 60px 0;
background: #004993; /* fallback color */
background: hsla(210,100%,15%,1);
}
.zeitstrahl th:after {
content: " ";
display: block;
width: 0;
height: 0;
border-right: 60px solid transparent; /* Go big on the size, and let overflow hide */
border-left: 60px solid transparent;
border-top: 30px solid hsla(210,100%,15%,1);
position: absolute;
top: 100%;
left: 50%;
margin-left: -60px;
z-index: 2;
}
.zeitstrahl th:before {
content: " ";
display: block;
width: 0;
height: 0;
border-right: 60px solid transparent; /* Go big on the size, and let overflow hide */
border-left: 60px solid transparent;
border-top: 30px solid white;
position: absolute;
top: 100%;
left: 50%;
margin-left: -60px;
margin-top: 2px;
z-index: 1;
}
.zeitstrahl td { padding: 20px; vertical-align: middle; display:table-cell; }
.zeitstrahl .datum1 { padding-top: 20px; }
.zeitstrahl .datum2 { background: hsla(210,100%,25%,1); }
.zeitstrahl .datum2:after { border-top-color: hsla(210,100%,25%,1); }
.zeitstrahl .datum3 { background: hsla(210,100%,35%,1); }
.zeitstrahl .datum3:after { border-top-color: hsla(210,100%,35%,1); }
.zeitstrahl .datum4 { background: hsla(210,100%,45%,1); }
.zeitstrahl .datum4:after { border-top-color: hsla(210,100%,45%,1); }
.zeitstrahl .datum5 { background: hsla(210,100%,55%,1); }
.zeitstrahl .datum5:after { border-top-color: hsla(210,100%,55%,1); }
.zeitstrahl .datum6 { background: hsla(210,100%,65%,1); }
.zeitstrahl .datum6:after { border-top-color: hsla(210,100%,65%,1); }
.zeitstrahl .datum7 { background: hsla(210,100%,75%,1); }
.zeitstrahl .datum7:after { border-top-color: hsla(210,100%,75%,1); }
.zeitstrahl .datum8 { background: hsla(210,100%,75%,1); margin-top: -30px; }
.zeitstrahl .datum8:after { border-top-color: hsla(210,100%,75%,1); }
.zeitstrahl th:hover { background: hsla(210,100%,25%,1); }
.zeitstrahl th:hover:after { border-top-color: hsla(210,100%,25%,1) !important; }