RE: 2017 Woche 36 - Ohne Zusammenhang / Without Any Context / Deutsch / English

steemchiller 8 years ago (edited)

Hi @double-u! Da hast du dir ja wirklich eine interessante Lösung einfallen lassen :) Es wird Zeit, dass Steemit zumindest eine Änderung der vertikalen Zentrierung zulässt, denn das ist die Ursache für unser Problem.

Das Ganze wäre mit nur einer Zeile CSS-Code gelöst: vertical-align: top, aber ist nicht erlaubt. Ich probiere gerade mal ein bisschen herum und habe jetzt wenigstens einen Trick für die Hintergrundfarbe jeder zweiten Zeile einer Tabelle gefunden (einfach eine Leerzeile einfügen mit <tr></tr> oder kurz <tr/>).

Ich arbeite da lieber mit Tabellen, weil ich dann feste Zeilen habe und die Verschiebung dadurch niemals zu groß sein kann bzw. spätestens bei der nächsten Tabellen-Zeile wieder korrigiert wird. Zurzeit muss man aber auch mit Tabellen weiterhin <br>'s einfügen, damit die Texte oben bei der gleichen Höhe beginnen.

Der HTML-Code wird etwas länger, aber insgesamt etwas sauberer, wie ich finde. Wenn man jetzt mit Excel oder LibreOffice Calc arbeitet und als HTML exportiert, hat man fast schon das Endergebnis. Ich hoffe, dass wir bald ein paar mehr CSS-Möglichkeiten bekommen, damit man nicht mehr so viel Zeit mit solchen Sachen verschwenden muss. Sonst bau ich uns irgendwann ein Tool dafür oder direkt in die SCT mit ein...

@cobalus hat das mit <hr> Elementen außerhalb der <div>'s gemacht, was ich auch für eine der besten Lösungen halte. Das würde auch mit einem Bild gehen, wenn man keine Linie möchte (1 Pixel hoch, 1920 Pixel breit z.B.), aber wie er schon erwähnt hat:

Des Weiteren hast du ein Problem bei verschiedenen Medien. In einem Smartphone-Browser werden deine Umbrüche und Anpassungen gegebenfalls anders aussehen.

Auch wenn Steemit irgendwann die Schriftart ändern sollte (was bestimmt kommen wird), werden wir alle heulen gehen, denn die alten Artikel werden dann nicht mehr wie früher dargestellt, da sich die Zeichenbreite dann verändert hat ;) Aber eine richtige Lösung dafür gibt es für uns zurzeit nicht, daher sind am Ende alle unsere Lösungen nur vorübergehend brauchbare Umwege, um die vertikale Zentrierung zu umgehen, die leider auf Steemit als Standard gewählt wurde.

Lösung mit Tabelle und <br>:

<table>
    <tr>
        <td>
            Test für einen etwas längeren Text in der linken Spalte.
            Mal sehen, wie das Ganze umgebrochen wird...
        </td>
        <td>
            Test für kurzen Text in der rechten Spalte...
            <br><br><br>
        </td>
    </tr>
    <tr/>
    <tr>
        <td>
            Test für kurzen Text in der linken Spalte...
            <br><br><br>
        </td>
        <td>
            Test für einen etwas längeren Text in der rechten Spalte.
            Mal sehen, wie das Ganze umgebrochen wird...
        </td>
    </tr>
    <tr/>
    <tr>
        <td>
            Test für einen etwas längeren Text in der linken Spalte.
            Mal sehen, wie das Ganze umgebrochen wird...
        </td>
        <td>
            Test für kurzen Text in der rechten Spalte...
            <br><br><br>
        </td>
    </tr>
</table>

0.00 BPC

5 votes

double-u 8 years ago

Lieber @steemchiller,

du hast dir ja wieder ziemlich viel Mühe gemacht.

Ich habe mit deinem Muster eben mal ein bisschen rumprobiert. Hat funktioniert ;-)
Sogar Überschriften sind mir damit spalten-linksbündig gelungen.
Das klappte bisher mit dem Tabellen-Beispiel, das ich kannte, nicht.

Verstehe ich das richtig, dass das Problem, dass die Zeilenbreite in der Steemit-Editor-Vorschau nicht übereinstimmt mit der Zeilenbreite des geposteten Textes bei deiner Tabellen-Variante aber auch weiter besteht?

Was wiederum bedeutet, man muss mit einem Umweg herausfinden, wie die Zeilenumbrüche sein werden, und wie viele <br>'s man wo setzen muss.

Daher habe ich mir dieses zweispaltige Textdokument-Vorlage erstellt. Dort kann ich erst mal mit Zeilenwechsel alle Absätze und Abstände so erstellen, wie sie später wirklich aussehen werden. Durch den identischen Zeilen-Umbruch zum später geposteten Text, kann ich in meiner Vorlage nun ganz genau sehen, wie viele <br>'s ich wo setzen muss. Dann setze ich sie und lösche die manuellen Zeilenschaltungen weg.

Danach kopiere ich den Text hier hinein:

<div class="pull-left">

<h2>Deutsch</h2>

<hr>
Liebe Steemit Freundinnen,<br>liebe Steemit Freunde,<br><br>auch in der vergangenen Woche habe ich wieder von einigen von Euch Komplimente und Lob dafür erhalten, dass ich die Idee hatte und diese Seite hier in‘s Leben gerufen habe.<br><br>Vielen Dank dafür! Darüber habe ich mich natürlich sehr gefreut.<br><br>Ich bin sehr froh, in unsere Gemeinschaft hier eingebunden zu sein.<br><br>Herzlich danken möchte ich auch unseren treuen Helfern @steemchiller, @cobalus und @afrog, die sich immer wieder der Beantwortung unserer Fragen annehmen und auch für so manchen inhaltlichen Austausch sorgen. Bei @steemchiller glaube ich, dass er es „spürt“, wenn eine neue Frage im Kommentarbereich aufgetaucht ist. Er ist nämlich immer rasant schnell zur Stelle.<br><br>Ich hoffe, diese Woche wird eine konstruktive und produktive!<br><br>Auf jeden Fall wünsche ich euch allen eine schöne Woche 36!<br><br>Liebe Grüße, euer <b>@double-u</b><br><br>
<hr>
</div>
<div class="pull-right">

<h2>English</h2>

<hr>
Dear Steemit Friends,<br><br><br>also in the last week I received from some of you compliments and praise therefore, that I had the idea and created this site here.<br><br><br><br>Thanks a lot for this! Of course I was very happy about this.<br><br>I am very glad to be involved in our community here.<br><br><br>
I would also like to sincerely thank our loyal helpers @steemchiller, @cobalus and @afrog, who are always ready to answer our questions and provide us with a lot of content. With @steemchiller I believe, that he "feels" when a new question has appeared in the comment area. He is always very fast on the spot.<br><br><br><br>I hope, this week will be a constructive and productive!<br><br>In any case, I wish you all a nice week 36!<br><br>Best regards, your <b>@double-u</b><br><br>
<hr>
</div>

Ein Laie sprach zum Profi ;-)

Liebe Grüße, @double-u

0.00 BPC

steemchiller 8 years ago (edited)

Moin @double-u! Habe ich gerne gemacht und wirklich viel Arbeit war das für mich nicht, da ich so gut wie jeden Tag mit HTML arbeite ;)

Ja, das Problem mit der Zeilenbreite besteht auch bei der Tabellen-Variante, weil der Text innerhalb der <td>'s auch vertikal zentriert ausgerichtet wird. Ich hoffe, dass wir so ähnlich wie mit den "pull"-Klassen eine Klasse "valign-top" für die Tabellen usw. bekommen. Dann müsste man die nur einmal im <table>-Element setzen und alles würde wie gewünscht funktionieren.

Aber deine Lösung ist auf jeden Fall eine gute Möglichkeit für die jetzige Situation, um ohne viel Aufwand die benötigte Anzahl an <br>'s zu ermitteln. Ich als Entwickler habe für solche Sachen meine Tools im Browser. Z.B. mit Firebug oder dem internen DOM-Checker von Firefox (öffnen mit F12) kann ich einfach einmal die Breite der Editor-Vorschau auf die Breite des späteren Posts setzen und sehe somit sofort, wie es nach dem Posten aussehen wird ;)

Wenn man mit <div>'s arbeitet, sollte man aber auch mit mehreren untereinander arbeiten und diese mit <hr> oder der 1-Pixel-Bildvariante (transparentes PNG) trennen, damit bei einer evtl. später durch Steemit-Änderungen ausgelösten Verschiebung nicht der gesamte Text verschoben ist. Ist dann also so ähnlich wie mit den <tr>'s in einer Tabelle, mit denen man man das auch ganz gut verhindern kann.

Liebe Grüße, der Chiller (heute mal um 8 Uhr aufgestanden, wie gesagt Rhythmus nicht mehr existent bei mir :)

0.00 BPC

double-u 8 years ago

Jetzt bin ich aufgestanden ;-)

Guten Morgen lieber @steemchiller,

"Ich als Entwickler habe für solche Sachen meine Tools ..."

Da hatte ich doch ganz zu Beginn richtig vermutet, dass du dazu eine professionelle Handhabung hast ;-)

Meine Vorgehensweise ist ein laienhafter Behelf auf der Basis meiner beschränkten Fähigkeiten. Ich wusste ja vor 3 Monaten noch gar nicht, dass es Markdown gibt.

In deinem jetzigen Kommentar sind zwei Hinweise sehr interessant für mich, da mir die Tabellen-Variante beim meiner vorbereitenden Vorgehensweise mit dem Textdokument nicht so gut gefällt:

das mit der transparenten Bild-Linie werde ich auf jeden Fall ausprobieren
mit mehreren <div>'s untereinander arbeiten

Wenn das nicht viel Aufwand für dich ist, könntest du mir bitte zu diesen zwei Vorgehensweisen (transparente Bild-Linie und mehrere <div>'s untereinander) ein kleines Muster erstellen und hier aufschreiben?

Das wäre toll! Dann muss ich dazu nicht ewig erst rumprobieren. Denn mit den "mehrere <div>'s untereinander" stehe ich total auf dem Schlauch ;-)

Ich lerne hier ganz schön viel von dir! Vielen Dank dafür!

Liebe Grüße, @double-u

0.00 BPC

steemchiller 8 years ago

Ich habe meine Antwort an deinen ersten Kommentar rangehängt, da ich dafür mehr Platz brauchte ;) LG

0.00 BPC

steemchiller 8 years ago (edited)

Lösung für Problem ohne Verwendung von `<br>`'s... Nutzung auf eigene Gefahr :)

Ich habe jetzt eine Lösung in Verbindung mit dem transparenten Bild gefunden, die tatsächlich ganz ohne die Umbrüche auskommt. Um zu verstehen, warum das funktioniert, braucht man ein wenig Hintergrundwissen zu HTML. Ich habe es jetzt noch nicht in einem Post getestet und man müsste das mal vorsichtig probieren, aber an sich müsste es so klappen.

Um jede Spalte gleich breit zu bekommen, nutze ich ebenfalls das transparente Bild (Höhe: 1px, Breite: 4000px). Die maximale Breite für die "pull-left"-Klassen ist auf Steemit als 50% definiert. Das heißt, wenn ich eine Spalte auf die maximale Breite bringe, werden das 50% sein, wodurch der anderen Spalte automatisch auch 50% bleiben ;) Ich nutze hier übrigens nur "pull-left"...

Linke Spalte

Test für einen etwas längeren Text in der linken Spalte. Mal sehen, wie das Ganze umgebrochen wird...

Rechte Spalte

Test für kurzen Text in der rechten Spalte...

Test...

Test für einen etwas längeren Text in der rechten Spalte. Mal sehen, wie das Ganze umgebrochen wird...

Den mache ich jetzt mal noch länger, um sicher zu sein, dass es wirklich immer funktioniert...

Test für einen etwas längeren Text in der linken Spalte.

Test für kurzen Text in der rechten Spalte...

Wie man sieht, habe ich es einmal mit der Bildlinie und einmal mit einem <hr> gemacht. Die Linie ist jetzt auch durchgängig und gilt für beide darüber liegenden <div>'s. Das ist genau das, was ich mit den Tabellen-Zeilen meinte. Sollte ein Container größer werden, werden die folgenden ab dem nächsten Bereich automatisch wieder an der richtigen Position beginnen. Und jetzt sogar, ohne am Ende Umbrüche einfügen zu müssen.

Code: (natürlich etwas umfangreicher, aber wahrscheinlich die sicherste Lösung bisher)

<div>
    <div class="pull-left">
        <h2>Linke Spalte</h2>
        Test für einen etwas längeren Text in der linken Spalte.
        Mal sehen, wie das Ganze umgebrochen wird...
    </div>
    <div class="pull-left">
        <h2>Rechte Spalte</h2>
        Test für kurzen Text in der rechten Spalte...
    </div>
</div>
https://steemitimages.com/DQmeyBBAjsQH1ixSxS3Gbm3Pj4sfzXz8RJAAmSWmc8Q4fYr/space.png
<div>
    <div class="pull-left">
        Test...
        https://steemitimages.com/DQmeyBBAjsQH1ixSxS3Gbm3Pj4sfzXz8RJAAmSWmc8Q4fYr/space.png
    </div>
    <div class="pull-left">
        Test für einen etwas längeren Text in der rechten Spalte.
        Mal sehen, wie das Ganze umgebrochen wird...<br><br>
        Den mache ich jetzt mal noch länger, um sicher zu sein,
        dass es wirklich immer funktioniert...
    </div>
</div>
https://steemitimages.com/DQmeyBBAjsQH1ixSxS3Gbm3Pj4sfzXz8RJAAmSWmc8Q4fYr/space.png
<div>
    <div class="pull-left">
        Test für einen etwas längeren Text in der linken Spalte.
        https://steemitimages.com/DQmeyBBAjsQH1ixSxS3Gbm3Pj4sfzXz8RJAAmSWmc8Q4fYr/space.png
    </div>
    <div class="pull-left">
        Test für kurzen Text in der rechten Spalte...
    </div>
</div>

Ich bin jetzt selbst überrascht, dass ich eine neue Lösung für mich gefunden habe. Etwas mehr zu tippen, da der Text wie auch bei der Tabelle aufgeteilt wird, aber dafür wird es immer funktionieren, selbst wenn sich die Schriftart ändern sollte :)

Edit: Bildbreite auf 4000 Pixel geändert, damit es auch bei höheren Auflösungen immer funktioniert. Die Bilddatei ist trotzdem nur 110 Bytes groß, daher kein Problem.

Liebe Grüße, Chiller

0.00 BPC

6 votes

double-u 8 years ago

Wow! Glückwunsch! Das freut mich!

Und danke!

Ich werde später testen, da ich erst mal weg muss.

Lieben Gruß

0.00 BPC

double-u 8 years ago

Was ich ja nicht verstehe:

wenn man zweimal hintereinander <div class="pull-left"> benutzt,
warum dann trotzdem das zweite in die rechte Spalte flutscht?

Ich vermute mal laienhaft:

der Begriff <div class="pull-left"> halbiert die Zeilenbreite.
Da nach dem zweiten <div class="pull-left"> eine Trennung mittels Linie oder Bildlinie erfolgt, ordnet sich das zweite <div class="pull-left"> oben neben das erste hin.

Ich glaube, ich sollte erst mal auf youtube nach einer Einführung zu HTML schauen ;-)

Lieben Gruß

0.00 BPC

steemchiller 8 years ago (edited)

In der "pull-left"-Klasse ist "float: left" definiert. Der Klassenname "pull-left" wurde von Steemit festgelegt und die Eigenschaften dieser Klasse bestimmen das Verhalten der betroffenen Elemente.

"float: left" (Englisch für "fließe: links") bewirkt, dass ein Block-Element nicht unbedingt die volle Breite ausschöpfen muss und dadurch nur wenn es zu eng wird einen Umbruch auslöst. Es fließt also im Prinzip an die linke Seite, anstatt ein fester Block über die gesamte Breite zu sein.

Da die maximale Breite 50% beträgt (ebenfalls von Steemit für "pull-left" so festgelegt) und das zweite <div> ebenfalls nach links geschoben wird, passt alles genau in einer Zeile ;)

Damit die Spalten die maximale Breite von 50% nutzen, habe ich das transparente Bild eingefügt. Beim ersten ganz oben brauchte ich es nicht, weil dort bereits ein <h2>-Element enthalten ist, was denselben Effekt hat, da es ein Block-Element über die volle Breite ist (erzeugt ja auch immer einen Umbruch).

0.00 BPC

double-u 8 years ago

Super erklärt! Vielen Dank!

Und schönen Abend noch!

0.00 BPC

double-u 8 years ago (edited)

Hab' doch noch eine Frage, lieber Chiller.
Du schreibst:

"Um jede Spalte gleich breit zu bekommen, nutze ich ebenfalls das transparente Bild (Höhe: 1px, Breite: 1920px)."

Ich finde aber in deinem Beispiel nur eine transparente Linie mit 1680 x 1.

Sehe ich das falsch?

0.00 BPC

steemchiller 8 years ago

Du bist wirklich sehr aufmerksam mein lieber @double-u :) Ich dachte, das merkt keiner... ^^ Nein, ich wollte das vorhin noch erklären, aber dann hab ich es irgendwie verplant. In meinen Tests hatte das Bild keine Auswirkung auf die Breite der zweiten Spalte und daher habe ich es weggelassen.

Es gibt einen Fall, bei dem das zu einem Problem führen könnte, aber der ist sehr unwahrscheinlich. Sollte Steemit die "max-width: 50%" für die Pull-Klasse auf eine andere %-Zahl ändern, wäre die Breite der 2. Spalte evtl. nicht mehr ganz dieselbe. Dann würden allerdings sämtliche Artikel mit diesen Klassen aufeinmal anders aussehen und mit dieser Lösung hier wäre man immer noch auf der sichereren Seite.

Die sauberste Methode ist also wirklich immer für beide Spalten das Bild einzufügen. Wenn bereits Block-Elemente wie <h2> in dem jeweiligen <div> vorhanden sein, braucht man wie gesagt kein Bild, da automatisch die maximale Breite genommen wird.

Bei mir sind es aber trotzdem 1920 x 1 Pixel... Hattest du dich da vertippt?
Vielen Dank für deinen Hinweis und dafür, dass du das so genau untersucht hast ;)

0.00 BPC

double-u 8 years ago (edited)

Ich hatte deine Linie

https://steemitimages.com/DQmeyBBAjsQH1ixSxS3Gbm3Pj4sfzXz8RJAAmSWmc8Q4fYr/space.png

runtergeladen und untersucht.
Dabei kam heraus, dass sie 1680 x 1 groß ist.

Aber vielleicht stehe ich ja auch auf dem Schlauch ;-)

Also, soll ich eine verwenden, die 1920 x 1 Pixel hat?

0.00 BPC

steemchiller 8 years ago (edited)

Hmm, das ist merkwürdig. Ich dachte zuerst, es könnte an deinem Browser liegen, aber habe es jetzt mit Firefox, Opera und Chrome heruntergeladen und komme immer zum selben Ergebnis:

Also, normalerweise kannst du direkt meinen Link nehmen, denn es führt zu der Datei mit 1920 Pixeln in der Breite :) Aber du kannst ja sonst nochmal eine eigene erstellen und prüfen, wie groß die nach dem Herunterladen ist. Würde mich wirklich wundern, wenn das zu einem anderen Ergebnis führen würde...

0.00 BPC

double-u 8 years ago

Ich hatte deine Datei in den Steemit Editor eingegeben und in der Vorschau die leere Zeile markiert und dieses Bild runtergeladen und untersucht.

Die 1680 sind - glaube ich - exakt die doppelte Textbreite.
Vielleicht wird deine Linie durch Steemit angepasst auf diese doppelte Textbreite.

Also, mir ist das nicht so wichtig.

Wichtig wäre für mich: soll ich also eine Linie kreieren mit 1920 Breite und verwenden?

0.00 BPC

steemchiller 8 years ago

Ok, dann wird das für die Vorschau verkleinert. Auf dem Server ist es auf jeden Fall in Originalgröße gespeichert. Die 1920 hat jetzt auch keine spezielle Bedeutung, man könnte vielleicht lieber noch höher gehen.

Habe das eben mal mit einem 50-Pixel-Bild getestet und das hat nicht mehr funktioniert. Je höher desto besser. Die Datei mit 1920 ist ja auch nur 103 Bytes groß, also da könnte man sogar noch viel mehr in die Breite gehen, ohne irgendwelche Performance-Probleme zu bekommen.

1999 würden es also locker auch noch tun, falls du es mehr an deine 99er Vote-Größe anpassen möchtest... ^^

0.00 BPC

double-u 8 years ago

Danke dir noch mal, lieber Chiller!

Dann nehm' ich doch einfach 2000 Pixel Breite.

Habe heute ganz schön viel ausprobiert mit dem Material, das ich von dir als Basis habe.

Ich denke, ich werde wahrscheinlich zurecht kommen, den nächsten zweispaltigen Post nach deiner Methode zu verfassen.

Liebe Grüße

0.00 BPC

Show 2 more replies

double-u 8 years ago (edited)

Lieber @steemchiller,

nach vielen Stunden bin ich jetzt verzweifelt und am Aufgeben :-(
Das liegt nicht an dir, sondern daran, dass ich irgend etwas falsch mache.

Wenn ich dein oben dargestelltes Muster um weitere Container erweitere, erhalte ich Abstände von ca. eineinhalb Absätzen, also Abstände wie ca. 3 Zeilenwechsel.

Ich füge dir hier mal mein Beispiel ein.
Schaust du dir es bitte einmal an. Vielleicht siehst du ja, was ich falsch mache.

<div>
    <div class="pull-left">
        <h2>Deutsch</h2>
https://i.imgur.com/r8PtqXc.png
        Liebe Steemit Freundinnen,<br>liebe Steemit Freunde,
    </div>
    <div class="pull-left">
        <h2>English</h2><br>
        Dear Steemit Friends,<br><br>
    </div>
</div>
https://i.imgur.com/r8PtqXc.png
<div>
    <div class="pull-left">
        Test...
        https://i.imgur.com/r8PtqXc.png
    </div>
    <div class="pull-left">
        Test für einen etwas längeren Text in der rechten Spalte.
        Mal sehen, wie das Ganze umgebrochen wird...<br><br>
        Den mache ich jetzt mal noch länger, um sicher zu sein,
        dass es wirklich immer funktioniert...
    </div>
</div>
https://i.imgur.com/r8PtqXc.png
<div>
    <div class="pull-left">
        Test für einen etwas längeren Text in der linken Spalte.
        https://i.imgur.com/r8PtqXc.png
    </div>
    <div class="pull-left">
        Test für kurzen Text in der rechten Spalte...
    </div>
</div>
https://i.imgur.com/r8PtqXc.png
<div>
    <div class="pull-left">
        Test für einen etwas längeren Text in der linken Spalte.
        https://i.imgur.com/r8PtqXc.png
    </div>
    <div class="pull-left">
        Test für kurzen Text in der rechten Spalte...
    </div>
</div>
https://i.imgur.com/r8PtqXc.png
<div>
    <div class="pull-left">
        Test für einen etwas längeren Text in der linken Spalte.
        https://i.imgur.com/r8PtqXc.png
    </div>
    <div class="pull-left">
        Test für kurzen Text in der rechten Spalte...
    </div>
</div>

Danke Dir!

Und liebe Grüße, @double-u

0.00 BPC

steemchiller 8 years ago

Moin @double-u! Wie ich sehe, ist meine Lösung noch nicht ganz marktreif und es liegt nicht an dir, sondern daran, dass ich etwas vergessen habe zu erwähnen.

Am wichtigsten sind die Bilder zwischen den äußeren <div>'s, denn diese halten die Paragraphen außeinander. In den meisten Fällen braucht man die Bilder in den inneren <div>'s nicht einzufügen. Nur dann, wenn der Text nicht über die volle Breite geht.

Ich hatte das mit sehr kurzen Texten getestet und es daher gar nicht bemerkt, aber es macht jetzt Sinn für mich. Wahrscheinlich kommst du fast ganz ohne die Bilder in den Inneren aus. Das Bild wird anscheinend auch bei den <h2>-Elementen benötigt, wenn der Text zu kurz ist, aber das hast du ja schon erfolgreich bewältigt :)

Habe das jetzt mal wie beschrieben angepasst und es sieht gut aus bei mir:

<div>
    <div class="pull-left">
        <h2>Deutsch</h2>
        https://i.imgur.com/r8PtqXc.png
        Liebe Steemit Freundinnen,<br>liebe Steemit Freunde,
    </div>
    <div class="pull-left">
        <h2>English</h2><br>
        Dear Steemit Friends,<br><br>
    </div>
</div>
https://i.imgur.com/r8PtqXc.png
<div>
    <div class="pull-left">
        Test...
        https://i.imgur.com/r8PtqXc.png
    </div>
    <div class="pull-left">
        Test für einen etwas längeren Text in der rechten Spalte.
        Mal sehen, wie das Ganze umgebrochen wird...<br><br>
        Den mache ich jetzt mal noch länger, um sicher zu sein,
        dass es wirklich immer funktioniert...
    </div>
</div>
https://i.imgur.com/r8PtqXc.png
<div>
    <div class="pull-left">
        Test für einen etwas längeren Text in der linken Spalte.
    </div>
    <div class="pull-left">
        Test für kurzen Text in der rechten Spalte...
    </div>
</div>
https://i.imgur.com/r8PtqXc.png
<div>
    <div class="pull-left">
        Test für einen etwas längeren Text in der linken Spalte.
    </div>
    <div class="pull-left">
        Test für kurzen Text in der rechten Spalte...
    </div>
</div>
https://i.imgur.com/r8PtqXc.png
<div>
    <div class="pull-left">
        Test für einen etwas längeren Text in der linken Spalte.
    </div>
    <div class="pull-left">
        Test für kurzen Text in der rechten Spalte...
    </div>
</div>

Aber... Nach weiteren Überlegungen komme ich zu dem Ergebnis, dass man meine Lösung lieber noch nicht verwenden sollte. Es gibt ein Problem mit den "pull-left"-Klassen, wenn sich die Breite der Steemit-Posts ändern sollte.

Das muss nicht unbedingt in nächster Zeit sein, aber es könnte irgendwann passieren und daher würde ich dir erstmal raten, nach deiner bisherige Lösung mit den "pull-left" und "pull-right"-Klassen vorzugehen.

Ich werde mir das im Laufe der kommenden Woche nochmal im Detail anschauen und bei Github einen Pull-Request für die Steemit-Entwickler erstellen, damit wir hier endlich eine brauchbare Lösung ohne Umwege bekommen.

Sorry für die Umstände! Zum Glück habe ich meinen Post zu dem Thema noch nicht gemacht ;)

Liebe Grüße

0.00 BPC

double-u 8 years ago

Guten Morgen lieber @steemchiller,

du bist ja echt früh auf. Ich war noch gar nicht im Bett. Werde aber gleich dort hin verschwinden.

Vielen Dank für deine Erläuterungen!
Ich bin etwas getröstet ;-)

Eine Laienfrage:
könnte man nicht die "pull-left" und "pull-right"-Variante kombinieren mit den Bildlinien?
Und, würde das nicht auch verhindern, dass etwas verrutscht bei zukünftigen Änderungen ?

Liebe Grüße

0.00 BPC

steemchiller 8 years ago

Ja, du bist schlau @double-u, das merkt man immer wieder :) Das würde wirklich funktionieren, solange die Breite in den Spalten immer dieselbe ist. Man müsste wahrscheinlich öfter mit der Bildlinie im rechten Block arbeiten. Wenn die doppelten Umbrüche dann nicht mehr auftauchen, wäre das eine Lösung, die zumindest auch bei einer geänderten Post-Breite funktionieren sollte...

Ich muss jetzt erstmal los und was erledigen und dann endlich mal schlafen (war mir diese Nacht nicht möglich), aber gegen späten Nachmittag schau ich mir das nochmal an!

Eien sehr gute Idee auf jeden Fall! Bis später ;)

0.00 BPC

double-u 8 years ago

Noch mal guten Morgen, lieber @steemchiller!

Ich dachte, du seist so früh aufgestanden. Dabei warst du ja - wie ich - noch gar nicht im Bett ;-)

Danke für das Kompliment!

Ich habe noch eine Ergänzung:
also, mein Anliegen ist gar nicht so darauf ausgerichtet, die manuellen Zeilenwechsel <br>'s nicht setzen zu müssen. Das flutscht mit meiner Schablone (zweispaltiges Writer-Textdokument, angepasst an die Spaltenbreite nach Veröffentlichung) total gut. Es ist keine Mehrarbeit, da ich den Text ja sowieso irgendwo verfassen muss.
Es geht mir eigentlich nur darum, Textverschiebungen durch eventuell zukünftige Änderungen (deren Eintreffen du ja vermutest) zu vermeiden.

Man müsste wahrscheinlich öfter mit der Bildlinie im rechten Block arbeiten.

Da erstellst du ja bestimmt ein Muster; denn das verstehe ich so noch nicht (weiß nicht, wohin genau die Bildlinie einzufügen ist).
Und ich habe mir jetzt vorgenommen, dich lieber mal kurz zu fragen, anstatt - wie gestern - stundenlang herum zu probieren. Du "musst" dir nämlich vorstellen oder bewusst machen, dass ich null Ahnung von HTML habe. Ist so!

Liebe Grüße und bis später, @double-u

0.00 BPC

steemchiller 8 years ago

Guten "Morgen" @double-u :) Bin jetzt wach und konnte meinen fehlenden Schlaf endlich nachholen. Ich habe dein Beispiel jetzt mal auf die "pull-right"-Variante geändert und es sieht gut bei mir aus. Mit dem rechten Block meinte ich das jeweils zweite innere <div>, also jetzt immer das mit der Klasse "pull-right".

Ich habe mal eine viel breitere Post-Breite getestet und es funktioniert auch damit noch ganz gut. Es kommt zwar dann auch wieder zu doppelten Umbrüchen, aber insgesamt ist alles immer noch gut lesbar und die Blöcke beginnen links und rechts jedesmal wieder in selber Höhe.

So sieht das jetzt angepasst aus:

<div>
    <div class="pull-left">
        <h2>Deutsch</h2><br>
        Liebe Steemit Freundinnen,<br>liebe Steemit Freunde,
    </div>
    <div class="pull-right">
        <h2>English</h2><br>
        Dear Steemit Friends
        https://i.imgur.com/r8PtqXc.png
    </div>
</div>
https://i.imgur.com/r8PtqXc.png
<div>
    <div class="pull-left">
        Test...
    </div>
    <div class="pull-right">
        Test für einen etwas längeren Text in der rechten Spalte.
        Mal sehen, wie das Ganze umgebrochen wird...<br><br>
        Den mache ich jetzt mal noch länger, um sicher zu sein,
        dass es wirklich immer funktioniert...
    </div>
</div>
https://i.imgur.com/r8PtqXc.png
<div>
    <div class="pull-left">
        Test für einen etwas längeren Text in der linken Spalte.
    </div>
    <div class="pull-right">
        Test für kurzen Text in der rechten Spalte...
        https://i.imgur.com/r8PtqXc.png
    </div>
</div>
https://i.imgur.com/r8PtqXc.png
<div>
    <div class="pull-left">
        Test für einen etwas längeren Text in der linken Spalte.
    </div>
    <div class="pull-right">
        Test für kurzen Text in der rechten Spalte...
        https://i.imgur.com/r8PtqXc.png
    </div>
</div>
https://i.imgur.com/r8PtqXc.png
<div>
    <div class="pull-left">
        Test für einen etwas längeren Text in der linken Spalte.
    </div>
    <div class="pull-right">
        Test für kurzen Text in der rechten Spalte...
        https://i.imgur.com/r8PtqXc.png
    </div>
</div>

Du solltest übrigens das Bild lieber auf steemitimages.com ablegen. Ich weiß nicht, ob die Bilder auf imgur.com immer verfügbar bleiben. Aber wahrscheinlich hattest du das nur Gründen der Übersichtlichkeit gemacht.

Falls es immer noch zu doppelten Umbrüchen kommen sollte, würde ich vorschlagen, dass wir das auf nächste Woche verschieben :)

Liebe Grüße

0.00 BPC

double-u 8 years ago

Lieber @steemchiller,

ich hab's gerade mal kurz in den Steemit-Editor eingegeben.
Sieht gut aus!

Danke noch mal!

Und danke auch für deinen Hinweis mit "imgur.com"!
Das hat meine "MarkdownPad2-Software" so gemacht, und ich hatte mir gar nicht bewusst gemacht, dass diese Bilder ja auch irgendwo liegen müssen ;-)

Klar, dann verwende ich doch lieber steemitimages.com.

Ich muss auch erst mal ein paar Sachen machen. Unbedingt neues Liquid mischen, denn ich habe hier vor dem Bildschirm wirklich alles bis auf den letzten Tropfen weggedampft ;-)
Wäsche waschen usw.

Wir seh'n uns auf der Wochenseite.

Lieben Gruß

0.00 BPC

Show 1 more reply

double-u 8 years ago

PS: die neue Seite ist online.
Falls du der Erste sein möchtest ;-)

0.00 BPC

steemchiller 8 years ago (edited)

Das wissen mit Sicherheit die Meisten hier noch nicht @double-u ;) Du machst es jetzt aber auch echt mal spannend... ^^ Hau raus den Trick, du gewiefter Wächter des geheimen Markups :) Falls ich nicht gleich upvoten sollte, liegt das an meiner neuen Voting-Strategie (Test bzgl. höherer Curation-Rewards und VP bei 80% halten), aber ich werde das natürlich nach erfolgreicher Ladung nachholen.

Finde ich übrigens eine sehr gute Idee, hier einfach mal so ein paar Tipps mit fetter Überschrift abzulegen, so dass man sofort weiß, worum es geht!

0.00 BPC

double-u 8 years ago

Lieber @steemchiller,

ich habe oben eine Fortsetzung geschrieben.

Liebe Grüße

0.00 BPC

double-u 8 years ago

Danke für's Lob!

Zur Spalten-Info würde ich lieber gerne erst mal warten, wen es überhaupt interessiert.

Du beherrschst das doch garantiert perfekt. Davon gehe ich aus. Falls nicht, mach' ich's natürlich sofort, immediately, immédiatement, inmediatamente und subito!

In einem langen und zweispaltigen Artikel von @cobalus habe ich gesehen, dass jeder Absatz perfekt sitzt, und der Post nicht editiert werden musste. Also hat @cobalus anscheinend auch eine perfekte Lösung.

0.00 BPC

cobalus 8 years ago

Da irrst du dich aber gewaltig Werner (:

Ich musst da einen Haufen nachträglich editieren...

Lediglich die

(<hr>)

außerhalb der <div> Bereiche synchronisieren den folgenden Text wieder auf ein Niveau...

Ich gebe dir allerdings vollkommen Recht, dass der interne Markup-Editor von Steemit und dessen Ergenis mit dem veröffentlichten Text und Format hier nicht übereinstimmt.

Des Weiteren hast du ein Problem bei verschiedenen Medien. In einem Smartphone-Browser werden deine Umbrüche und Anpassungen gegebenfalls anders aussehen.

Müsste ich professionell bloggen, dann würde ich wahrscheinlich einen geeigneten Editor suchen, der dem Steemit-Format nach der Veröffentlichung am ähnlichsten ist und dann nur noch diesesn verwenden.

Nun aber bitte raus mit der Sprache Werner und liebe Grüße.

0.00 BPC

double-u 8 years ago

Hi lieber @cobalus,

da freue ich mich ja, dass ich auch mal etwas als HTML- und Markdown-Laie beitragen kann ;-)

Ich habe oben eine Fortsetzung geschrieben.

Liebe Grüße

0.00 BPC

afrog 8 years ago (edited)

Das ist viel zu umständlich. Zweispaltig geht anders.So:
<div class="pull-left"> hier deine linke Spalte </div><div class="pull-right"> hier deine rechte Spalte </div>

Will dein Markup dazwischen nicht richtig arbeiten, darfst du gerne alles, was DIV heißt, mit einer Zeilenschaltung vom Markup–Block trennen. Das funktioniert mit Links (URLs) oft nicht. Dann musst du den Link in HTML notieren:

So geht eine URL in HTML:
<a href="https://sprungziel">Link Text oder Bild</a>

So geht ein Bild in HTML:
<img src="https://Grafikadresse">

Fragen sind jederzeit am Teich zu quaken.

0.00 BPC