Anki - Bild zentrieren bei maximaler Größe

  • Hallo,



    ich verwende eine Lernkartei-Software, die Anki heißt. Die Gestaltung der Karten basiert auf CSS und HTML,
    wo ich mich allerdings überhaupt nicht auskenne.


    Ich hab's immerhin geschafft die "Grundkonfiguration" dahingehend zu verändern, daß Text, wenn ich Anki
    im Vollbildmodus verwende, nicht über die ganze Seite läuft, sondern als Block dargestellt wird.


    Das sieht folgendermaßen aus:



    Diese Zeile verwende ich, um die Größenbegrenzung von Bildern aufzuheben bzw. auszuwählen:


    Code
    1. img {max-width: 1300px; max-height: 1300px;}


    Das funktioniert aber nur, wenn ich den Code nach der geschwungenen Klammer einfüge.


    Mein Problem ist nun folgendes: Die Bilder überschreiten rechts die 500 Pixel-Grenze, sind aber links bündig mit dem Text.
    Das heißt, wenn ich ein größeres Bild in eine Karte einfüge, dann ist es leider nicht mittig sondern nach rechts hin verschoben.


    Kann mir da jemand bitte weiterhelfen?

  • So ganz verstehe ich dein Problem nicht!
    Wie soll das denn aussehen? Du hast einen Textblock mit einer Breite von 500px und hast diesen Textblock zentriert auf der Seite...
    und nun... wo soll das Bild hin? Unter den Textblock... auch zentriert... wie groß sind die Bilder und wie groß sollen sie auf der Seite dargestellt werden?
    Als ersten Versuch könntest du für die Bilder dann folgendes versuchen:

    HTML
    1. img {
    2. display: block;
    3. width: 100%;
    4. max-width: 1300px;
    5. margin: 0px auto;
    6. }


    Und wenn das Bild immer nur so breit dargestellt werden soll, wie es tatsächlich ist, dann lass die 'width: 100%;' weg.

  • Hi,


    erstmal danke für Deine Antwort.



    Grundsätzlich kann ich bei Anki (dem Lernprogramm) immer standardmäßig Bilder hinzufügen. Das wird jetzt ein bißchen kompliziert …


    Es gibt unterschiedliche "Notiztypen" anhand derer Karteikarten erstellt werden. Der Notiztyp ist quasi die Vorlage für viele Karteikarten. Die Formatierung
    der Karteikarten kann man also verändern indem man den Notiztyp bearbeitet, und zwar durch Hinzufügen von Befehlen in Form von Code.


    Das ist, glaube ich, der Originalcode:


    Code
    1. .card { font-family: arial;
    2. font-size: 20px;
    3. text-align: center;
    4. color: black;
    5. background-color: white;
    6. }


    Da war's schon problemlos möglich innerhalb der Karteikarten Bilder hinzuzufügen.


    Ich hab dann vor ein paar Wochen dem Notiztyp diese Zeilen hinzugefügt, damit ich im Vollbildmodus eine schönen mittigen Textblock habe:


    Code
    1. margin-left: auto;
    2. margin-right: auto;
    3. width: 500px;


    Das Resultat war, daß nun die Bilder ebenfalls auf diese Breite beschränkt wurden.


    Jetzt suche ich eben nach einer Möglichkeit die Bilder größer darstellen zu lassen als den Textblock.


    Wesentlich ist für dich vielleicht die Info, daß im Bearbeitungsbereich des Notiztyps sozusagen "Einstellungen" durch hinzufügen von Code
    vorgenommen werden können, die das darunterliegende, das darunterlaufende Programm beeinflussen - wenn ich das richtig sehe -, und daß
    da keine Website z. B. erstellt wird.


    Ich hab schon versucht mich im Anki-Forum schlau zu machen, aber da meinte der Entwickler, daß er mir bezüglich HTML/CSS leider keinen Support bieten kann …



    Ansonsten … Falls es noch notwendig ist, möchte ich dennoch deine Fragen beantworten: Das Bild möchte ich über oder unter dem Textblock einfügen können,
    je nachdem, und es sollte auf jeden Fall zentriert sein.


    Die Bilder sind ganz unterschiedlich groß und sollten die maximale Größe von 1300px nicht überschreiten. Wenn sie kleiner sind können sie so bleiben, sollten
    sie größer sein als 1300px hätte ich sie gerne automatisch zurechtgestutzt.


    Je nach Lerninhalt suche ich mir Bilder aus dem Netz, die ich dann meiner Karteikarte hinzufüge, um den Lernprozeß zu verbessern. Daher fällt die Größe
    der Bilder ganz unterschiedlich aus. Wenn ich diese Zeile im Notiztyp hinzufüge

    Code
    1. img {max-width: 1300px; max-height: 1300px;}


    funktionert die Darstellung in der Originalgröße und das automatische Zurechtstutzen, bloß die Zentrierung haut nicht hin …


    Der Code, den Du mir freundlicherweise empfohlen hast, funktioniert leider auch nicht. Das Bild ist weiterhin quasi nach rechts verschoben und links
    auf derselben Höhe wie der Text. (Übrigens nur wenn ich die Zeile "width: 100%;" entferne. Lasse ich sie drin, wird das Bild nur so breit wie der Text.)

  • Ja - deine Beschreibung macht das Problem schon klarer und ich kann mir zusammen reimen, was da passiert.
    Es sieht so aus, als hättest du mit der Festlegung der 500px Breite einen Container geschaffen, in dem alle Inhalte (Text / Bilder) eingefügt werden und die sich dann natürlich an die Begrenzungen dieses Containers halten (müssen).
    Besteht mit diesem Programm, das du da nutzt, die Möglichkeit innerhalb dieses äußeren Containers (der mit der jetzigen Breite 500px) weitere Container einzufügen zB für den Text einzufügen? Und ist es dann möglich, diesen eingefügten Containern ein eigenes Format zu geben.
    Wenn das so ist, dann könntest du deinem äußeren Container (.card) die gesamte Bildschirmbreite.. also 100% geben. Dem Text-Container die Formate, die jetzt .card hat und das Bild könntest du dann auch nach belieben formatieren, denn das kannst du ja mit CSS Formatierungen beeinflussen.


    Hast du diese Seite irgendwo online... oder hast Zugriff auf den Quellcode der Seite, dann würde ein Link zur Seite oder der Quellcode vielleicht helfen, um das Problem näher einzugrenzen.

  • Das liest sich doch vielversprechend!
    Versuche es doch einfach mal... setze die Formate für .card wieder auf den Ursprung zurück - also ohne 'width' und 'margin'.
    Dann notierst du deinen Text zwischen den <div>... hier dein Text...</div>
    Nun formatierst du dieses <div> mit...


    div {
    margin: 0 auto;
    width: 500px;
    }


    Damit sollte jetzt nur dieser Textteil zentriert und mit der 500px Breite innerhalb von .card formatiert werden.
    Zusätzlich jetzt noch für das Bild die Formate:


    img {
    display: block;
    max-width: 1300px;
    margin: 0 auto;
    }


    Und dann schauen, ob es funktioniert?

  • Also das scheint in die richtige Richtung zu gehen.


    Das Bild hat jetzt die richtige Größe und ist zentriert. Aber der Text paßt jetzt nicht mehr, der ist zu breit.


    Mal schauen, ob ich das richtig gemacht habe:




    So sieht das ganze jetzt bei mir aus.

  • Das
    <div>
    margin-left:auto;
    margin-right: auto;
    width: 500px;
    </div>
    gehört definitiv nicht in das CSS. Lösche das bitte!
    Die Formatierungen haben immer (zB) das Format
    div {
    ....
    }


    Kannst du denn jetzt mit den Formaten auf <div> zugreifen?
    Teste doch mal, ob du durch zB Änderung der Schriftfarbe (color: red;) beim div eine rote Schrift erzeugen kannst?

  • Okay, jetzt verstehe ich. Mit "... hier dein Text …" meintest du natürlich den Text für die Karte.


    So, also ich habe jetzt den <div>-Part gelöscht. Ich kann mit den Formaten auf <div> zugreifen. Er hat die richtige Breite und der Text wird rot :oops: .


    Das Problem: Das Bild verliert die Zentrierung …



    Noch eine Info. Für das Bearbeiten der Karten stehen mir drei Bereiche zur Verfüfung:


    1. Vorlage für Vorderseite



    Wobei {{Front}} dem Feld entspricht in das man den Text für die Karte eingibt.

  • Hmmm... ich vermute mal, dass das Bild, wenn du es einfügst innerhalb des <div></div> steht.. also so:

    HTML
    1. <div class="card">
    2. <div>
    3. {{Front}}
    4. <img src="dein_bild.jpg>
    5. </div>
    6. </div>


    es müsste aber so sein..

    HTML
    1. <div class="card">
    2. <div>
    3. {{Front}}
    4. </div>
    5. <img src="dein_bild.jpg>
    6. </div>


    Sonst bekommt ja das Bild wieder die Breitenvorgabe von <div> und wird auch wieder linksbündig mit dem Text eingefügt.
    Kannst du das irgendwie überprüfen... Rechtsklick auf die Seite und 'Quellcode anzeigen' auswählen.
    Leider habe ich von diesem 'Anki' überhaupt keine Ahnung und kann dir das nur aus der HTML / CSS Sicht erklären.

  • Was du da geschrieben hast, hat mich auf eine Idee gebracht. Man kann in Anki neue Felder kreieren.


    Jetzt habe ich ein Feld eigens nur für Bilder gemacht, so daß die Kartenvorlage nun folgenderweise strukturiert ist:


    HTML
    1. <div>
    2. {{Front}}
    3. </div>
    4. <br>
    5. <br>
    6. <br>
    7. {{Front Image}}



    Ich werde also in Zukunft meine Bilder separat vom Text hinzufügen, was eh vorteilhaft ist und Sinn macht. Hat aber
    jetzt nach längerem herumprobieren vorerst auch nichts gebracht.


    Dann habe ich nochmal in der Bedienungsanleitung nachgelesen, in der zum einen darauf hingewiesen wird, daß man
    auch unabhängig vom CSS-Bereich das Design einzelner Felder über HTML ändern kann, und daß Anki gemäß
    Voreinstellung Bilder verkleinert, damit sie auf den Bildschirm passen - daher auch der Hinweis in der Anleitung
    auf diese Zeile "img {max-width: none; max-height: none;}" für jene, die diese Einstellung deaktivieren wollen …


    Vielleicht eröffnet das ja neue Möglichkeiten?


    Den Quellcode kann ich dir leider nicht liefern, da Anki mit der Funktion "Quellcode anzeigen" offenbar nicht
    ausgestattet ist. Ich konnte da zumindest nichts entdecken und hab erst vor ein, zwei Wochen die gesamte
    Bedienungsanleitung gelesen.

  • Ich denke, dass du wohl auf de richtigen Weg bist, wenn es unterschiedliche Elemente sind, die separat mit CSS angesprochen werden können, dann bekommst du das bestimmt hin.
    Schade, dass ich dir da nicht wirklich weiter helfen kann... aber ich kann nur HTML und CSS. Von Anki habe ich keine Ahnung :(!

  • Hallo noch mal!


    Ich habe eine Anki-Erweiterung entdeckt, mit der ich den Quellcode anzeigen kann!


    Vielleicht kannst du mir noch ein wenig helfen?





    Eigenartigerweise wird die jeweilige Karte in der Vorschaufunktion von Anki richtig dargestellt.
    Wenn sie aber tatsächlich erstellt ist, besteht das Problem mit dem linksbündigen Bild.

  • Ja... im Code sieht es genau so aus, wie ich es vermutet habe!
    Da ist ein <div id="qa"> ... </div> in dem alles andere (Text und Bild) enthalten ist.
    Dieses <div> hat im CSS eine Breite von 500px vorgegeben - aber mit der ebenfalls vorhanden ID kann man das änden!
    Teste bitte mal folgenden zusätzlichen CSS Code:

    HTML
    1. #qa {
    2. width: 100%;
    3. }


    damit sollte (hoffentlich) die 500px Begrenzung um die übrigen Elemente entfernt werden und dann können sich die übrigen Elemente so verhalten, wie es in deren CSS vorgegeben ist!

  • Ja, Mann. Wahnsinn. Es funktioniert.


    Vielen, vielen Dank! Bin froh, daß das jetzt endlich hinhaut - ich verwende das Programm täglich.


    Anki ist übrigens ein exzellentes Lernprogramm. Kann ich wirklich nur weiterempfehlen!


    Ich wünsche dir ein schönes Wochenende!