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

You are viewing a single comment's thread from:

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

steemchiller in #deutsch • 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

8 years ago in #deutsch by steemchiller

0.00 BPC

6 votes

Sort:

Trending

[-]

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

2 votes

[-]

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

2 votes

[-]

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

3 votes

[-]

double-u 8 years ago

Super erklärt! Vielen Dank!

Und schönen Abend noch!

0.00 BPC

1 vote

[-]

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

3 votes

[-]

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

4 votes

[-]

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

2 votes

[-]

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

3 votes

[-]

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

1 vote

[-]

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

2 votes

[-]

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

1 vote

[-]

steemchiller 8 years ago (edited)

Hallo @double-u! Ich habe gerade noch ein bisschen ausprobiert, was die optimale Größe des transparenten Bildes angeht und habe herausgefunden, dass ein PNG mit 4000 Pixeln in der Breite ebenfalls nur 110 Bytes groß ist.

Ich würde empfehlen, mindestens diese Breite zu nehmen, da es damit niemals zu Problemen kommen kann, egal wie hoch die Auflösung des Endgeräts ist. Die Wenigsten werden Steemit auf dem Fernseher mit so einer Auflösung besuchen, aber man weiß nie, was in den nächsten 10 Jahren noch kommen wird :)

Damit sind wir auf jeden Fall für viele Jahre gerüstet und die alten Beiträge werden auch nach 10 Jahren noch richtig dargestellt. Ich hatte mir Gedanken gemacht, weil ich euch das hier ja empfohlen habe und möchte nicht, dass es einiges Tages nicht mehr funktioniert und auf mich zurückkommt ;)

Ich werde mal schauen, ob ich das an die Steemit-Entwickler weitergeben kann, damit wir möglichst bald eine saubere Lösung in Form einer "vAlignTop"-Klasse bekommen. In meinem ersten Kommentar mit der Beschreibung habe ich jetzt auch die Breite auf 4000 geändert.

Liebe Grüße

0.00 BPC

2 votes

Show 1 more reply

[-]

steemchiller 8 years ago

Freut mich, dass ich helfen konnte! Ja mit 2000 Pixeln sollte man auf der sicheren Seite sein. Ich überlege, dafür noch einmal einen eigenen Post zu erstellen, wenn ich dazu in den nächsten Tagen noch komme...

Falls du noch fragen haben solltest, kannst mir einfach nochmal hier antworten oder so. Ich bin ja so gut wie immer hier ;)

Liebe Grüße

0.00 BPC

2 votes

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

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

Linke Spalte

Rechte Spalte

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