• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[CSS]Bild rechts unten in DIV. Text fließt herum

K

kiltec

New member
Hi!

Ich verzweifle gerade an folgendem Problem:

Ziel soll es sein ein Text-Kasten zu haben, in dessen rechter _unterer_ Ecke ein kleines Bild sein soll, um das herum der Text links herum fließen soll.
(Ich hoffe, ich habe mich verständlich ausgedrückt)
Das Bild rechts _oben_ zu haben, ist ja überhaupt kein Problem, aber ich weiß einfach nicht, wie ich es nach untern bekommen soll.
Hier mal mein aktueller Stand:
Code: 
<div class="text-def" style="float: right; height: 156px; width: 190px;">
<img src="image.gif" style="float: left;vertical-align: bottom;height:73px;width:73px;">
Lorem ipsum dolor amet, consectetuer adipiscing elit. Praesent
vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus
porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et
magnis dis parturi- ent montes </div>

Damit ist das Bild natürlich noch oben.
Ich habe auch schon versucht, den img-Tag nochmal in ein DIV zu packen und dieses DIV relativ zu positionieren, aber das klappt irgendwie auch nicht.
Ich habe heute den halben Tag dran gesessen, das hinzubekommen, ich weiß nicht, was ich alles ausprobiert habe, es ist seehr nervig.
Ich fürchte fast, dass die Lösung so einfach ist, dass es schon fast peinlich ist.
Aber ich komme halt nicht drauf... :whacky:
Bisher ist die Site, die ich zusammen bastel richtig schönes xhtml strict, aber ich fürchte fast, das muss ich mir irgendwie mit ner Tabelle machen...
Es ist so, dass ich ein Template bekommen habe, das jemand wohl mit einem Grafikprogramm erstellt hat und was sogar in jedem Browser gleich aussieht und ich bin dabei, das in "richtiges" HTML zu bringen.

Wäre toll, wenn mir jemand helfen könnte!

Vielen Dank schon mal!
 
Zuletzt bearbeitet:
hm, Lösung hab ich noch nicht gefunden und auch keine Zeit mehr, aber wenn man bei
Code: 
src="image.gif
auch noch das " zu macht, dürftes leichter werden ;)

BernddasBrot
 
BerndDasBrot schrieb:
hm, Lösung hab ich noch nicht gefunden und auch keine Zeit mehr, aber wenn man bei
Code: 
src="image.gif
auch noch das " zu macht, dürftes leichter werden ;)
Zum Vergrößern anklicken....

lol
Danke! ;-)
Ok, aber das kann es nicht sein, ich habe den obigen Code-Schnipsel aus dem Quelltext übernommen, aber vorher den Bildnamen geändert. Dabei ist dann wohl das zweite Anführungszeichen verloren gegangen.
War ja auch schon spät gestern...

Ich ändere da aber gleich mal im Anfangspost, falls das jemand bper C+P übernimmt...
 
Hi kiltec!

Hilft Handarbeit weiter? Oder muß es code sein?

1. Vorschlag: 2 - 3 Textfelder, 1 Bild, alle fest positionieren
Oben ein Textfeld mit 100% Breite, darunter links das zweite Textfeld mit
80% Breite, in die freie rechte Ecke das Bild (20% Breite, gleiche Höhe wie
Textfeld 2.) Evtl darunter noch ein drittes Textfeld mit 100% Breite.

2. Vorschlag: 1 Textfeld, 1 Bild, alle fest positionieren
Das Bild über das Textfeld an beliebiger Stelle setzen. Dann das Bild
halbtransparent einfärben. Danach unter das Bild „Blindtext“ ins Textfeld
schreiben. Dann diesen „Blindtext“ in Textfeldfarbe einfärben – die
Formatierung des übrigen Textes bleibt erhalten, der Blindtext ist nicht
mehr zu sehen. Dann Bild wieder voll sichtbar machen. Fertig!

lg joachim
 
@hjf:

Erst einmal vielen Dank für Deine Antwort!

