1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Positionierungsproblem

Dieses Thema im Forum "Design" wurde erstellt von Blogga, 10. April 2009.

Seite 1 von 2
  1. Blogga

    Blogga Well-Known Member

    Registriert seit:
    3. Dezember 2008
    Beiträge:
    157
    Zustimmungen:
    0
    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...
     
    #1 Blogga, 10. April 2009
  2. Narcanti

    Narcanti Well-Known Member

    Registriert seit:
    17. Mai 2007
    Beiträge:
    1.872
    Zustimmungen:
    0
    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...
     
    #2 Narcanti, 10. April 2009
  3. Blogga

    Blogga Well-Known Member

    Registriert seit:
    3. Dezember 2008
    Beiträge:
    157
    Zustimmungen:
    0
    Das habe ich bereits gemacht.
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    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.
     
    #3 Blogga, 10. April 2009
  4. MaD

    MaD Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Januar 2006
    Beiträge:
    3.097
    Zustimmungen:
    0
    also wenn ich mir das Beispiel hier anschauen freesteiler.de
    und dann diese Werte nutze

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    dann müsste es das sein, was du willst ... glaube ich :mrgreen:
     
    #4 MaD, 10. April 2009
  5. Blogga

    Blogga Well-Known Member

    Registriert seit:
    3. Dezember 2008
    Beiträge:
    157
    Zustimmungen:
    0
    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ß.
     
    #5 Blogga, 10. April 2009
  6. MaD

    MaD Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Januar 2006
    Beiträge:
    3.097
    Zustimmungen:
    0
    zu Fall 1: wo sind den diese 3em definiert ... weil wenn ich mir die Seite von Fall 1 anschaue und da speziell den css-Teil tauchen dort nirgends 3em auf ...

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    das ist der css-Teil den er sich zieht ... und bei margin ist der dritte Wert, der den Abstand nach unten darstellt 0 ...

    k also du könntest es mit folgender css-Klasse versuchen ... so ist der Text und das Bild auf gleicher Höhe und der Abstand zwischen Bild unten und Text ist 1em .... wo der Abstand 3em jetzt noch hinsoll ist mir nicht ganz klar, daher hab ich den erstmal weggelassen ...

    wenn das nicht passen sollte, mach mir mal bitte einen Screeshot, wo das nicht passt ...

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
    #6 MaD, 10. April 2009
  7. Blogga

    Blogga Well-Known Member

    Registriert seit:
    3. Dezember 2008
    Beiträge:
    157
    Zustimmungen:
    0
    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.
    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    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.
     
    #7 Blogga, 10. April 2009
  8. MaD

    MaD Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Januar 2006
    Beiträge:
    3.097
    Zustimmungen:
    0
    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 ...
     
    #8 MaD, 10. April 2009
  9. Blogga

    Blogga Well-Known Member

    Registriert seit:
    3. Dezember 2008
    Beiträge:
    157
    Zustimmungen:
    0
    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.
     
    #9 Blogga, 10. April 2009
  10. MaD

    MaD Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Januar 2006
    Beiträge:
    3.097
    Zustimmungen:
    0
    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:
     
    #10 MaD, 10. April 2009
  11. Blogga

    Blogga Well-Known Member

    Registriert seit:
    3. Dezember 2008
    Beiträge:
    157
    Zustimmungen:
    0
    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.
     
    #11 Blogga, 10. April 2009
  12. Narcanti

    Narcanti Well-Known Member

    Registriert seit:
    17. Mai 2007
    Beiträge:
    1.872
    Zustimmungen:
    0
    Schmeiß mal den <br /> nach dem Bild raus
     
    #12 Narcanti, 10. April 2009
  13. MaD

    MaD Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Januar 2006
    Beiträge:
    3.097
    Zustimmungen:
    0
    LOL genau das habe ich auch gerade gesehen .... mist die ganze Zeit nur noch dem css geschaut :mrgreen: ... und dann finde ich es und dann ist jemand ne Sekunde schneller :p

    aber warum overflow:hidden; so wirkt ist mir immer noch nicht ganz klar ....
     
    #13 MaD, 10. April 2009
  14. Blogga

    Blogga Well-Known Member

    Registriert seit:
    3. Dezember 2008
    Beiträge:
    157
    Zustimmungen:
    0
    Ja stimmt. Leider wird dieser Zeilenumbruch von Wordpress automatisch erzeugt und ich weiß nicht, wie ich ihn weg bekomme.
    :) Da habe ich auch echt keine Ahnung! komisch...
     
    #14 Blogga, 10. April 2009
    Zuletzt bearbeitet: 10. April 2009
  15. MaD

    MaD Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Januar 2006
    Beiträge:
    3.097
    Zustimmungen:
    0
    also wenn das <br/> nicht wegzukriegen ist, dann gibt es noch den Weg über einen negativen margin ...

    teste mal folgendes:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    im FF sieht das auf jedenfall gut aus ... die anderen Browser speziell die IEs müssten da noch getestet werden, was die draus machen ...

    ich arbeite zwar schon desöfteren mit negativen margins, aber nicht allzugern ...
     
    #15 MaD, 10. April 2009
    Zuletzt bearbeitet: 10. April 2009
  16. Blogga

    Blogga Well-Known Member

    Registriert seit:
    3. Dezember 2008
    Beiträge:
    157
    Zustimmungen:
    0
    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?!
     
    #16 Blogga, 10. April 2009
  17. Narcanti

    Narcanti Well-Known Member

    Registriert seit:
    17. Mai 2007
    Beiträge:
    1.872
    Zustimmungen:
    0
    Irgendwo wird es wohl drin stehen, vermutlich... Oder wird der automatisch eingefügt?
    In der HTML-Ansicht im Editor ist der nicht zu sehen?
     
    #17 Narcanti, 10. April 2009
  18. Blogga

    Blogga Well-Known Member

    Registriert seit:
    3. Dezember 2008
    Beiträge:
    157
    Zustimmungen:
    0
    Scheint automatisch eingefügt zu werden, denn im Editor ist davon nix zu sehen.
     
    #18 Blogga, 19. April 2009
  19. Narcanti

    Narcanti Well-Known Member

    Registriert seit:
    17. Mai 2007
    Beiträge:
    1.872
    Zustimmungen:
    0
    Dann versuch doch mal im template für die Seite einzufügen:
    PHP:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
    #19 Narcanti, 20. April 2009
  20. Blogga

    Blogga Well-Known Member

    Registriert seit:
    3. Dezember 2008
    Beiträge:
    157
    Zustimmungen:
    0
    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.
     
    #20 Blogga, 20. April 2009
    Zuletzt bearbeitet: 20. April 2009
(Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können. )
Seite 1 von 2
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Akzeptieren Weitere Informationen...
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Akzeptieren Weitere Informationen...
    Information ausblenden