Flo07102000
Neues Mitglied
Hi,
hab mir eine timeline herausgesucht (code) und würde ganz gerne eine scroll-leiste auf der rechten Seite anbringen. Wäre nett wenn ich schnell Antworten erhalte.
Danke schon jetzt allen.
hab mir eine timeline herausgesucht (code) und würde ganz gerne eine scroll-leiste auf der rechten Seite anbringen. Wäre nett wenn ich schnell Antworten erhalte.
Danke schon jetzt allen.
CSS:
box-sizing: border-box;
}
/* Set a background color */
body {
background-color: #474e5d;
font-family: Helvetica, sans-serif;
}
/* The actual timeline (the vertical ruler) */
.timeline {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
/* The actual timeline (the vertical ruler) */
.timeline::after {
content: '';
position: absolute;
width: 6px;
background-color: skyblue;
top: 0;
bottom: 0;
left: 50%;
margin-left: -3px;
}
/* Container around content */
.container {
padding: 10px 40px;
position: relative;
background-color: inherit;
width: 50%;
}
/* The circles on the timeline */
.container::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
right: -17px;
background-color: white;
border: 4px solid #FF9F55;
top: 15px;
border-radius: 50%;
z-index: 1;
}
/* Place the container to the left */
.left {
left: 0;
}
/* Place the container to the right */
.right {
left: 50%;
}
/* Add arrows to the left container (pointing right) */
.left::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
right: 30px;
border: medium solid white;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent black;
}
/* Add arrows to the right container (pointing left) */
.right::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
left: 30px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent black transparent transparent;
}
/* Fix the circle for containers on the right side */
.right::after {
left: -16px;
}
/* The actual content */
.content {
padding: 20px 30px;
background-color: gold;
position: relative;
border-radius: 6px;
}
/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
/* Place the timelime to the left */
.timeline::after {
left: 31px;
}
/* Full-width containers */
.container {
width: 100%;
padding-left: 70px;
padding-right: 25px;
}
/* Make sure that all arrows are pointing leftwards */
.container::before {
left: 60px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent black transparent transparent;
}
/* Make sure all circles are at the same spot */
.left::after, .right::after {
left: 15px;
}
/* Make all right containers behave like the left ones */
.right {
left: 0%;
}
}
Und hier der HTML code
HTML:
<div class="timeline">
<div class="container left">
<div class="content">
<h2>6./9. August 1945<br>Abwurf von US-Atombomben auf Hiroshima und Nagasaki</h2>
<p>Die US-Air Force wirft über der japanischen Stadt Hiroshima eine Atombombe ab. Dabei sterben 110.000 Menschen, rund 80% der Stadt werden völlig zerstört. Drei Tage später sterben 36.000 Menschen nach einem Bombenabwurf über Nagasaki, 40.000 werden verletzt. </p>
</div>
</div>
<div class="container right">
<div class="content">
<h2>24 Juni 1948<br>Berlin-Blockade und Berliner Luftbrücke</h2>
<p>Als Reaktion auf die Währungsreform und die Einführung der D-Mark in den drei westlichen Besatzungszonen Deutschlands ordnet die Sowjetische Militäradministration in Deutschland (SMAD) die Unterbrechung des gesamten Eisenbahnverkehrs zwischen den westlichen Besatzungszonen und den Westsektoren Berlins an. Strom- und Lebensmittellieferungen aus dem Ostteil der Stadt werden auch eingestellt. West-Berlin wird bis zur Aufhebung der Blockade am 12. Mai 1949 mit Hilfe einer Luftbrücke versorgt. </p>
</div>
</div>
<div class="timeline">
<div class="container left">
<div class="content">
<h2>1949<br>Entwicklung von „Atomic Annie“</h2>
<p>1949 bekommt Picatinny Arsenal, ein Forschungs- und Produktionszentrum der US-Armee, die Aufgabe, eine Nuklear-Granate zu bauen. Der damalige Projektleiter heißt Robert Schwartz.</p>
</div>
</div>
<div class="timeline">
<div class="container left">
<div class="content">
<h2>29. August 1949<br>Zündung der ersten sowjetischen Atombombe</h2>
<p>Erst am 23. September 1949 erklärt der US-Präsident Harry S. Truman, sein Lande habe Beweise, dass vor einigen Wochen eine Atombombenexplosion in der Sowjetunion stattgefunden habe. Am 25. September veröffentlicht die sowjetische Regierung eine Erklärung, wonach das Land sogar seit 1947 im Besitz des Atombombengeheimnisses sei. </p>
</div>
</div>
<div class="timeline">
<div class="container left">
<div class="content">
<h2>25. Juni 1950<br>Beginn des Korea-Kriegs</h2>
<p>Truppen des kommunistischen und von der Sowjetunion unterstützten Nordkorea überschreiten die Grenze zum westlich orientierten Südkorea und stoßen auf breiter Front auf die im Süden liegende Hauptstadt Seoul vor, die am 28. Juni kampflos eingenommen wird. Indem die USA ab dem 27. Juni Südkorea militärische Hilfe leisten, entsteht eine gefährliche Situation zwischen den beiden Atommächten.</p>
</div>
</div>
<div class="timeline">
<div class="container left">
<div class="content">
<h2>9. September 1952<br>NATO-Strategie der „Massive Retaliation“ </h2>
<p>Festlegung der NATO-Strategie eines nuklearen Gegenschlags gegen potentielle sowjetische Angriffshandlungen</p>
</div>
</div>
<div class="timeline">
<div class="container left">
<div class="content">
<h2>1. November 1952<br>Zündung der ersten H-Bombe durch die USA</h2>
<p>Am 1. November 1952 zünden die USA auf einem Atoll der Marshall-Inseln die erste Wasserstoff-Bombe. Die Insel Elugelab verschwindet spurlos. Allerdings ist "Mike" noch keine einsatzfähige Bombe, sondern noch eine fast hausgroße 82 Tonnen schwere Maschine.</p>
</div>
</div>
<div class="timeline">
<div class="container left">
<div class="content">
<h2>25. Mai 1953<br>Test von „Atomic Annie“ </h2>
<p>Auf dem Atomwaffentestgelände in Nevada (Nevada Proving Ground) bei Frenchman’s Flat wird morgens um 08.30 Uhr Ortszeit der erste nukleare Artillerie-Testschuss abgefeuert. Der erste und einzige Test der „Atomic Annie“ findet unter dem Codenamen „Upshot Knothole (Shot Grable)“ statt.</p>
</div>
</div>
<div class="timeline">
<div class="container left">
<div class="content">
<h2>6./9. August 1945<br>Abwurf von US-Atombomben auf Hiroshima und Nagasaki</h2>
<p>Die US-Air Force wirft über der japanischen Stadt Hiroshima eine Atombombe ab. Dabei sterben 110.000 Menschen, rund 80% der Stadt werden völlig zerstört. Drei Tage später sterben 36.000 Menschen nach einem Bombenabwurf über Nagasaki, 40.000 werden verletzt. </p>
</div>
</div>
</div>