Zu deinem 1. Vorschlag:
Das habe ich gleich mal ausprobiert und in der Tat haut es auch hin
- allerdings nur solange man sich das ganze nur im Firefox anschaut.
Im IE ist es im großen und ganzen gleich, bis auf eine entscheidende Kleinigkeit:
Das Bild ist um 1px oder so im Vergleich zum FF nach unten verschoben und ragt so um einen Pixel in den nächsten Div-container hinein.

Der Code des Ganzen sieht so aus:
Code: 
<div id="wrapper" style="float:left;height:190px;width:190px;">
    <div class="text-def" style="height:117px;width:190px;">
      Lorem ipsum dolor amet, consectetuer adipiscing elit. Praesent vestibulum molestie lacus. Aenean n
      Lorem ipsum dolor amet, consectetuer adipiscing elit. Praesent vestibulum molestie la 
    </div>
    <div class="text-def" style="float:left;height:73px;width:115px;">
        Lorem ipsum dolor amet, consectetuer adipiscing elit. Praesent vestibulum
	Praesent vestibulum 
    </div>
   <img src="image.gif" height="73" width="73" alt="Consulting" style="float:right;" />
</div>
Die Klasse text-def sieht folgendermaßen aus:
Code: 
.text-def p{
	font-family: Verdana, Arial, Helvetica;
	font-size: 10px;
	text-align:left;
	vertical-align:top;
	padding-bottom:3px;
}
Die Wrapper-Klasse ist leer.
Das nur der Vollständigkeit halber, auch wenn ich da das padding-bottom auskommentiere, ändert sich nichts.
oder ist da doch noch irgendwie der Wurm drin?

Zu deinem 2. Vorschlag:
Habe ich das richtig verstanden, dass du meinst, ich soll das Bild unten in die Ecke positionieren, innherlab des einen Text-Divs und genau an den Stellen, an denen der Text vom Bild überdeckt wird, Text einfügen in der Farbe des Hintergrundes?
Das ist wirklich sehr verwegen und das Problem ist ja auch, dass wenn man den Text ändert, man alles wieder mühsam zurechtfrickeln muss. Ganz abgesehen davon, dass das auch unteschiedlich aussehen wird in den verschiedenen Browsern.
der 1. Vorschlag war aber wirklich gut, wenn er auch nicht ganz klappt.
Das komische ist:
Wenn ich in den obigen Code statt des Bildes ein Div-containers mit den Maßen 73x73 setze, sieht es in beiden Browsern gleich aus, wenn mich nicht alles täuscht...

@dkdenz:
Das Bild relativ bzw. absolut zu positionieren war eines der ersten Dinge, die ich probiert habe .
Und damit bekommt man das Bild auch wunderbar in die untere rechte Ecke.
Nur fließt dabei der Text nicht um das Bild herum. Das ist ja das ganze Problem.
Außerdem paßt das Bild auch nur entweder beim IE 6 oder beim FF in die recht untere Ecke, aber bei beiden gleichzeitig haut es einfach nicht hin.
Mag sein, dass man das mit dem Code den ich angegeben habe hinbekommt, aber die Seite besteht nicht nur aus dieser Text-Box. Trotzdem Danke für Deine Antwort! :)
 
Das ist ja grad zum Mäusemelken, ich habs auch noch nicht auf dem code-Wege hinbekommen. Das ist ja richtig was zum festbeißen ;) menno
 
Ich würde vorschlagen das <img> in ein <div> im <div> zu packen und dieses dann right: 0px und bottom: 0px ausrichten bzw. die absoluten werde von oben ;)
 
Das image im Flächendiv unten rechts auszurichten ist kein Problem, scheitern tut das Ganze dadurch, das es nicht geht, dieses img vom Text in gewünschter Weise umfliessen zu lassen

Denn der Umfluss fängt immer an der Oberkante des Bildes an und nicht umgekehrt. D.h. in diesem Fall wird das Bild wenn der Text höher ist als das Bild höher rutschen und nicht an der Unterkante des Flächendivs bleiben. Der Text umfließt das Bild von der Oberkante nach unten soweit unter das Bild, wie lang er halt ist.
 
RoyalKnight schrieb:
Ich würde vorschlagen das <img> in ein <div> im <div> zu packen und dieses dann right: 0px und bottom: 0px ausrichten bzw. die absoluten werde von oben ;)
Zum Vergrößern anklicken....

Ja das habe ich auch schon ausprobiert hier der Code dazu
Code: 
div class="text-def" style="background-color:#fff;height: 200px; width: 190px;">
	rem ipsum dolor amet, consectetuer adipiscing elit. Praesent
	vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus
	porta. Fusce suscipit varius mi. suscipit varius mi.Aenean nonummy hendrerit mauris.
	<div style="position:relative;top:30px;left:118px;width:73px;height:73px;">
	<img src="image.gif" />
	</div>
</div>

Mit relative und bottom:0px funktioniert es leider nicht, da bottom:0px nicht bewirkt, dass das Bild an den unteren Rand vom text-dev div rutscht, sondern es bleibt wo es ist. Gleiches gilt für right:0px;.
In diesem Beispiel ist das Bild rechts unten, das Problem ist, wenn ich vom Text jetzt noch was dazu schreibe, also eine Zeile neu dazu kommt, rutscht das Bild weiter nach unten und ist daher nicht mehr in der Ecke.

Ich habe dann auch einfach mal den Text in ein Div gepackt und links floaten lassen, aber das ändert nix.
Dann habe ich den Text mit dem es umfassenden Div hinter das Bild gepackt(also immer noch m float:left), damit umfließen die ersten 2 Zeilen links das bild, der rest des textes wird dann unterhalb des Bildes fortgesetzt - es ist also wieder nicht in der Ecke.

Alle Angaben beziehen sich auf die Darstellung mit Firefox.
@bine:
es ist wirklich zum verrückt werden, oder? Wenn man das Problem hört, denkt man eigentlich, das kann doch nicht so schwer sein, aber dann fängt der Wahnsinn an :mooh:
 
lies dir mal ganz in Ruhe diese Seite durch und dann vergiß es.

http://www.autisticcuckoo.net/archive.php?id=2004/12/10/floating

The second important piece of information in the basic rule above is that a floating element is only shifted sideways. We have seen optimistic attempts to specify float:top in order to move something to the top of the page.
Zum Vergrößern anklicken....

Und wenns ne einmalige Sache mit nem festen Text ist, der sich nicht verändet, mach Text und Bild als Grafik oder besser doch gar nicht.
 
bine schrieb:
lies dir mal ganz in Ruhe diese Seite durch und dann vergiß es.

http://www.autisticcuckoo.net/archive.php?id=2004/12/10/floating



Und wenns ne einmalige Sache mit nem festen Text ist, der sich nicht verändet, mach Text und Bild als Grafik oder besser doch gar nicht.
Zum Vergrößern anklicken....


Danke für den Link!

Wirklich sehr sehr guter Artikel!

Auc die verlinkten Artikel scheinen sehr gut zu sein.
Ich werde es in der Tat jetzt einfach lassen, denn der Text kann unterschiedlich lang sein, denn es werden mind. 2 Sprachen von der Site unterstützt. Und die Texte werden per PHP eingebunden und das Problem ist, dass der Text der das Bild umfließen soll, in einer Variablen steht, so dass man den Text darin, irgendwie aufteilen müßte (was ja noch ginge), aber sobald ein Text in einer anderen Sprach länger odewr Kürzer ist, wird es wohl nicht mehr hinhauen.

Für jemand anders, der etwas ähnliches wie ich machen will, aber mit einem Text, der sich nicht verändern wird(oder zumindest so gut wie nie):

Das beste scheint der 1. Vorschlag von hjf (4. Beitrag von oben) zu sein.

Ich werde es jetzt umdesignen, so dass nix mehr rechts unten ist... ;)

Vielen Dank euch allen für Eure schnellen Antworten, wirklich super! :cool:

Viele Grüße

Kiltec
 
Jo, bleibt dir nix anderes übrig - ich habs selbst ausprobiert, bin aber auf keinen grünen und zufriedenstellenden Ast gekommen. Mit margin-top würde man das Bild raufbekommen, aber es wird nicht vom Text umflossen, von daher auch keine Lösung.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben