Text neben Bild fixieren, wie?

[ohei2]

Hallo,

ich habe ein kleines Problem zu welchem ich leider nichts finde.

Für bestimmte Bilder muss ich eine Quellenangabe setzen. Damit diese nicht den Bildunterschriften in die Quere kommt, habe ich via CSS die Quellenangabe vertikal rechts neben dem Bild platziert:

.mw-quelle-vertikal {
    vertical-align: middle;
    writing-mode:tb-rl;
    writing-mode:vertical-rl;
    font-size: xx-small;
    letter-spacing:2px;
}

Ist ein Mediawiki, deshalb diese komische Syntax:

<div class="center">[[Datei:Abbildung.jpg|450px|Beschreibungstext]] <span class="mw-quelle-vertikal">Quellenangabe</span><br>Bildunterschrift</div>

Das funktioniert prima wie man hier sehen kann: www . markenheftchen . info / mw / Blisterdeckel

Nun ist das Problem aber, wenn das Browserfenster zusammengeschoben wird und auch auf dem Handy wandert der vertikale Text dann unter das Bild. Das Bild nimmt dann die volle Fenster-/Bildschirmbreite ein. Das sieht dann aber so was von besch.... eiden aus.

Gibt es einen Weg das Bild und den Text als eine Einheit zu formatieren, so dass der Text nicht unter das Bild wandert?

Wäre für Tipps echt dankbar. Ich weiß im Moment nicht mehr weiter, würde aber die Lösung mit dem vertikalen Text sehr gerne behalten (weil die Quellenangabe da nicht stört).

Gruß Oliver

 

[Sempervivum]

Gibt es einen Weg das Bild und den Text als eine Einheit zu formatieren, so dass der Text nicht unter das Bild wandert?

Selbstverständlich, benutze das figure-Tag und ordne die Elemente darin mit grid ab:

     figure {
            display: grid;
            grid-template-columns: 1fr auto;
        }

        caption.text {
            grid-column: 1/3;
        }

<figure>
        <img src="dein-bild">
        <caption class="ref">Dein vertikaler Text</caption>
        <caption class="text">Deine Beschreibung zum Bild</caption>
</figure >

https://css-tricks.com/snippets/css/complete-guide-grid/
http://www.w3schools.com/TAgs/tag_figure.asp
Den vertikalen Text so wie Du es schon hast.

 

[ohei2]

Vielen Dank erst mal. Ich werde es ausprobieren.

Ich fürchte aber, diese Lösung wird in einem Mediawiki nicht funktionieren, da ja das Wiki die HTML Formatierung (des Bildes) übernimmt. Vielleicht könnte man figure sogar freischalten (Mediawikis akzeptieren nur eine kleine HTML Untermenge), aber direkt das img Tag setzen ist glaube ich nicht vorgesehen. Das funktioniert über die oben gezeigte Syntax. Ich bräuchte wahrscheinlich einen Wrapper, den ich außen rum legen kann.

Ich werde berichten, ob es mit dem vorgeschlagenen Ansatz klappt.

Gruß Oliver

 

[Sempervivum]

Falls es an den figure- und caption-Tags liegt, kannst Du diese auch durch div/span ersetzen. Hauptsache, das Bild, die Quellenangabe und die Beschreibung liegen in einem gemeinsamen Container.

 

[ohei2]

Ich habe nun schließlich ein funktionierendes Grid mit dem gewünschten Effekt (Text bleibt rechts neben dem Bild) hinbekommen.

<div id="imagegrid">
<div id="ig-image">[[File:Blisterdeckel für Blisterstange (Bund MH 22).jpg|450px|center|Blisterdeckel für Blisterstange (Bund MH 22)]]</div>
<span class="mw-quelle-vertikal"><div id="ig-source">Quelle: Felzmann 183</div></span>
<center><div id="ig-caption">Blisterdeckel für Blisterstange (Bund MH 22)</div></center>
</div>

#imagegrid {
margin: 0 0 0 3%;
display: grid;
/* grid-template-rows: repeat(2, 1fr); */
grid-template-rows: min-content min-content;
grid-template-columns: auto min-content;
/* grid-template-columns: repeat(2, 1fr); */
grid-column-gap: 5px;
grid-row-gap: 5px;
align-items: center;
justify-content: center;
}

