Hilfe:Bilder/ Nebeneinander platzieren

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.

GalerienBearbeiten

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.

TabellenBearbeiten

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
|}
           
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 ausgerichtetBearbeiten

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 BeispieleBearbeiten

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

Rahmenlose TabelleBearbeiten

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

Beispiel:
               
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
|-
|}
               
Strange Frosch O4G3(3) O4G3(4) Pedal Kegel Unruhe(1) Strudel

GalerieBearbeiten

<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 SchachbuchBearbeiten

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)

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.