Bild im Textfluss rechtsbündig anzeigen lassen?

Tomo-chan

Grünschnabel
Hi zusammen!

Aus Not heraus beschäftige ich mich seit gestern mit CSS und versuche die neue Website meiner Tante so umzuschreiben, dass sie für sie einfacher zum bedienen ist. Ich will also daher vorher nur anmerken, dass meine CSS kenntnisse nahezu non-existent sind bis auf das, was ich seit gestern gelernt habe. Man verzeihe mir also etwaige Fehler in diesem Bereich. Meine letzte html Seite ist auch schon n halbes Jahrzehnt her *seufz*

Mein Problem ist folgendes:

Ich versuche ein kleine Portraitbild auf der Indexseite in meinem im css definitierten textcontent div zu packen und zwar so, dass der text es oben, links seitlich und unten umfließt (das Bild liegt sogar in einem übergeordneten Layer). Dies hab ich mit der float funktion soweit hinbekommen. Es ist also schön rechts positioniert und der Text umfließt es soweit auch. Mein problem ist aber, dass die zeilen, die überhalb des Bildes erscheinen nun abließend mit dem linken Bildrand aufhören und somit etwas eingerückt sind.

Ich habe versucht mit mehr abstandzeilen zu arbeiten, um zu sehen ob das Bild einfach zu groß dafür ist, das hat aber soweit nichts gebracht.
Gibt es eine möglichkeit die oberen zwei Zeilen meines Textes oben am Bild vorbeifließen zu lassen ohne, dass sich das Bild oder der Text dabei verschiebt?


#textcontent {
width:940px;
height:100%;
z-index:3;
margin-left: 2%;
margin-right: 2%;
margin-top: 120px;
margin-bottom: 40px;
overflow: hidden;
text-align:left;
font-size: 16px;
font-family: Georgia;
color: #ffff33;
font-weight: bold;
float:left;
}
#ich {
z-index:8;
float: right;
margin-top:65px;
margin-right:305px;
text-align: center;
overflow: hidden;
}

Code:
<div id="textcontent">
<div id="ich"><img src="_img/foto.jpg" /><br clear="all" /></div>
Mein            Name ist Andrea P., 1963 geboren und            ich            m&ouml;chte hier aus meinem Leben berichten. Warum ich gerade diesen            Titel  f&uuml;r meine Seite gew&auml;hlt habe, ist sehr leicht erkl&auml;rt:<br /><br />
<br />
	<blockquote><i>
		Ich                                    kam gesund zur Welt, <br />
		verlor mit knapp 7 Jahren mein Augenlicht,<br />
		lebte                                          15 Jahre im Dunkeln <br />
		und darf mich seit 1985 eines Sehverm&ouml;gens <br />
		von 4 &deg; im                                    Zentrum erfreuen. <br />
		Mein linkes Auge dient derzeit als &quot;Reserveorgan&quot;.<br /><br />
	</blockquote></i>
<br />
Ich      startete 2004 erstmals  den Versuch eine HP ins Leben zu rufen. Mit      Hilfe meiner Nichte Jasmin erstellte         ich die Seiten f&uuml;r unsere Feuerwehr.         Jetzt ist es an der Zeit, f&uuml;r    meine eigene Homepage zu arbeiten. 2010 war es mir ein Bed&uuml;rfnis, meine eigene Homepage neu zu gestalten. Dieses Unterfangen ist jedoch schwieriger als ich dachte. F&uuml;r die Erstellung meiner Kopfzeile m&ouml;chte ich meinem Kollegen Cedo recht herzlichen Dank sagen. <br /><br />


Sorry, das da auch text drinsteht, aber sonst sieht mans vielleicht nicht richtig. XD danke für jedliche Hilfe im voraus!
 
Das sind nunmal die Gesetzmäßigkeiten deines derzeitigen Codes.

Lösung: Im HTML-Code den ersten Teil des Textes ("Mein Name ist Andrea P. ..." bis <blockquote>...</blockquote>) nicht nach, sondern unmittelbar vor dem <div id="ich"> notieren, damit dieser es nicht weiterhin umfliesst, so wie das <blockquote>-Element.
 
Zuletzt bearbeitet:
Ach mann! Darauf hätt ich auch kommen können! Vielen Dank, das funktioniert natürlich einwandfrei!

Danke :) vorallem auch für die prompte Hilfe!!

Grüße
 
Zurück