#ig-image { grid-area: 1 / 1 / 2 / 2; }
#ig-caption { grid-area: 2 / 1 / 3 / 2; }
#ig-source { grid-area: 1 / 2 / 3 / 3; }

Diese Lösung funktionierte zunächst nicht fürs Handy. Das Bild wurde nicht skaliert and rutschte beidseitig aus dem Viewport, das heißt links wurde es abgeschnitten, da man nach links nicht scrollen kann. Ich war praktisch schon am Aufgeben, Dann habe ich mein ursprüngliches "grid-template-columns: max-content min-content;" mit "grid-template-columns: auto min-content;" ersetzt und jetzt klappt es wie gewünscht. Ist sicherlich insgesamt nicht die eleganteste Lösung, aber es scheint ohne Nebenwirkungen zu funktionieren.

Zu finden hier www . markenheftchen . info /mw/Benutzer:T1qj7p/TestseiteCSS

Was mich beinahe zur Verzweiflung gebracht hat: Wenn ich kein center Tag für id-caption verwende, bleibt die Bildunterschrift hartnäckig linksbündig, trotz der center Formatierungen im Grid Element.

Was für ein Gefrickel. Wieviel Zeit ich jetzt wieder in ein solches Detail investiert habe, verschweige ich mal lieber.

Nochmals danke für Deine Hilfestellung.
Gruß Oliver

 

[Sempervivum]

Was mich beinahe zur Verzweiflung gebracht hat: Wenn ich kein center Tag für id-caption verwende, bleibt die Bildunterschrift hartnäckig linksbündig, trotz der center Formatierungen im Grid Element.

Hast Du es mit justify-self probiert?
Wenn Du mit grid-area jedem einzelnen Element seine Zelle zu weist, verschenkst Du einen großen Vorteil von Grid: Es ordnet die Elemente gsnz von allein an. Nur in Ausnahmefällen wie hier bei de Caption, muss man es explizit angeben.

            #imagegrid {
                margin: 0 0 0 3%;
                display: grid;
                /* grid-template-rows: repeat(2, 1fr); */
                grid-template-rows: min-content min-content;
                grid-template-columns: auto min-content;
                /* grid-template-columns: repeat(2, 1fr); */
                grid-column-gap: 5px;
                grid-row-gap: 5px;
                align-items: center;
                justify-content: center;
            }

            #ig-caption {
                grid-column: 1/3;
                justify-self: center;
            }

            .mw-quelle-vertikal {
                vertical-align: middle;
                writing-mode: tb-rl;
                writing-mode: vertical-rl;
                font-size: xx-small;
                letter-spacing: 2px;
            }

 

[Sempervivum]

PS:

aber direkt das img Tag setzen ist glaube ich nicht vorgesehen. Das funktioniert über die oben gezeigte Syntax. Ich bräuchte wahrscheinlich einen Wrapper, den ich außen rum legen kann.

Sehr häufig ist ein Wrapper überflüssig aber ich weiß nicht, wie das bei Mediwiki aussieht. Versuch doch einfach mal, das div weg zu laasen:

<div id="imagegrid">
    [[File:Blisterdeckel für Blisterstange (Bund MH 22).jpg|450px|center|Blisterdeckel für Blisterstange (Bund MH 22)]]
    <span class="mw-quelle-vertikal"><div id="ig-source">Quelle: Felzmann 183</div></span>
    <div id="ig-caption">Blisterdeckel für Blisterstange (Bund MH 22)</div>
</div>

 

[ohei2]

Wenn Du mit grid-area jedem einzelnen Element seine Zelle zu weist, verschenkst Du einen großen Vorteil von Grid: Es ordnet die Elemente gsnz von allein an. Nur in Ausnahmefällen wie hier bei de Caption, muss man es explizit angeben.

Das war hier ja gerade der gewünschte Effekt, die drei Elemente (Bild, Quelle und Bildunterschrift) als fixierte Einheit zu formatieren, welche für weitere Formatierungen - auf die ich eben teils keinen Einfluss habe, da diese durch Mediawiki und installierte Erweiterungen bereitgestellt werden - als ein Element behandelt wird.

 

[ohei2]

Hast Du es mit justify-self probiert?

Das klappt prima. Wieder was gelernt. Ich hatte kaum gehofft, es so hinzubekommen, dass es auf dem Handy gut aussieht.

Aber jetzt habe ich erst mal genug von Quellenangaben und möchte mich wieder auf Inhalte in meinem Wiki konzentrieren...