Text oberhalb und links von BIld?

[Hygrom]

Hallo, ich habe folgendes Problem, welches nicht leicht zu lösen zu sein scheint.

Ich möchte ein Bild in einem Text floaten. Das Bild muss aber unten rechts im Text sein. Der Text fließt also oberhalb des Bildes normal, wenn er die zeile mit dem Bild erreicht, soll er links daneben weiterlaufen.

Im Grunde wie ein klassisches, links gefloatetes Bild, nur dass es unten rechts sein muss.

Da die Texte interaktive Kundeneingaben sind, sind sie mir nicht bekannt und die Textlänge, sowie Zeichengröße kann variiieren.

Gibt es irgendeine Möglichkeit, dieses Problem zu lösen?

Danke im Voraus für Eure Hilfe.

[flashpixx]

Da Du hier absolut keinen Hinweis gibst mit was Du arbeitest, wobei das schon sehr hilfreich wäre, verweise ich auf die entsprechenden CSS Eigenschaften SELFHTML: Stylesheets / CSS-Eigenschaften / Positionierung und Anzeige von Elementen

[Philipp_John]

.Klasse{


float:left;

vertical-align:bottom;


}

Dies musst du dann nur noch in einen Container, das kann ein DIV oder eine Tabelle sein, die von der höhe größer ist als das BIld, packen.

Dann sollte es funktionieren.

[Hygrom]

@flashpixx:

Thema: Webdesign.

Beschreibung: Text um ein Bild Floaten.

Entschuldige bitte, ich dachte, es sei hiermit eindeutig, dass es um HTML und CSS geht. Wenn es auch in Flash oder weiteren Webdesign-Bereichen die Möglichkeit gibt, Text um ein Bild zu floaten, dann bitte ich um Entschuldigung.

Philipp_John hat es erstaunlicherweise sofort verstanden.

SelfHTML hab ich rauf und Runter gelesen, Ich habe die Bücher "Little-Boxes", "Stylin' with CSS" und "Bulletproof Webdesign" zu Rate gezogen (Wer sich mit CSS auskennt, dem sollten diese Bücher etwas sagen). Ich habe Stundenlang gegoogelt und Foren angesehen. Nirgendwo, wirklich Nirgendwo wurde mein spezifisches Problem angesprochen. Scheinbar hat noch niemand versucht, ein Bild nach unten rechts zu verschieben. Oben links ist mit CSS ja einfach.

@Philipp_John.

Erstmal danke für die konstruktive Hilfestellung.

Ich verstehe aber nicht wirklich, auf was sich diese Klasse bezieht.

Um weitere Unklarheiten zu beseitigen, poste ich also eben mal code:

<div>


dolor in hendrerit in vulputate velit esse molestie consequat,

 vel illum dolore eu feugiat nulla facilisis at vero et accumsan

 et iusto odio dignissim qui blandit praesent luptatum zzril 

delenit augue duis dolore te feugait nulla facilisi.

 Nam liber tempor cum soluta nobis eleifend option 

congue nihil imperdiet doming id quod mazim placerat

 facer possim assum


<div style="float:right; background: url(fisch.jpg);width:119px; height:124px; margin:5px;">


</div>

</div>

Ich habe also einen Text und ein Bild. Das Bild habe ich hier als Hintergrund in einer DIV-Box. Kann von mir aus aber auch gerne ein IMG-Tag sein oder was auch immer. Es geht ja ums Prinzip. Das Bild soll also unten rechts in der umgebenden DIV-Box liegen, der Text soll darüber und links sein. skizziert soll es etwa so aussehen:

---------------- <--- Text

----------------

----------- ++++

----------- ++++  <---  Bild

----------- ++++  

Was soll ich also mit der Klasse ( float:left; vertical-align:bottom; ) anfangen? Da das Bild unten rechts sein soll, kann sich das float:left ja nicht aufs Bild beziehen. Wenn ich die Klasse in die Umgebende Div-Box einsetze, dann erscheint das Bild unter dem gesamten Text :

---------------- <--- Text

----------------

----------------

----------------

           ++++

           ++++ <--- Bild

           ++++

So soll es aber nicht aussehen.

Wenn ich den Text in eine Div-Box packe, und die Klasse darauf beziehe, dann sieht es genauso aus.

Wenn ich dem Bild die Styles float:right; und vertical-align:bottom; zuweise, floatet es zwar nach rechts, bleibt aber oben. Das vertical-align scheint hier also nicht zu funktionieren.

Ich verstehe also nicht was ich links floaten soll, bzw. auf was Du die Klasse beziehts, Philipp_John.

[flashpixx]

Schau Dir auf meiner Webseite Flashpixx.de die Anordnung der Bilder an. Ich hab das Bild einmal rechts und einmal links an die Ränder des Divs gesetzt. Analog befindet sich links auf der Webseitenecke ein RSS Icons, das ebenfalls so gesetzt ist. Kombiniere beides und Du hast Deine Lösung

[Hygrom]

@ flashpixx

Es tut mir leid, aber eine Lösung sehe ich noch lange nicht.

Ich habe mich wohl ungenau ausgedrückt, als ich schrieb:

Da die Texte interaktive Kundeneingaben sind, sind sie mir nicht bekannt und die Textlänge, sowie Zeichengröße kann variiieren.

Das Problem ist also, dass mir der Text nicht bekannt ist, der vom Kunden eingegeben wird. Ich weis also nicht, an welche Stelle ich das Bild setzen muss, damit es innerhalb des Textflusses ist.

Im Beispiel auf Deiner Seite ist Dir aber bekannt, wo das Bild hin soll. Du beendest den Text, setzt das Bild ein, und fährst mit dem Text fort:

[...] Wissen weiter geben um somit auch anderen diesen

Sport näher bringen. </p>


<div class="imgright"><img src="http://forum.fachinformatiker.de/../images/pages/taekwondo/tkd2.jpg" alt="Tae Kwon Do Freikampf" /></div>


<p>Ich habe in der Sportschule Chung[...]

Wenn Dein Bild aber immer unten rechts auf der Seite erscheinen soll, funtioniert diese Lösung nicht. Wenn der Kunde den Text eingegeben hätte, wüsste ich doch nicht, dass ich das Bild genau zwischen "näherbringen" und "Ich habe.." setzen muss. Edit: Auf Deiner Seite schließt das rechts-gefloatete Bild mit der ersten Zeile des Text-Abschnitts ab (Ich habe in der Sportschule Chung...), in meinem Problem sollte es aber mit der untersten Zeile des Text-Abschnitts abschließen(das Gerlernte sich noch einmal vor Augen zu führen.). Der Text, der sich oberhalb der Bildgrenze befindet, sollte dabei bis über das Bild ragen. Also: Der Kunde gibt in einem Formular einen beliebigen Text ein, und dann wird eine HTML-Seite generiert, in der dieser, mir unbekannte, Text steht. Und ein Bild, das immer unten rechts am Bildrand sein soll. Der Text soll dabei oberhalb und links vom Bild erscheinen. Hier nochmal die Skizze:

---------------- <--- Text

----------------

----------- ++++

----------- ++++  <---  Bild

----------- ++++

ein einfaches float:right, wie auf deiner Seite, funktioniert einfach nicht! Das habe ich aber auch schon geschrieben. ich habe sogar ein Codebeispiel gepostet, in dem genau deine vorgeschlagene Lösung angewendet wurde:

<div>


dolor in hendrerit in vulputate velit esse molestie consequat,

 vel illum dolore eu feugiat nulla facilisis at vero et accumsan

 et iusto odio dignissim qui blandit praesent luptatum zzril 

delenit augue duis dolore te feugait nulla facilisi.

 Nam liber tempor cum soluta nobis eleifend option 

congue nihil imperdiet doming id quod mazim placerat

 facer possim assum


<div style="float:right; background: url(fisch.jpg);width:119px; height:124px; margin:5px;">


</div>

</div>

Oder habe ich Dich jetzt total falsch verstanden? Ich sehe in deiner Setie jedenfalls nur ein Bild, das rechts gefloatet wurde, und exakt an der richtigen Stelle in einem Dir bekannten Text positioniert wurde. Das hilft mir aber nunmal leider gar nicht weiter und das habe ich auch schon geschrieben. Also Problem ist folgende Ausgabe mit HTML und CSS:

---------------- <--- Text

----------------

----------- ++++

----------- ++++  <---  Bild

----------- ++++

Wobei der Text mir unbekannt ist, weil er von einem Kunden dynamisch eingegeben wird. Die Stelle, an der ich ein Bild-Tag einfügen müsste, damit ein einfaches float:right funktioniert, kenne ich also NICHT.

Kann mir dabei irgendjemand weiterhelfen?

Bearbeitet 16. Oktober 2009 von Hygrom

[flashpixx]

Das Problem ist also, dass mir der Text nicht bekannt ist, der vom Kunden eingegeben wird. Ich weis also nicht, an welche Stelle ich das Bild setzen muss, damit es innerhalb des Textflusses ist.

Das Layout bei wird ebenfalls dynamisch erzeugt.

Wenn Dein Bild aber immer unten rechts auf der Seite erscheinen soll, funtioniert diese Lösung nicht.

Dann erkläre mit mal bitte wieso mein RSS Icon immer exakt unten am Rand innerhalb eines Divs positioniert ist. Wenn ich das mit dem float-right des Bildes kombiniere, wäre das Bild immer unten rechts in der Ecke relativ zum Div.

ein einfaches float:right, wie auf deiner Seite, funktioniert einfach nicht! Das habe ich aber auch schon geschrieben.

ich habe sogar ein Codebeispiel gepostet, in dem genau deine vorgeschlagene Lösung angewendet wurde:

Vielleicht hörst Du auf Dich ständig zu wiederholen. Wir haben sehr gut verstanden, was Du möchtest, nur es wird Dir hier niemand fertigen Code geben, den Du Copy&Pasten kannst. Du willst das Bild relativ zur rechten unteren Ecke des Divs positionieren und den Text um das Bild fließen lassen, das kann man via float und entsprechenden anderen Positionsklassen erreichen

[Hygrom]

Ich wiederhole mich ständig, weil du mich eben NICHT verstehst.

Ich will auch keine fertigen codes zum kopieren, sondern eine Lösung.

So langsam regst Du mich wirklich auf.

deine Lösung funktioniert NICHT!!

Das Layout bei wird ebenfalls dynamisch erzeugt.

Ich zitiere mein Edit, hast Du vermutlich nicht mehr mitbekommen:

Auf Deiner Seite schließt das rechts-gefloatete Bild mit der ersten Zeile des Text-Abschnitts ab (Ich habe in der Sportschule Chung...), in meinem Problem sollte es aber mit der untersten Zeile des Text-Abschnitts abschließen(das Gerlernte sich noch einmal vor Augen zu führen.).

Der Text, der sich oberhalb der Bildgrenze befindet, sollte dabei bis über das Bild ragen.

Wenn mein Bild oben rechts am Text anschließen soll, gibt es auch keine Probleme mit dynamischem Text. Hab ich aber auch schon geschrieben.

Setze Dein Bild mal, wie ich beschrieb, an das Ende Deines Textabschnittes. Du wirst das NICHT schaffen. Jedenfalls nicht mit Deinem Lösungsvorschlag. Das Bild wird rechts UNTER Deinem Text abschnitt erscheinen aber NICHT eingebunden, so dass es mit der Unterkante an den letzten Satz anschließt.

Dann erkläre mit mal bitte wieso mein RSS Icon immer exakt unten am Rand innerhalb eines Divs positioniert ist. Wenn ich das mit dem float-right des Bildes kombiniere, wäre das Bild immer unten rechts in der Ecke relativ zum Div.

Dein RSS-Icon ist immer unten links, weil die DIV-Box, in der es sich befindet, als letztes in deiner Seite eingefügt ist und kein position-Style besitzt. Und es befindet sich immer links, weil es einfach links gefloatet wurde.

Und ohne Text schaut das immer toll aus.

Es geht mir auch nicht darum, ein Bild nach links oder rechts oder sonstwohin zu floaten. Wenn ich einfach nur ein Bild in die rechte untere Ecke meiner HTML-Seite haben möchte, würde ich es einfach per position positionieren. Punkt. Fertig. Das ist nicht das Problem!

Es geht darum, den Text links und oben um das Bild zu floaten. Und das ist NICHT einfach so per float:right möglich!

Wenn ich Deine Lösung benutze, dann floatet der Text immer noch nicht um das Bild herum. Das würde mit Deiner Lösung nur gehen, wenn ich das Bild an eine bestimmte Stelle innerhalb des Textes setzen würde. Und diese Stelle kenne ich nicht.

Du sagtest, ich solle mir Deine Seite mal anschauen. Das relevante Stylesheet der RSS-Grafik, die Du als Referenz angibst ist folgendes:

#rss {

	overflow: hidden;     <----  schneidet Inhalt ab, dersich über die Div erstreckt

	padding: 5px;   <--- 5px Abstand vom Div-Inhalt zum Div-Rand

	text-align: left; <-- Inhalt wird links ausgerichtet

	width: 20%; <-- Div-Box ist 20% der gesamtbreite der Seite breit

	float: left; <-- Die Div-Box liegt am linken Rand der Seite

}

#rss img {

	border: 0px; <-- das Bild hat keinen Rahmen

}

Was aus diesem Stylesheet soll mir helfen? Inhalt abschneiden bringt nix Abstand zum Rand bringt nix Text links ausrichten? Wer weis.. probieren wir mal Breite der Div-Box? bringt nix die umgebende Box floaten? bringt nix.. ich will nicht die elternelemente floaten,sondern den Text um das Bild, welche sich beide innerhalb des Elternelements befinden. Wo das elternelement rumhängt ist völlig egal. Rahmen ums Bild? ist auch kein Teil des Problems. Also bleibt als einziges Style-Element, was mit dem Inhalt der Box zu tun hat und irgendwie mit dem Verhältnis Text-Bild, die Ausrichtung. Das sollte ich mit dem Style kombinieren, den Du für dein rechts-gefloatetes Bild benutzt hast:

#content .imgright {

	float: right;           <--- bild wird an den rechten Rand gefloatet

	margin-left: 5px;   

	margin-top: 5px;

	margin-bottom: 5px;   <--- Abstand Bild-Rand überall 5px ausser rechts

	width: 300px;    <--- Bildbreite 300px

	height: 190px;   <--- Bildhöhe 190px

}

Bild rechts floaten? ok, macht ja erstmal Sinn Abstand zum Rand? Unwichtig für mein Problem Bildmaße? unwichtig für mein Problem Bleibt: float:right. Also, alles was ich aus dem Kombinieren Deiner Styles benutzen kann ist: inhalt der Div-Box horizontal ausrichten und das Bild rechts floaten. OK, hab ich gemacht: Style:

#rss {

	text-align: left;

}

#rss img {

	float:right;

}

Ergebnis: http://hygrom.de/test/test1.html Das Bild befindet sich jetzt unterhalb des Textes. Bringt also nix. Falls Du der Meinung bist, dass es wichtig gewesen wäre, die umgebende Box zu floaten, also das Elternelement (Was nun wirklich nix bringt), baue ich es halt auch nochmal ein: Style:

#rss {

	text-align: left;

        float: left;

}

#rss img {

	float:right;

}

Ergebnis:

http://hygrom.de/test/test2.html

mit float_right:

http://hygrom.de/test/test3.html

beides bringt kein Ergebnis.

Falls Du der Meinung bist, die ganzen Rahmen, abstände usw. würden eine Auswirkung haben, hier nochmal das Ergebnis mit beiden originalen Styles Deiner Webseite (mit etwas breiterer Div-Box, weil das Bild mit 300px sonst zu groß wäre):

http://hygrom.de/test/test4.html

Auch hier: Kein Text links neben dem Bild.

Ich verlange, wie gesagt, keinen vorgefertigten Code, aber alles was Du an Tips gegeben hast, war mir im Grunde schon bekannt (hin und her floaten). Und führt in meinen Augen und anhand der Beispiele offensichtlich leider zu keiner Lösung.

Das Prinzip des Floatens ist, dass das gefloatete Element an der dem Float gegenüberliegenden Seite von unten nach oben steigt, bis es ein Element berührt, und dann in die angestrebte Richtung horizontal wandert, bis es an ein weiteres Element stößt.

Habe ich also einen Text in ein Element geschrieben und floate nun ein Bild rechts, dann steigt es von unten am linken Elternelementrand hoch, bis es unten an den Text stößt. Dann bewegt es sich horizontal unten am Text entlang nach rechts, bis es an den rechten Rand des Elternelements stößt. Wenn man also ausschließlich floatet, wird der Text immer! oberhalb des gefloateten Elements bleiben. Es geht gar nicht anders.

Die Lösung muss also weitaus komplizierter sein.

[Hygrom]

Und noch etwas, lieber flashpixx:

Dann erkläre mit mal bitte wieso mein RSS Icon immer exakt unten am Rand innerhalb eines Divs positioniert ist. Wenn ich das mit dem float-right des Bildes kombiniere, wäre das Bild immer unten rechts in der Ecke relativ zum Div.

Ist es NICHT!

Ich habe Deine Div-Box mal in der Höhe vergrößert und einen Rahmen gegeben:

#rss {

	overflow: hidden;

	padding: 5px;

	text-align: left;

	width: 30%;

	float: left;

	[B]height: 500px;

	border: 1px solid;[/B]


}

#rss img {

	border: 0px;

}

http://hygrom.de/test/test5.html Schwupps ist Dein RSS-Symbol ganz oben links. Du hast nämlich nirgendwo etwas von einer vertikalen Ausrichtung angegeben. Wie also, soll das Symbol sich innerhalb seiner Div-Box nach unten ausrichten? hier der ganze code. zum Kopieren und austesten, damit Du siehst, dass ich ausser den zwei Werten nichts geändert habe:

<html>

<head>

<title></title>

<style>

#rss {

	overflow: hidden;

	padding: 5px;

	text-align: left;

	width: 30%;

	float: left;

	height: 500px;

	border: 1px solid;


}


#rss img {

	border: 0px;

}


</style>

</head>

<body>


<div id="rss"><a href="http://rss.flashpixx.de"><img src="http://flashpixx.de/flashpixx/images/rss.png" alt="RSS"/></a></div>


</body>

</html>

[flashpixx]

Du solltest Dir mal Deinen Ton überdenken, denn Du möchtest Hilfe, nicht ich.

[Hygrom]

Das ist richtig. Ich habe ja auch schon geschrieben, dass mich dein Unverständnis auch langsam unglaublich aufregt.

Deine Seite mag dynamisch sein, weil sie mit PHP generiert wird. Dir hätte aber aufgrund meiner Aussage klar sein sollen, dass ich mich nicht auf PHP oder dynamisch erzeugte Seiten an sich bezog.

Ich sagte, der eingegebene TEXT sei dynamisch. Damit will ich sagen, dass der vom Kunden eingegeben wird und zur Laufzeit in die Seite eingebaut wird. Daher kann ich nicht wissen, an welcher Stelle ich das Bild einfügen müsste.

So wie ich das Problem sehe, scheint es vermutlich eh keine Lösung zu geben. Die einzige Lösung, die ich mir Vorstellen kann wäre, den Text aufzuteilen. In einen "oberen" Text, der komplett von links nach rechts geht. Und einen "linken" Text, der links des Bildes Positioniert wird. So Wie Du es auf Deiner Setie getan hast.

Erst ein <p>teeext</p> dann ein <img> und dann wieder ein <p>teeext</p>.

Zweiten Text links floaten, img rechts floaten. Fertig.

