Positionierungsproblem

Ich bin gerade dabei die single-Ansicht auf meinem Blog anzupassen und weiß absolut nicht mehr weiter.

Ich möchte, dass das Bild links steht und vom Text umflossen wird (Bild und Text sollen auf einer Höhe anfangen). Außerdem soll der Abstand von Bild und Text nach oben und unten gleichmäßig 2.0em betragen.

Leider klappt davon gar nichts - hier und hier sind zwei Beispiele: es passt nix zusammen...Beim zweiten Link passt der Abstand nach oben und unten, aber der Textfluss nicht. Beim ersten Link geht alles schief. Ich brauche euch, ich verzweifel...

Zitat von Narcanti

Ich würde dem Bild eine CSS-Klasse zuweisen und das dann im stylesheet regeln.
Unter anderem float:left; dann schau mal wie es aussieht...

Das habe ich bereits gemacht.

#primary .primary img{
	width: 50%;
	height: auto;
	float: left;
	margin: 0;
}

Wenn ich noch Werte für margin angebe, werden diese nicht übernommen. Besonders irritiert mich, dass das <p>-Tag, welches einen Blogeintrag umschließt, bei dem zweiten Link die Angaben für margin übernimmt, beim ersten Link diese aber ignoriert.

Zitat von MaD

also wenn ich mir das Beispiel hier anschauen freesteiler.de
und dann diese Werte nutze

Code

float:left;
height:auto;
margin:2em 2em 0 0;
width:50%;

dann müsste es das sein, was du willst ... glaube ich :mrgreen:

Ne, leider nicht. Hier nochmal eine genaue Auflistung der Positionierungsprobleme.

Fall 1: Bei dieser Single-Ansicht fängt der Text nicht auf der gleichen Höhe an wie das Bild und der Außenabstand von Bild und Text nach unten mit 3.0em wird nicht berücksichtigt.

Fall 2: Bei dieser Single-Ansicht fängt der Text nicht auf der gleichen Höhe an wie das Bild und der Abstand unterhalbs des Bilds zum Text ist zu groß.

Wenn ich einen Blogeintrag schreibe, wird dieser ja automatisch mit einem <p>-Tag "ummantelt". Und diesem habe ich dann einen Außenabstand von 3.0em gegeben.

#primary .primary p{
        margin: 3.0em 0 3.0em 0;
}

Ich habe dem <p>-Tag den Außenabstand gegeben, damit es keine Probleme gibt, falls der Text mal so lang ist, dass er das Bild auch komplett unterfließt wie beim Fall 2.

Zitat von MaD

ah k ... das hatte ich nicht gesehen ...

aber der p-Tag ist nur so hoch wie der Text es auch ist ... das Bild ragt über den p-Tag hinaus ... dadurch siehst du den Abstand unten nicht ...

am Besten du schaust dir das mal mit Firebug an, dann siehst du, was ich meine und kannst onthefly die css ändern ...

Wieso das denn? Das <p>-Tag umschließt doch das Bild und den Text, wie kann das Bild dann darüber hinaus ragen?

Muss erstmal Firefox auf meinem Macbook installieren, dann schau ich mir das mal mit Firebug an.

Zitat von MaD

warum das so ist kann ich dir leider nicht sagen ... hatte mich auch gewundert ... und um dir das zu beweisen, wollte ich dir eigentlich sagen du sollst in dem p-Tag ein overflow:hidden; reinsetzen ...

aber dann zeigt er es so an, wie es sein sollte, dann umschließt der p-Tag auch das Bild ... ich hätte ein anderes Verhalten erwartet :mrgreen:

Cool, komischerweise klappt es mit overflow:hidden ja echt, dass der Abstand nach unten angezeigt wird. Jetzt habe ich nur noch das Problem, dass der Text oben nicht bündig mit dem Bild anfängt.

Zitat von Narcanti

Schmeiß mal den <br /> nach dem Bild raus

Ja stimmt. Leider wird dieser Zeilenumbruch von Wordpress automatisch erzeugt und ich weiß nicht, wie ich ihn weg bekomme.

Zitat von MaD

...
aber warum overflow:hidden; so wirkt ist mir immer noch nicht ganz klar ....

:-) Da habe ich auch echt keine Ahnung! komisch...

Vielleicht gibt es ja eine Möglichkeit den Zeilenumbruch wegzubekommen, ich habe allerdings keine Idee.
Mit negativen margins klappt es bei mir mit Safari auch nicht. Mensch, wieso wird der Zeilenumbruch überhaupt erzeugt?!

Zitat von Narcanti

Irgendwo wird es wohl drin stehen, vermutlich... Oder wird der automatisch eingefügt?
In der HTML-Ansicht im Editor ist der nicht zu sehen?

Scheint automatisch eingefügt zu werden, denn im Editor ist davon nix zu sehen.

Zitat von Narcanti

Dann versuch doch mal im template für die Seite einzufügen:

PHP

<?php remove_filter('the_content', 'wpautop'); ?>

Hab den Code in den <head>-Bereich eingefügt und siehe das es klappt! Jetzt habe ich nur noch ein Problem: wenn der Text kürzer ist als das Bild, hat das Bild nach unten hin keinen Abstand - siehe hier.

Und wie sieht es nun mit der Text-Formatierung aus? Seitdem ich den oben genannt Code eingefügt habe, wird "line-height" nicht mehr berücksichtigt.