FHEM Forum

Verschiedenes => Off-Topic => Thema gestartet von: vbs am 06 April 2015, 12:43:13

Titel: HTML/CSS: Bild neben zwei Text-Elementen
Beitrag von: vbs am 06 April 2015, 12:43:13
Ich scheitere gerade an einem vermutlich sehr simplen CSS-Problem:
Ich möchte, dass ein Bild neben zwei Text-Elementen erscheint, aber mindestens ein Text-Element rutscht mir immer UNTER das Bild. Das hier ist die Ausgangssituation:
http://jsfiddle.net/40do8stj/1/

Und eigentlich möchte ich nur, dass es so aussieht:
https://dl.dropboxusercontent.com/u/24641738/css_img_prob.png

Ist vermutlich ganz easy, aber ich steh aufem Schlauch scheinbar :( Hat jemand einen Tipp? Danke!
Titel: Antw:HTML/CSS: Bild neben zwei Text-Elementen
Beitrag von: vbs am 06 April 2015, 12:54:13
Hm, ich hab jetzt immerhin das: http://jsfiddle.net/40do8stj/2/

Aber der Text bricht noch um, was er nicht sollte...
Titel: Antw:HTML/CSS: Bild neben zwei Text-Elementen
Beitrag von: fhainz am 06 April 2015, 18:00:16
Etwa so? https://jsfiddle.net/40do8stj/61/
Titel: Antw:HTML/CSS: Bild neben zwei Text-Elementen
Beitrag von: vbs am 06 April 2015, 18:19:30
Ja danke, schon ziemlich nah dran! Aber wenn jetzt der äußere div vergrößert wird, dann sollte das Icon am Text bleiben. Wenn ich zb den div auf 900px mache, dann sieht es so aus:
https://jsfiddle.net/40do8stj/90/
Titel: Antw:HTML/CSS: Bild neben zwei Text-Elementen
Beitrag von: fhainz am 06 April 2015, 18:31:09
So? https://jsfiddle.net/40do8stj/117/
Titel: Antw:HTML/CSS: Bild neben zwei Text-Elementen
Beitrag von: vbs am 06 April 2015, 18:42:49
Ist noch ein Stück besser, aber das Icon sollte immer in einem konstanten Abstand (wie im Screenshot) zum Text stehen. Und dann sollte eben der Block im Ganzen mittig stehen im umschließenden Block auch wenn dieser größer wird.

Aber Danke erstmal! Es ist wahrscheinlich eh besser, wenn ich es mir selbst erarbeite. Hab mir von deinem Code auf jeden Fall ein paar Denkanstöße holen können. Ich glaube einfach, ich verstehe, HTML/CSS noch nicht gut genug. Ich muss da noch etwas mehr lesen... ;)