Text umfliesst Bild

    Ich habe folgende Frage zu meinem Design:

    Ich möchte in meinen Posts gern ab und zu Bilder einfügen (zum Beispiel links oben) und möchte, dass der Text das Bild in einem gewissen Abstand umfliesst.

    Mein blog ist hier: blinked.

    Zum Beispiel beim momentan obersten Post (Quietschentchenbild) fänd ich es schön, wenn die paar Zeilen das Bild umfliessen würden und ich es nicht in die nächste Zeit setzen müsste.

    Jemand ne Idee? :)

    • Gerade eben
    • 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

    Zitat von selm

    Ich habe folgende Frage zu meinem Design:

    Ich möchte in meinen Posts gern ab und zu Bilder einfügen (zum Beispiel links oben) und möchte, dass der Text das Bild in einem gewissen Abstand umfliesst.

    Mein blog ist hier: blinked.

    Zum Beispiel beim momentan obersten Post (Quietschentchenbild) fänd ich es schön, wenn die paar Zeilen das Bild umfliessen würden und ich es nicht in die nächste Zeit setzen müsste.

    Jemand ne Idee? :)

    Im Wordpress-WYSIWYG-Editor kann man das Bild mit einem Klick markieren und mit dem kleinen Bäumchen in der Toolbar die Bildeigenschaften bearbeiten. Einfach unter Ausrichtung "rechts" oder "links" wählen, schon fließt der Text drumrum.

    Wenn man unter dem Bild auch noch einen Text haben will (als Bildunterschrift) oder vielleicht ein anderes Element, denn muss man allerdings etwas HTML tippen. Die ganz kurze Anleitung mit einem Beispiel sieht so aus...

    Code
    <div style="float:left; width:200px; text-align:center">
<img src="path/to/image.png" width="180" alt="" /><br />
Text darunter
</div>

    ...die lange Anleitung kriegt man etwa in SelfHTML. (In meinen Augen immer noch die beste Dokumentation für HTML.)

    das hab ich bereits versucht, allerdings passieren dann komische sachen im IE und auch in Firefox.

    Der Text fliesst zwar um das Bild herum aber der Abstand zum darunterliegenden Post wird entweder kleiner als normal bzw. fliesst sogar manchmal in den bearbeiteten post hinein. was muss ich tun? :(

    Einmal editiert, zuletzt von selm (18. September 2007 um 10:11)

    style.css, Zeile 271:

    Code
    .entryhead {
[COLOR="Red"]clear:both;[/COLOR]
margin-top:10px;
}

    Die rote Zeile hinzufügen.

    Wegen dem Abstand musst du ein wenig mit den margin-Werten des Bildes experimientieren - style.css, Zeile 754:

    Code
    margin:0 7px [COLOR="Red"]2px[/COLOR] 0;


    Der rote Wert ist für den Abstand nach unten verantwortlich.

    hat leider gar nichts bewirkt :(

    ich möchte ja einfach, dass der ältere post nicht in den aktuellen hineinfliesst. passiert nur, wenn ich den align befehl mit dem bild verwende..ansonsten nicht.

    Einmal editiert, zuletzt von selm (18. September 2007 um 10:19)

    Zitat von selm

    ich möchte ja einfach, dass der ältere post nicht in den aktuellen hineinfliesst. passiert nur, wenn ich den align befehl mit dem bild verwende..ansonsten nicht.

    Das macht das clear:both. Allerdings kann der IE <7 nichts mit der Angabe img[align=left] anfangen, da er diese Attributselektoren nicht kennt. Dafür benötigst du die Klasse alignleft

    EDIT: ok, clear:both verhindert das hineinfliessen.

    aber wieso muss ich margin werte ändern, wenn ich einfach den normalen abstand zwischen den posts haben möchte, die bei allen anderen posts ja auch einfach automatisch da sind?

    Einmal editiert, zuletzt von selm (18. September 2007 um 10:25)

    Also mal ganz langsam: Das Bild wird gefloatet. Das heißt es wird aus dem normalen Fluß herausgenommen, wird also von anderen Elementen in der Positionierung nicht beachtet. Nachfolgende Elemente "umfließen" das Element. Speziell Abstände anderer Elemente haben aber keinen Einfluß mehr auf das gefloatet Element. Außerdem vergrößert sich das Elternelement nicht auf die Größe des gefloateten Elements, das Bild ragt also aus diesem heraus.
    (Sieht man sehr schön mit der Firefox-Erweiterung Firebug.)

    Mit clear sagst du einem Element, es soll nicht mehr neben einem gefloateten stehen, sondern darunter.

    ..und deswegen hab ich jetzt doch noch eine frage:

    ich KANN eigentlich keine links oder rechtsbündigen bilder in das blog einbauen und gleichzeitig, den abstand zum nächsten post standardisiert behalten ohne auch gleichzeitig einen abstand unter dem bild zu haben, wenn ich mal um das bild herumschreibe?

    Mmmh... vielleicht wenn du dazwischen ein unsichtbares div machst, was nach dem Bild cleart. So in etwa:

    HTML:

    Code
    <div class="entry">
  <img style=float:... /"> Wenig Text
</div>
<div class="cleardiv"></div>


<div class="entry">

    CSS:

    Code
    .cleardiv {
clear:both;
margin:0;
padding:0;
display:none;
}

    hmm wenn ich den html-code in die code-eingabe in wordpress einfüge, kann ich nach dem speichern gar nicht mehr in die code einsicht gehen und irgendwie spinnt es dann ziemlich rum... ??

    Also ich habe das gleiche Problem. Wenn ich Bilder linksbündig setze umfliesst der Text nicht richtig das Bild. Der Abstand vom Bild zum Text ist auch zu kurz. Wollte mal die Tipps aus diesem Threat probieren doch leider gibt es in meiner css die Stellen nicht.

    Hab die css mal angehängt vielleicht weiß ja jemand was ich tun kann.

    Hm noch keiner nachgeschaut... Wäre echt nett wenn das einer von euch Pros machen könnte denn so wie es bei mir momentan ausschaut isses nicht so das Wahre. Bitte!!!

    PS Das Theme heißt sunsetidea-10

    Einmal editiert, zuletzt von Ronnie54 (2. Oktober 2007 um 08:56)

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden