zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Img & Text, umfließen und responsive

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 23.03.2015, 18:00
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.11.2006
Beiträge: 36
Uwe_B befindet sich auf einem aufstrebenden Ast
Frage Img & Text, umfließen und responsive

Hallo zusammen,
ich habe folgendes vor Design vor:

IMG <----- Text
Text, Text, Text

Wenn rechts vom IMG weniger als 200 Pixel übrig sind, soll es so aussehen:

IMG
Text, Text, Text

Wenn ich nun beides in einen Container packe und dem IMG float:left gebe, klappt die erste Variante, aber nicht die zweite, weil min-width: 200px; dann beim Text-Element nicht wirkt.

We ich dem Text overflow:auto gebe, funktioniert min-width: 200px; - aber der Text umfließt das IMG nicht mehr.

Eigentlich doch ein übliches Design, aber wie löse ich das? Ich probiere hier schon eine Weile mit den verschiedensten Befehlen rum und komme nicht drauf...
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 24.03.2015, 00:15
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 530
K.Roland wird schon bald berühmt werden
Standard

Hallo Uwe B

Kannst du das nicht, so lösen mit (Media Queries)

Beispiel: Edit fiddle - JSFiddle

____________
MfG Roland
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 24.03.2015, 08:20
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.005
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo,

Zitat:
Wenn ich nun beides in einen Container packe und dem IMG float:left gebe, klappt die erste Variante, aber nicht die zweite, weil min-width: 200px; dann beim Text-Element nicht wirkt.
Dafür gibt es mit HMTL / CSS keine Lösung. Es gibt nur mit HTML / CSS keine Möglichkeit auf eine Containerbreite zu reagieren. Eventuell funktioniert es mit JavaScript, damit kenne ich mich aber nicht aus.

Gruss

MrMurphy
Mit Zitat antworten
  #4 (permalink)  
Alt 24.03.2015, 08:52
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.671
cloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Mensch
Standard

Sicher? gibt es diese Möglichkeit. Mit calc() sollte das doch hinzubekommen sein?

Geändert von cloned (24.03.2015 um 10:45 Uhr) Grund: So sicher ist es ja nicht :)
Mit Zitat antworten
  #5 (permalink)  
Alt 24.03.2015, 10:26
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.005
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo,

ich verstehe das Problem so, das sich in einem div-Element mehrere andere div-Elemente befinden, in denen sich wiederum ein Bild und Text befindet. Sobald die inneren div-Elemente schmaler als 200px werden, soll der Text unter das Bild rutschen.

Auf die konkrete Breite der inneren div kann meines Wissens nach nicht mit HTML und CSS reagiert werden.

Responsive Design kann nur die Fensterbreite abfragen und darauf reagieren, nicht aber auf die Breite einzelner Container.

Wenn es dafür doch eine Lösung ohne JavaScript gibt würde ich die natürlich gerne erfahren.

Gruss

MrMurphy
Mit Zitat antworten
  #6 (permalink)  
Alt 24.03.2015, 11:15
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.671
cloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Mensch
Standard

Hmm ja, das dürfte wohl doch nicht so wie von mir vorgeschlagen funktionieren :/ Da habe ich zu voreilig gepostet. Ungetester Vorschlag von mir wäre so in etwa: Dem bild ein calc(100% - 200px) und min-width: 200px zu geben. Aber ob es den gewünschten Effekt hat ist auszuprobieren.
Unabhängig davon: Ich denke, dass seine Herangehensweise aber nicht ganz die korrekte ist. Man kann ja definieren: Bei zu kleiner Auflösung wird Text + Bild immer untereinander dargestellt, egal wie viele Pixel frei sind.
Mit Zitat antworten
  #7 (permalink)  
Alt 24.03.2015, 16:16
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.11.2006
Beiträge: 36
Uwe_B befindet sich auf einem aufstrebenden Ast
Standard

Mmh, ich hätte nicht gedacht, dass das so kompliziert ist.

Also aktuell sieht es so aus, dass img float:left hat, der Text overflow: auto und min-width: 200px; - so wird der Text rechts neben dem Bild dargestellt und bei weniger Platz/Bildschirmauflösung unterhalb des Bildes dargestellt.

Ich dachte es gäbe vielleicht irgendeine Möglichkeit, dass der Text das Bild umfließt und sich ansonsten ebenso verhält. Das Problem ist ja, dass der Text bei float:left; des img das Bild schön umfließt, aber nur einzelne Kurzworte rechts vom Bild angezeigt werden, wenn der Platz schmaler wird.

Falls es da keine Möglichkeit gibt, arbeite ich weiterhin mit overflow:auto

Danke!
Mit Zitat antworten
  #8 (permalink)  
Alt 24.03.2015, 16:56
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.671
cloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Mensch
Standard

200px ist ja so gut wie nichts. Ich bin der Meinung für dein Problem gibt es eine simple Lösung, wenn du dich einmal von den fixen 200px lösen kannst. Bei welcher Situation tritt denn dein Problem genau auf? Auf smartphones? (also kleinen displays im allgemeinen)? Oder nur, wenn die Bilder zu groß werden? oder ... ?
Mit Zitat antworten
  #9 (permalink)  
Alt 24.03.2015, 21:29
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 530
K.Roland wird schon bald berühmt werden
Standard

Zitat:
Zitat von Uwe_B Beitrag anzeigen
Falls es da keine Möglichkeit gibt, arbeite ich weiterhin mit overflow:auto
Also so hast du es, richtig? http://jsfiddle.net/cofnu19s/

Hast du das auch Mal mit Firefox getestet?
Da funktioniert das anscheinend nicht so mit overflow: auto.

_____________
MfG Roland

Nachtrag

Ja doch es funktioniert auch im Firefox.
Ich hatte das Fenster nicht klein genug in der Höhe ohne Scrollbalken.

Geändert von K.Roland (24.03.2015 um 22:56 Uhr) Grund: Nachtrag
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 25.03.2015, 22:52
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.11.2006
Beiträge: 36
Uwe_B befindet sich auf einem aufstrebenden Ast
Standard

Also genau genommen sieht es so aus:

HTML-Code:
<div style="border: 1px solid #cdc0b0; border-radius: 4px; padding: 10px; margin-bottom: 15px;">
<img style="float:left; margin: 0 10px 10px 0; width: 200px; height: 150px;" src="http://placehold.it/100x100/0eafff/ffffff.png" alt=""/>
	<div style="overflow: auto; width: auto; min-width: 200px;">
	<p style="margin: 0 0 5px;">Lorem ipsum dolor sitamet consectetur adipisicing elit. Lorem ipsum dolor sitamet consectetur adipisicing elit. Lorem ipsum dolor sitamet consectetur adipisicing elit. Lorem ipsum dolor sitamet consectetur adipisicing elit. Lorem ipsum dolor sitamet consectetur adipisicing elit. Lorem ipsum dolor sitamet consectetur adipisicing elit.</p>
	</div>
<div style="clear: both;"></div>
</div>
PS: Ich weiß leider nicht wie man das Tool von deinem Link benutzt..
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
float, img, responsive, text

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Wrapper wächst nicht mit, keine Floats maclady CSS 11 10.02.2010 18:30
Wachsende Container Andy CD CSS 13 10.02.2010 14:08
DIV bis GANZ unten burnZ CSS 5 27.07.2008 14:14
Helft mir. Ich habe voll die Leseschwäche nick CSS 12 15.01.2008 21:52
Problem mit div und Höhe deep4 CSS 2 13.11.2007 21:03


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:06 Uhr.