2

矢印を生成する要素を使用:beforeして、矢印ルックの水平ブレッドクラム メニューを垂直タイムラインに変換します。:after左の列は としてマークされ、矢印を生成できるようthに定義する必要があります。display: block私の問題は、 as の定義が、その高さに応じて高さを調整することをdisplay: block回避することです。table-celltable-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; }
4

1 に答える 1

0

Firefox で有効にする<th>必要display: blockがあります。position: relativeしかし、このため、テーブルセルとして動作しなくなったため、その高さはテーブル行を埋めません。

これを修正するには、から削除する必要がありdisplay: blockます<th>。しかしposition: relative、矢印が機能する必要があるため、display: block; position: relative;その親であるテーブル行に設定します。次にth:after, th:before、パーセンテージが機能しなくなったため、下と左の値をいじる必要がありました。tr { display: block; }、が将来他の問題を引き起こすかどうかはわかりませんが、それは仕事をします.

これを行う<th>と、通常のテーブル セルとして動作し、ウィンドウが小さすぎると縮小します。それを修正するには、 を設定しth { min-width: 120px }ました。

コードペンはこちら. 変更はコメントでマークされます。Chrome、Firefox、Opera で動作しますが、IE8 では動作しません。IE8+ はテストしていません。

于 2013-01-02T23:08:14.063 に答える