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

Text ums Bild / Ich schaffe es nicht :-(

Dieses Thema im Forum "Design" wurde erstellt von slicer, 16. August 2006.

  1. slicer

    slicer Member

    Registriert seit:
    18. November 2005
    Beiträge:
    11
    Zustimmungen:
    0
    Hallo,

    ich würde gern ganz einfach mein Bild rechts oder links ausrichten, so dass der Text links mit einem entsprechenden Abstand daneben steht. Habe gelesen, dass man dazu die CSS-Klasse class="alignright" nutzen könnte. Wenn ich aber im Editor das img-Tag damit ergänze und Speichern möchte, wird dieser Teil des Codes immer wieder entfernt. Könnte mir jemand helfen?

    Blog: http://www.videokultur.org/
    Theme: WordPress DE Standard
    Aktivierte Plugins: Lightbox JS

    Slicer
     
  2. toscho

    toscho Well-Known Member

    Registriert seit:
    4. August 2006
    Beiträge:
    631
    Zustimmungen:
    0
    Welche Klasse du benutzt ist egal, solange du diese Klasse im Stylesheet mit einem »float« versiehst. Beispiel:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Im Editor muß das IMG-Element dann so aussehen:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Wenn dir da etwas weggekürzt wird, ist das vielleicht ein unwillkommener Nebeneffekt eines Plugins – also schalte die mal nach und nach ab, bis du den Übeltäter gefunden hast.

    Gruß
    Thomas
     
  3. slicer

    slicer Member

    Registriert seit:
    18. November 2005
    Beiträge:
    11
    Zustimmungen:
    0
    Vielen Dank! Es hat funktioniert! Sogar zusammen mit dem Lightbox JS Plugin.

    Der Code lautet jetzt:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Mir ist im Stylesheet aufgefallen, das die Einträge:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    mit einem Punkt beginnen.

    Die anderen Einträge:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    haben aber keinen Punkt davor. Hat das was zu bedeuten?

    Slicer
     
  4. spickzettel

    spickzettel Well-Known Member

    Registriert seit:
    19. Januar 2006
    Beiträge:
    1.848
    Zustimmungen:
    0
    .alignright gilt für alle Elemente, die class="alignright" dastehen haben, img.alignright nur für Bilder der Klasse "alignright".
     
  5. toscho

    toscho Well-Known Member

    Registriert seit:
    4. August 2006
    Beiträge:
    631
    Zustimmungen:
    0
    Schön, daß es funktioniert.

    Klassen werden in CSS immer mit einem Punkt vor den Klassennamen angesprochen. Aber man kann einen Klassenselektor mit einem Elementselektor verbinden, indem man beide zusammenschreibt und den Elementselektor davorsetzt.
    Übersetzt bedeutet das: ».alignright« betrifft alle Elemente mit der Klasse »alignright«, also auch <p class="alignright">.
    »img.alignright« betrifft aber nur Bilder mit dieser Klasse, keine anderen Elemente. Man sagt auch: Dieser Selektor ist »spezifischer«, bzw. er hat eine höhere Spezifizität.

    In diesem Fall schlage ich dir übrigens vor, für den Abstand nach unten (die 2px) etwas mehr Platz zu schaffen, damit folgender Text nicht allzusehr am Bild klebt. Gerade bei umfließendem Text fällt es dem Auge etwas schwerer, die richtige Zeile zu finden; da ist das Gestaltungselement Leerraum umso wichtiger.

    Gruß
    Thomas
     
  6. slicer

    slicer Member

    Registriert seit:
    18. November 2005
    Beiträge:
    11
    Zustimmungen:
    0
    Vielen Dank für die Erklärungen :) Jetzt habe ich es verstanden.
    Habe ich gemacht, allerdings scheinen sich die Änderungen auf 4px oder 10px bisher nicht auszuwirken.

    Im Stylesheet steht jetzt:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Mache ich da noch etwas falsch?

    Slicer
     
  7. Morris

    Morris Well-Known Member

    Registriert seit:
    27. Mai 2006
    Beiträge:
    1.560
    Zustimmungen:
    0
    Padding ist der Innenabstand, Margin der Außenabstand. Beim <img> ist nur margin interessant, da es kein "Innen" in dem Sinne gibt.

    Grüße
    Mo
     
  8. slicer

    slicer Member

    Registriert seit:
    18. November 2005
    Beiträge:
    11
    Zustimmungen:
    0
  9. jowra

    jowra Well-Known Member

    Registriert seit:
    25. Februar 2005
    Beiträge:
    684
    Zustimmungen:
    0
    Nur am Rande...

    Natürlich gibt es ein padding bei Bildern. Wenn Du z.B. um das Bild einen Rahmen legen und zwischen Rahmen und Bild Platz lassen willst.

    Siehe auch: CSS Box Modell. Content -> Padding -> Border -> Margin.
     
  10. Wu_kung

    Wu_kung Well-Known Member

    Registriert seit:
    17. Juni 2006
    Beiträge:
    225
    Zustimmungen:
    0
    Bildunterschrift

    Klingt gut! Wie würde man bei dem Hack Bildunterschriften einbinden, die unmittelbar mit dem Pic verbunden sind?

    Wo tragt Ihr die Styles ein? Ich habe es probeweise bei Blix und Sirius in der jeweiligen CSS-Datei eingetragen - KEINE Wirkung (s. meine Anfrage weiter unten).


    Als ob die CSS-Datei eine andere, als die vorhandene sei... :(

    Kann jemand einen Tipp geben?
     
  11. jowra

    jowra Well-Known Member

    Registriert seit:
    25. Februar 2005
    Beiträge:
    684
    Zustimmungen:
    0
    Als Datenliste.

    HTML-Part:

    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    CSS-Part:

    .bild-mit-text {
    float: left;
    margin: 0 10px 10px 0;
    }

    .bild-mit-text dt, dd {
    margin: 0;
    padding: 0;
    }

    Hat den Vorteil, daß für das Bild und den Text noch verschiedene Definitionen seperat erfolgen können, z.B.:

    .bild-mit-text img {
    border: 1px solid #F00;
    }

    .bild-mit-text dd {
    font-style: italic;
    }
     
  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.
    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.
    Information ausblenden