Grafik umfließen, aber wie?

  • Hallo Leute!

    ich hoffe, ihr könnt mir helfen.
    Das Design habe ich hinbekommen, aber das Handling dazu ist sehr umständlich.
    Ich habe zwar eine ungefähre Ahnung, wie wie man das anders machen kann, aber mir fehlt das Fachwissen (in CSS) um es umzusetzen.

    Für meine Bloggerseite benutze ich ein Seitentemplate das unter anderem aus zwei Hintergrundbildern besteht. Bild 1 ist am linken Rand die Schnur mit Messingringen, die sich immer wiederholt. Bild 2 besteht aus meinem Seitenportrait das immer in der linken oberen Ecke bleiben soll. Der Bloggertext soll um meinen Körper herumfließen, so wie es auch jetzt schon ist. -> Siehe Link.

    Umgesetzt habe ich es, indem ich links neben jede der 18 Zeilen eine durchsichtiges PNG-Bild von 10 Pixeln Höhe und der benötigten Breite gesetzt habe.
    (Bild in Zeile eins 170 Pixel breit, Bild in Zeile zwei 185 Pixel breit, Bild in Zeile drei 195 Pixel breit usw.)

    Problem:
    Nur wenn ich einen neuen Bloggertext einfügen möchte, muß ich für jede Zeile immer einen separaten Textschnipsel einsetzen. Ich hätte gerne, dass ich einfach drauf losschreiben kann, und der Text automatisch um meinen Körper herumfließt.
    Rein theoretisch müsste das durch einen entsprechenden Eintrag (für jede Zeile) in der style.css möglich sein - aber wie???

    Ich habe es auch schon direkt auf der Seite mit...

    Code
    <p style="padding-left: 170px;">Text</p>

    ...probiert, nur dabei wird mir nach jeder Textzeile dann immer noch eine Leerzeile eingefügt.

    Hier mal die nötigen Files.

    ...Die PHP-Templateseite in der die beiden Container für die beiden Hintergrundbilder und die zugerörige Klasse definiert werden.

    Und hier die entsprechnden Einträge in der Style.css

    Ich hoffe, ihr habt eine Idee, die ich mit meinem begrenzten Wissen auch umsetzen kann.

    Eben ist mir noch eine Idee gekommen, weiß aber nicht ob das so geht.
    Nämlich die durchsichtigen Bilder auch in die Style.css verlegen - aber als "normales Bild" und nicht als Hintergrundbild? - dann müßte der Text rein theoretisch auch erst ab dem durchsichtigen Bildern anfangen, ohne dass die Einträge dafür auf der eigentlichen Seite abgelegt sind????

    Gruß Frank

    Einmal editiert, zuletzt von Frank9652 (20. März 2014 um 22:59)

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Rein theoretisch müsste das durch einen entsprechenden Eintrag (für jede Zeile) in der style.css möglich sein - aber wie???


    Eher nicht, weil Du da höchstens p-Tags oder auch mal ein span formatierst und mehr nicht. In C kenne ich eine Lösung, die sollte sich auch mit PHP umsetzen lassen.

    Vom Prinzip müsstest Du dazu den Text erst einmal in ein Array einlesen, wobei in der Schleife zum Einlesen die Zeichen gezählt werden müssen und in der Schleife ein Vergleich mit einem anderen Array erfolgt, in dem sich die Anzahl an Zeichen befinden, die in Zeile 1, 2, 3 usw. enthalten sein dürfen. Dann muss nur noch die Anzahl an Pixeln bekannt sein, die jedes Zeichen in einer Zeile belegen darf, wenn es nicht genau aufgeht, die überschüssigen Pixel bei den Abständen vermittelt werden und der Text nach rechts ausgerichtet werden.

    Jedenfalls so ungefähr wird Text in einem Bearbeitungsprogramm ausgerichtet, zum Beispiel beim Formatieren als Blocksatz. Ohne Zählung der Zeichen läuft da gar nichts, zumindest in C verhält es sich so in etwa und in PHP würde mir da auch keine andere Lösung einfallen.

  • Ich habe es auch schon direkt auf der Seite mit...

    Code
    <p style="padding-left: 170px;">Text</p>

    ...probiert, nur dabei wird mir nach jeder Textzeile dann immer noch eine Leerzeile eingefügt.


    Der Abstand, der nach einer Leerzeile aussieht, lässt sich vermeiden, wenn mit Umbrüchen und span-Tags gearbeitet wird. Nur ein responsives Design wäre damit nicht mehr möglich.

    HTML
    <p style="text-align: left">
    <span style="padding-left: 140px">Text ...</span><br />
    <span style="padding-left: 150px">Text ...</span><br />
    <span style="padding-left: 160px">Text ...</span><br />
    <span style="padding-left: 170px">Text ...</span><br />
    <span style="padding-left: 180px">Text ...</span><br />
    <span style="padding-left: 170px">Text ...</span><br />
    </p>


    Mit PHP und strlen die Anzahl an Zeichen zählen, die in jede Zeile eingefügt werden sollen, bevor ein Umbruch erfolgt und der nächste span-Tag ausgegeben wird, wäre zwar möglich, doch nur für nichtproportionale Fonts geeignet. Bei den meisten Schriftarten handelt es aber um proportionale Schriftarten, bei denen ein i kürzer ist als ein m, so das ein Zählen der Zeichen allein nicht genügt, es muss der Platzbedarf für die einzelnen Zeichen ebenfalls berücksichtigt werden.

    http://de.wikipedia.org/wiki/Proportionale_Schriftart

    Das Beispiel, welches ich mal sah, dabei handelte es sich um ein Beispiel, um Text wie im Editor ersichtlich an einen Drucker zu senden. Da wurden dann die Abstände neu berechnet. Doch ob nun an einen Drucker senden oder an einen Browser, der Aufwand wäre zumindest bei letzteren ebenfalls erheblich.

  • Vielen Danke erst mal für deine Antworten. ich werde es ausprobieren und mich evtl. wieder melden.

    Danke, und ein schönes Wochenende.

    Gruß Frank

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!