mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 02:08 Benutzername: Passwort: Auto-Login

Thema: [CSS] Textausrichtung in Verbindung mit Bild vom 22.09.2010


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> [CSS] Textausrichtung in Verbindung mit Bild
Autor Nachricht
kevintoepfer
Threadersteller

Dabei seit: 03.02.2009
Ort: Hamburg
Alter: 31
Geschlecht: Männlich
Verfasst Mi 22.09.2010 19:47
Titel

[CSS] Textausrichtung in Verbindung mit Bild

Antworten mit Zitat Zum Seitenanfang

Moin moin,
vll. denke ich auch zu kompliziert, komme momentan aber nicht weiter.

Habe ein zweispaltiges Layout, links die Navigation und recht der Content.

Wenn das Fenster groß genug ist, soll der Text links neben dem Bild stehen (siehe folgendes Bild)



Wenn das Fenster zu klein ist, soll der Text unter dem Bild erscheinen (siehe folgendes Bild)





Lässt sich das mit einfachem float lösen, oder benötige ich besondere Skripte etc?

Liebe Grüße
Kevin


Zuletzt bearbeitet von kevintoepfer am Mi 22.09.2010 19:48, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Mi 22.09.2010 19:52
Titel

Antworten mit Zitat Zum Seitenanfang

float reicht, wobei es natürlich je nach Viewport-Breite passieren kann, dass nur ein einziges Wort pro Zeile neben dem Bild steht - oder plötzlich eine große vertikale Lücke entsteht, weil ein langes Wort, das zu Beginn des Textes kommt, unter das Bild rutscht.

Zuletzt bearbeitet von heiko_rs am Mi 22.09.2010 19:53, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Anzeige
Anzeige
kevintoepfer
Threadersteller

Dabei seit: 03.02.2009
Ort: Hamburg
Alter: 31
Geschlecht: Männlich
Verfasst Mi 22.09.2010 19:56
Titel

Antworten mit Zitat Zum Seitenanfang

Kann ich das Problem beheben indem ich den <p>..</p> eine feste Breite oder eine min-width gebe?
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Mi 22.09.2010 20:12
Titel

Antworten mit Zitat Zum Seitenanfang

Allzu heftiges Zusammenschieben einer flexiblen Website (und darum geht's Dir wahrscheinlich) verhindert man am besten mit min-width für body.

Zuletzt bearbeitet von heiko_rs am Mi 22.09.2010 20:12, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
kevintoepfer
Threadersteller

Dabei seit: 03.02.2009
Ort: Hamburg
Alter: 31
Geschlecht: Männlich
Verfasst Mi 22.09.2010 20:17
Titel

Antworten mit Zitat Zum Seitenanfang

Naja es soll ja möglich sein, die Seite auf die Breite der Bilder zusammenschieben zu können.

Dann würden die Texte unter den Bildern erscheinen. Erst wenn die Texte eine bestimmte Breite haben, solllen sie neben dem Bild stehen.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Mi 22.09.2010 20:33
Titel

Antworten mit Zitat Zum Seitenanfang

Das Problem ist, dass nicht die Blockelemente selbst neben einem Float stehen, sondern nur ihre Inhalte auf inline-Level. Das Blockelement dagegen geht unterhalb des Floats (d.h. auf der z-Achse) bis an den Rand seines Elternelementes weiter. Also wird auch nie (auch nicht mit min-width) ein p unter ein floatendes Bild rutschen (eben nur die inline-Inhalte).

Allerdings kannst Du dieses Verhalten ändern, durch einen neuen Block Formatting Context für die betreffenden Elemente, so dass sie sich komplett neben den Float stellen - im IE < 8 ganz einfach per hasLayout, und in allen übrigen Browsern z.B. per display: table; oder ebenfalls per float. Allerdings bewirkt beides eine shrink-to-fit-width, die nicht von allen Browsern gleich behandelt wird, das musst Du also ausgiebig checken (overflow: auto; wäre die Notlösung, aber keine tolle).

Aber in jedem Falle wirkt in allen Fällen auch min-width für p und das von Dir gewünschte Verhalten wird erreicht.


Zuletzt bearbeitet von heiko_rs am Mi 22.09.2010 20:35, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
 
Ähnliche Themen Myspace: Probleme mit Textausrichtung
FTP Verbindung mit 1&1
Flashsite in Verbindung mit AE
PNG Transparenz in verbindung mit jQuery (IE8)
PHP - MySQL verbindung unsicher
Verbindung von .NET-Anwendung zu Webserver
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.