So hast Du es auf Deiner Seite getan. So und nicht anders. Das Problem ist eben nur, dass der Text sich dauernd ändert und ich daher nicht im Voraus programmieren kann, dass er an der richtigen Stelle "abgeschnitten" wird. Die Schriftgröße kann bei meinem Kunden ebenfalls verändert werden. Es wäre also ein extrem aufwändiger Weg, wenn man aufgrund der Schriftgröße die exakte Zeilenanzahl berechnen müsste, mit der man den Raum oberhalb des Bildes auffüllt, um den Text dann zu zertrennen.

Ich werde dem Kunden also zwei einzelne Eingabefelder vorgeben müssen "Text oben" und "Text links". Und wenn der obere Text zu lang wird und deswegen nicht komplett dargestellt wird, muss der Kunde ihn eben wieder und wieder eingeben, bis er nicht mehr zu lang ist. Ich glaube nicht, dass das Kundenorientiert ist.

Sorry also, wenn ich mich im Ton vergriffen habe, aber ich fühle mich einfach total missverstanden. Ich glaube nicht, dass Du bisher wirklich das Problem verstanden hattest, mit dem ich mich an das Forum gewandt habe.

Du machst selber beruflich Webdesign, wie es ausschaut. Was ist, wenn sich mal ein Kunde mit genau dieser Forderung an Dich wendet? Mir ist es dummerweise passiert. Und ich finde eben keine Lösung.

Vielleicht solltest Du rein aus ehrgeiz mal versuchen, das Problem zu lösen. Schaden kanns nicht. Aber ich denke, Du wirst keine Lösung finden. Ich glaube, die Problemstellung ist dazu einfach zu schwierig.

Also nochmal entschuldigung für die Tonart. Meinem Kunden werde ich wohl sagen müssen, dass das Problem technisch so nicht lösbar ist. Es wird nur über zei separate textbereiche zu lösen sein

[Hygrom]

Ich habe das Problem nochmal als Bild zusammengebastelt, um es zu verdeutlichen, weil ich der Meinung bin, dass es eben nicht wirklich verstanden wurde, worauf ich hinaus will:

Der Text darf dazu also nicht auseinandergerissen und in 2 separate <div>, <p>, <span> oder was auch immer gepackt werden, da nicht bekannt ist, an welcher Stelle man ihn aufteilen müsste.

Reines Float wird niemals funktionieren, wenn das bild nach(!) dem Text eingefügt wird. Da der Text zu diesem Zeitpunkt schon den oberen Dokumentbereich ausfüllt und ein float wird ihn nicht mehr "verdrängen".

Fügt man das Bild zuerst ein, befindet es sich nicht unten am Rand. Asbolute oder relative Positionierung würde das Bild vor(!) den Text legen, und der Text würde hinter dem Bild verschwinden.

Aus diesen Gründen denke ich fast, dass es technisch unlösbar ist.

Aber ich habe halt noch die Hoffnung, dass jemand vielleicht vor einem Ähnlichen Problem stand und eine Lösung hat.

[flashpixx]

Also nochmal entschuldigung für die Tonart. Meinem Kunden werde ich wohl sagen müssen, dass das Problem technisch so nicht lösbar ist. Es wird nur über zei separate textbereiche zu lösen sein

Also mit JS geht es bottom right floating image sofern Du es verwenden willst, evtl hilft dir auch der CSS 3.0 Standard weiter, da müsstest Du Dich aber vorher mal schlau machen, welcher Browser das aktuell unterstützen.

Wenn Deine Seite doch dynamisch ist, dann kannst Du auch doch das Div mit dem Bild per Code berechnen und korrekt platzieren!? Das muss dann nur in der PHP (o.ä.) Seite passend programmiert werden bzw das Tag des Templates muss man entsprechend umstrukturieren

Bearbeitet 16. Oktober 2009 von flashpixx

[Hygrom]

@flashpixx

Ah. JavaScript scheint also eine Möglichkeit zu sein. Das ist doch mal was.

Das hat mir jetzt nun wirklich geholfen. Ich sehe mir das Prinzip dann mal an und versuche, es auf mein Projekt zu übertragen.

Ich denke, dass sich das Problem mit JavaScript lösen lassen wird. Wie gesagt, CSS und HTML alleine hab ich ja schon abgehakt

Ok, danke für den Tip