Hilfe:Bilder/ Nebeneinander platzieren

Aus Wikibooks
Zur Navigation springen Zur Suche springen

Zurück zum Wikibooks-Lehrbuch

Überblick zu Bildern und anderen Dateien
Verwenden: Mögliche Quellen Einbinden Nebeneinander platzieren Audios und Videos
Hochladen: Vorbereitung Hochladen auf Commons Hochladen auf WikibooksUrheberrecht
Auf diesen Hilfe-Seiten sind immer alle Arten von „Dateien“ gemeint – Bilder, Grafiken, Screenshots (soweit zulässig), auch Audio- und Video-Dateien. Der Einfachheit halber wird oft nur von „Bildern“ gesprochen.


Für diesen Zweck gibt es mehrere Varianten, jeweils mit eigenen Vor- und Nachteilen. Für ausführliche Erläuterungen wird auf entsprechende Seiten der Wikipedia-Hilfe verwiesen.

Galerien[Bearbeiten]

Die einfachste Möglichkeit ist die Markierung durch <gallery>. In jeweils einer eigenen Zeile werden der Dateiname und – durch das Pipe-Zeichen | getrennt – die Bildunterschrift aufgeführt. Abhängig von den weiteren Festlegungen werden alle Bilder automatisch auf mehrere Zeilen aufgeteilt.

Das folgende Beispiel nutzt weitere Parameter:

  • widths="200px" – einheitliche Bildbreite
  • perrow="4" – maximal 4 Bilder pro Zeile
  • heights="160px" – einheitliche Bildhöhe
<gallery widths="200px" perrow="4" heights="160px" >
Datei:Hamburg-Hafen-Elbe4.jpg|Der Hamburger Hafen (Blick vom Michel auf die Elbe)
File:Cologne Cathedral.jpg|Der Kölner Dom (von Südosten aus)
Datei:Bauhaus.JPG|Das Bauhaus-Gebäude in Dessau
Datei:Trier_Porta_Nigra_BW_1.JPG|Römische Baudenkmäler: Die Porta Nigra in Trier
File:Limestor Dalkingen Suedansicht.jpg|Das Tor von Dalkingen als Teil des Limes
Datei:Heidelberg-Schloß.JPG|Das Heidelberger Schloss, eine der berühmtesten Ruinen Deutschlands
Datei:Rothenburg_BW_4.JPG|Rothenburg ob der Tauber mit einer weitgehend erhaltenen mittelalterlichen Altstadt
Datei:Helgoland_Vogelperspektive_sx.jpg|Helgoland
</gallery>
  •  Hilfe:Galerie erläutert viele technische Einzelheiten, vor allem weitere Parameter.
  •  Wikipedia:Artikel illustrieren liefert Informationen zum sinnvollen Einsatz von Galerien und zu Alternativen in der Wikipedia. Bitte beachte unbedingt, dass diese Ratschläge für Bücher nicht immer sinnvoll sind.

Das Hauptproblem von Galerien liegt darin, Breite und Höhe sinnvoll aufeinander abzustimmen. Üblicherweise solltest du mehrere Varianten der Vorgaben und der Darstellung (auch auf verschiedenen Monitoren) ausprobieren.

Tabellen[Bearbeiten]

Die Wiki-Syntax für Tabellen kannst du auch zur Platzierung mehrerer Bilder nutzen. Beispiel:

{| style="text-align:center" border="0" cellspacing="0" cellpadding="0"
|-
|| [[File:Chess kld45.svg]]
|| [[File:Chess qll45.svg]]
|| [[File:Chess rld45.svg]]
|| [[File:Chess bll45.svg]]
|| [[File:Chess nld45.svg]]
|| [[File:Chess pll45.svg]]
|-
| König || Dame || Turm || Läufer || Springer || Bauer
|}
Chess kld45.svg Chess qll45.svg Chess rld45.svg Chess bll45.svg Chess nld45.svg Chess pll45.svg
König Dame Turm Läufer Springer Bauer

Welche Parameter für Tabellen sinnvoll sind, musst du im Hinblick auf deine Zielsetzung und die Inhalte selbst ausprobieren. In der Regel dürfte der Standard class="wikitable" passen. Exzessive Bildverwendungen können eine Tabelle jedoch auch unübersichtlich machen und überladen. In einigen Tabellen wie der Liste der Nationalhymnen (Wikipedia) können auch Ton-Beispiele hilfreich und Videos sinnvoll sein.

Ausführliche Erläuterungen bietet vor allem die Wikipedia-Hilfe:

Besondere Erläuterungen gibt es zur Darstellung von Schachbrettern und Spielverläufen wie im Buch Schach:

Direkt ausgerichtet[Bearbeiten]

Mit zusätzlichen Befehlen können Vorschaubilder direkt nebeneinander gesetzt werden.

  • Das erste Bild „ganz außen“ wird normal durch |mini|links (linksbündig) bzw. |mini|rechts (rechtsbündig) festgelegt.
  • Weitere Bilder werden mit |mini|ohne oder |mini|none danebengesetzt.
  • Zusätzlich müssen die weiteren Bilder mit <div class="tleft" style="clear:none;"> (für linke Anordnung) oder <div class="tright" style="clear:none;"> versehen werden.
[[Datei:Zeichen 442-13 - Wegweiser für bestimmte Verkehrsarten „Radverkehr“ - linksweisend; StVO 2017.svg|mini|70px|links|ganz links]]
<div class="tleft" style="clear:none;">[[Datei:Zeichen 422-30 - Wegweiser für bestimmte Verkehrsarten 
   „KFZ mit einer zulässigen Gesamtmasse über 3,5 t“ - geradeaus; StVO 2013.svg|mini|70px|none|daneben]]</div>
<div class="tleft" style="clear:none;">[[Datei:Zeichen 455.1-20 - Ankündigung oder Fortsetzung der Umleitung, 
   Vorankündigung rechts, StVO 2013.svg|mini|70px|ohne|weiter]]</div>
ganz links
daneben
weiter

Wenn Bilder unterschiedlicher Größe auch unten ausgeglichen werden sollen, kann das durch weitere Parameter beeinflusst werden.

Ohne dem ohne-Parameter sind die Bilder am oberen Rand leicht versetzt.

Weitere Informationen liefert die Wikipedia-Hilfe.

Weitere Beispiele[Bearbeiten]

Die folgenden Vorschläge sind als Diskussionsbeiträge entstanden. Als praktische Ideen verzichten wir darauf, sie zu löschen.

Rahmenlose Tabelle[Bearbeiten]

Indem man eine rahmenlose Tabelle erstellt, bei der die Bilder in die Felder eingebettet werden. --Arbol01 23:09, 4. Jan 2006 (UTC)

Beispiel:
4g3 strange.gif 4g3 frog.gif 4g3 o 03.gif 4g3 o 04.gif G3 pedal.gif G3 kegel.gif G3 unruhe.gif G3 strudel.gif
Strange Frosch O4G3(3) O4G3(4) Pedal Kegel Unruhe(1) Strudel

Bekommt man das auch hin, dass die Bilder rechts am Bildrand bleiben? Patho 23:53, 4. Jan 2006 (UTC)

Indem man die ganze Tabelle per Attribut rechtsbündig ausrichtet. Eingabe:
{| align="right"
|| [[Datei:4g3 strange.gif]] || [[Datei:4g3 frog.gif]] || [[Datei:4g3 o 03.gif]] || [[Datei:4g3 o 04.gif]]
|| [[Datei:G3 pedal.gif]] || [[Datei:G3 kegel.gif]] || [[Datei:G3 unruhe.gif]] || [[Datei:G3 strudel.gif]]
|-
|| Strange || Frosch || O4G3(3) || O4G3(4)
|| Pedal || Kegel || Unruhe(1) || Strudel
|-
|}
4g3 strange.gif 4g3 frog.gif 4g3 o 03.gif 4g3 o 04.gif G3 pedal.gif G3 kegel.gif G3 unruhe.gif G3 strudel.gif
Strange Frosch O4G3(3) O4G3(4) Pedal Kegel Unruhe(1) Strudel

Galerie[Bearbeiten]

<gallery>
Datei:4g3 strange.gif|Strange
Datei:4g3 frog.gif|Frosch
Datei:4g3 o 03.gif|O4G3(3)
Datei:4g3 o 04.gif|O4G3(4
Datei:G3 pedal.gif|Pedal
Datei:G3 kegel.gif|Kegel
Datei:G3 unruhe.gif|Unruhe(1)
Datei:G3 strudel.gif|Strudel
</gallery>

Diverses zum Thema Schachbuch[Bearbeiten]

Wie rücke ich ein Schachbrett-Diagramm ein? Das bräuchte ich dringend für die Darstellung von Untervarianten. Bei der Gelegenheit, wie stelle ich zwei Schachbrett-Diagramme nebeneinander? -- Turelion 3. Feb. 2006‎

Sieh dir den Code an. Kann dir auch weitere Hilfestellung geben bei allem, was mit html-tags, attributen und css-Formatierung zusammenhängt. E^(nix) 17:43, 3. Feb 2006 (UTC)
Chess zhor 26.png
Chess zver 26.png
Chess rdl44.png Chess ndd44.png Chess bdl44.png Chess qdd44.png Chess kdl44.png Chess bdd44.png Chess ndl44.png Chess rdd44.png
Chess pdd44.png Chess pdl44.png Chess pdd44.png Chess pdl44.png Chess d44.png Chess pdl44.png Chess pdd44.png Chess pdl44.png
Chess l44.png Chess d44.png Chess l44.png Chess d44.png Chess l44.png Chess d44.png Chess l44.png Chess d44.png
Chess d44.png Chess l44.png Chess d44.png Chess l44.png Chess pdd44.png Chess l44.png Chess d44.png Chess l44.png
Chess l44.png Chess d44.png Chess l44.png Chess d44.png Chess pll44.png Chess d44.png Chess l44.png Chess d44.png
Chess d44.png Chess l44.png Chess d44.png Chess l44.png Chess d44.png Chess l44.png Chess d44.png Chess l44.png
Chess pll44.png Chess pld44.png Chess pll44.png Chess pld44.png Chess l44.png Chess pld44.png Chess pll44.png Chess pld44.png
Chess rld44.png Chess nll44.png Chess bld44.png Chess qll44.png Chess kld44.png Chess bll44.png Chess nld44.png Chess rll44.png
Chess zver 26.png
Chess zhor 26.png
Eingerückt
Chess zhor 26.png
Chess zver 26.png
Chess rdl44.png Chess ndd44.png Chess bdl44.png Chess qdd44.png Chess kdl44.png Chess bdd44.png Chess ndl44.png Chess rdd44.png
Chess pdd44.png Chess pdl44.png Chess pdd44.png Chess pdl44.png Chess d44.png Chess pdl44.png Chess pdd44.png Chess pdl44.png
Chess l44.png Chess d44.png Chess l44.png Chess d44.png Chess l44.png Chess d44.png Chess l44.png Chess d44.png
Chess d44.png Chess l44.png Chess d44.png Chess l44.png Chess pdd44.png Chess l44.png Chess d44.png Chess l44.png
Chess l44.png Chess d44.png Chess l44.png Chess d44.png Chess pll44.png Chess d44.png Chess l44.png Chess d44.png
Chess d44.png Chess l44.png Chess d44.png Chess l44.png Chess d44.png Chess l44.png Chess d44.png Chess l44.png
Chess pll44.png Chess pld44.png Chess pll44.png Chess pld44.png Chess l44.png Chess pld44.png Chess pll44.png Chess pld44.png
Chess rld44.png Chess nll44.png Chess bld44.png Chess qll44.png Chess kld44.png Chess bll44.png Chess nld44.png Chess rll44.png
Chess zver 26.png
Chess zhor 26.png
Links
Chess zhor 26.png
Chess zver 26.png
Chess rdl44.png Chess ndd44.png Chess bdl44.png Chess qdd44.png Chess kdl44.png Chess bdd44.png Chess ndl44.png Chess rdd44.png
Chess pdd44.png Chess pdl44.png Chess pdd44.png Chess pdl44.png Chess d44.png Chess pdl44.png Chess pdd44.png Chess pdl44.png
Chess l44.png Chess d44.png Chess l44.png Chess d44.png Chess l44.png Chess d44.png Chess l44.png Chess d44.png
Chess d44.png Chess l44.png Chess d44.png Chess l44.png Chess pdd44.png Chess l44.png Chess d44.png Chess l44.png
Chess l44.png Chess d44.png Chess l44.png Chess d44.png Chess pll44.png Chess d44.png Chess l44.png Chess d44.png
Chess d44.png Chess l44.png Chess d44.png Chess l44.png Chess d44.png Chess l44.png Chess d44.png Chess l44.png
Chess pll44.png Chess pld44.png Chess pll44.png Chess pld44.png Chess l44.png Chess pld44.png Chess pll44.png Chess pld44.png
Chess rld44.png Chess nll44.png Chess bld44.png Chess qll44.png Chess kld44.png Chess bll44.png Chess nld44.png Chess rll44.png
Chess zver 26.png
Chess zhor 26.png
Rechts
Chess zhor 26.png
Chess zver 26.png
Chess rdl44.png Chess ndd44.png Chess bdl44.png Chess qdd44.png Chess kdl44.png Chess bdd44.png Chess ndl44.png Chess rdd44.png
Chess pdd44.png Chess pdl44.png Chess pdd44.png Chess pdl44.png Chess d44.png Chess pdl44.png Chess pdd44.png Chess pdl44.png
Chess l44.png Chess d44.png Chess l44.png Chess d44.png Chess l44.png Chess d44.png Chess l44.png Chess d44.png
Chess d44.png Chess l44.png Chess d44.png Chess l44.png Chess pdd44.png Chess l44.png Chess d44.png Chess l44.png
Chess l44.png Chess d44.png Chess l44.png Chess d44.png Chess pll44.png Chess d44.png Chess l44.png Chess d44.png
Chess d44.png Chess l44.png Chess d44.png Chess l44.png Chess d44.png Chess l44.png Chess d44.png Chess l44.png
Chess pll44.png Chess pld44.png Chess pll44.png Chess pld44.png Chess l44.png Chess pld44.png Chess pll44.png Chess pld44.png
Chess rld44.png Chess nll44.png Chess bld44.png Chess qll44.png Chess kld44.png Chess bll44.png Chess nld44.png Chess rll44.png
Chess zver 26.png
Chess zhor 26.png
Ganz Rechts

Zurück zum Wikibooks-Lehrbuch

Überblick zu Bildern und anderen Dateien
Verwenden: Mögliche Quellen Einbinden Nebeneinander platzieren Audios und Videos
Hochladen: Vorbereitung Hochladen auf Commons Hochladen auf WikibooksUrheberrecht
Auf diesen Hilfe-Seiten sind immer alle Arten von „Dateien“ gemeint – Bilder, Grafiken, Screenshots (soweit zulässig), auch Audio- und Video-Dateien. Der Einfachheit halber wird oft nur von „Bildern“ gesprochen.