Anzeige:
Ergebnis 1 bis 8 von 8

Thema: CSS: Text *unter* Bild umbrechen

  1. #1
    Registrierter Benutzer
    Registriert seit
    26.07.2007
    Ort
    Dresden
    Beiträge
    18

    [Erledigt] CSS: Text *unter* Bild umbrechen

    Moinsens,

    ich habe von einem Kunden ein etwas schwierigeres Problem auf den Tisch bekommen.

    Ausgangssituation: der Kunde wünscht eine Seite mit jeder Menge Text und einem großen Bild an der rechten Seite - so weit, so gut ...
    Das Bild soll ca. 45% vom div groß sein und der Text soll links neben dem rechtsbündigem Bild fließen - auch alles noch in Ordnung

    Nun soll aber, wenn das div nicht breit genug ist (kleiner Bildschirm, Browser nicht auf Vollbild), der Text nicht elendig schmal neben dem Bild erscheinen sondern ab einer bestimmten Breite nach unten rutschen.
    Oder andersrum gesagt, ist der Bildschirm zu klein haben wir oben das Bild und unten den Text. Wird der Bildschirm größer soll das Bild nach rechts rutschen und der Text nach oben neben das Bild.


    Ich habe an der Stelle schon eine Weile gebastelt - viel ausprobiert mit div in div und CSS-Positionierung - aber so richtig will es mir nicht gelingen, diesen Wunsch umzusetzen.

    Ich hatte auch schon dran gedacht, zwei divs zu erstellen, die inline dargestellt werden (1. Bild, 2. Text) - wenn man die mit einer bestimmten Mindestbreite versieht, sollte der Browser ja irgendwann mal das div mit dem Text in die nächste Zeile umbrechen - aber auch das will mir nicht so recht gelingen.


    Hat von Euch vielleicht jemand einen Tipp, wie man das umsetzen kann?
    Geändert von nyphis (06-01-2012 um 21:28 Uhr)

  2. #2
    Registrierter Benutzer Avatar von undefined
    Registriert seit
    01.03.2004
    Beiträge
    1.255
    Und genau deshalb - weil du div verwendest wird es dir nicht gelingen.
    Lese die Referenzen zu div auf W3C - Speziell das Thema Element Attribute Vererbung

    Wenn man um ein Bild Text Fliesen lassen möchtest, reicht es voll und ganz aus das Prädikat align im img Element zu setzen. Den Rest macht der Browser
    mfg undefined
    --
    Undefined Behavior (undefiniertes Verhalten) bedeutet meistens etwas ungültiges.
    xhtml Debugger

  3. #3
    Registrierter Benutzer Avatar von jeebee
    Registriert seit
    01.01.2005
    Ort
    Bern || Zürich
    Beiträge
    540
    Alternativ (falls CSS3 ok ist / du jQuery brauchen kannst) könntest du auch media selectors ausprobieren (http://webdesignerwall.com/tutorials/css3-media-queries).

    Beispiel: http://people.vis.ethz.ch/~simon/img-float.html

    edit: das Beispiel demonstriert media selectors und funktioniert in allen aktuellen Browsern (ausser IE<=8.0) ohne jQuery.
    edit2: du kannst auch das img div weglassen und direkt das betreffende img-tag mit float:right/float:none stylen.
    Geändert von jeebee (03-01-2012 um 17:28 Uhr)
    my very own 128 bit integer
    C4 D3 B8 A8 9E A0 C6 EC 7D EC A8 15 28 D1 92 58
    more information

  4. #4
    Registrierter Benutzer Avatar von undefined
    Registriert seit
    01.03.2004
    Beiträge
    1.255
    ich bin Sprachlos - Ihr kennt noch nicht mal die ältesten Positionierungs Tricks für html img und bastelt Umständlich einen mit div.
    Code:
    <p>
      <img .... align="right" />
      viel text
    </p>
    http://xhtmldbg.hjcms.de/plugintests...efloating.html
    mfg undefined
    --
    Undefined Behavior (undefiniertes Verhalten) bedeutet meistens etwas ungültiges.
    xhtml Debugger

  5. #5
    Registrierter Benutzer Avatar von jeebee
    Registriert seit
    01.01.2005
    Ort
    Bern || Zürich
    Beiträge
    540
    und wie passt du
    Code:
    align="right"
    mit media queries für kleine Bildschirme an?

    btw:
    align für img-tags ist deprecated für HTML 4.01 und nicht supportet in HTML 4.01 Strict / XHTML 1.0 Strict / HTML5 --> ist der älteste Trick, den man nicht mehr brauchen soll.
    Äquivalent und modern ist
    Code:
    <img style="float:right" src="..." />
    Geändert von jeebee (04-01-2012 um 09:16 Uhr)
    my very own 128 bit integer
    C4 D3 B8 A8 9E A0 C6 EC 7D EC A8 15 28 D1 92 58
    more information

  6. #6
    Registrierter Benutzer Avatar von undefined
    Registriert seit
    01.03.2004
    Beiträge
    1.255
    Willst du jetzt mit mir einen Glaubenskampf über Deprecated/Obsolete etc. führen?
    Beim Webdesign geht es darum mit wenig Zeilen Zielgerecht auf allen Browsern eine gleiche Darstellung zu erreichen. Den Kunden Interessiert nur das Ergebnis und Preis, das wie ist dem Wurst.
    Mal davon abgesehen. Mach mal ein Paar Performance Tests mit Verschachtelten divs versus Konventioneller Tabellen Struktur. Auf einer Single CPU mit Firefox macht das ca. 20 - 40% aus.
    mfg undefined
    --
    Undefined Behavior (undefiniertes Verhalten) bedeutet meistens etwas ungültiges.
    xhtml Debugger

  7. #7
    Registrierter Benutzer Avatar von jeebee
    Registriert seit
    01.01.2005
    Ort
    Bern || Zürich
    Beiträge
    540
    Es hat ja niemand von verschachtelten divs gesprochen, float:right kann auch direkt auf das img-tag angewendet werden.

    Bezüglich der Geschwindigkeit: wenn ich -- weil ich align="right" brauche -- javascript einsetzen muss, um das Verhalten zu erreichen welches der TE haben will (== auf kleinen Bildschirmen soll das Bild eben gerade nicht vom Text umflossen werden), dann ist das wohl weder einfacher noch schneller als die moderne Variante mit der CSS float property und media selectors.
    my very own 128 bit integer
    C4 D3 B8 A8 9E A0 C6 EC 7D EC A8 15 28 D1 92 58
    more information

  8. #8
    Registrierter Benutzer
    Registriert seit
    26.07.2007
    Ort
    Dresden
    Beiträge
    18
    Zitat Zitat von jeebee Beitrag anzeigen
    Alternativ (falls CSS3 ok ist / du jQuery brauchen kannst) könntest du auch media selectors ausprobieren (http://webdesignerwall.com/tutorials/css3-media-queries).

    Beispiel: http://people.vis.ethz.ch/~simon/img-float.html
    Das ist genau das, was ich gesucht habe ... Vielen Dank!

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •