Element mitten in den Text schieben

**jump.blueberry** · 05-05-2008 17:37

Hallo,

ich habe ein Problem und weiß auch gar nicht, ob das zu lösen ist.
Und zwar möchte ich auf einer Seite, dass ich Bilder oder ander Elemente einfach am Anfang eines Textes platziere.
(Dieser kann evtl. auch mit p-tags unterteilt sein.)

Hier ist das, was ich schonmal habe...
So funktioniert es aber nicht.
Der "Kasten" bleibt immer ganz oben.

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>test</title>
<style type="text/css">
body{width:500px;}
#bild{width:200px; height:100px;  float:left; top:50px; left:50px; background-color:#CC0033}
</style>
</head>
<body>
<div id="bild">x</div>
Liquat lortio erilis nos nis nullaore exer ad et velessequi blandreet ulputat
pratin utpatum eum quat aliquat. Lobore minisis nullamet augue facincinit ea
alit lut incilit non utatue consectem iusci bla aliquis nulla cor sum vero dolobor
eetuerosto odio odolum am init pratetue do consed dolore volorerat ulputat. Duisl
ulluptat, quis ea facip et, volore tem vullan ullan henisl inci blam, quatue
min erate modolum velit lutatum iusci tatio delestrud digna feugueril in hendre
dunt nonse doluptatie conum quismod ignibh eliquisi. Xercilit vullam qui tin
utem voleniat. Gueros atissi bla facin eummy nummy nim quam venibh ex eum aut
at ing erilit, volor ip estrud eu feugueratuer ing er iriuree tumsand ignismo
dolore eliquat vero delenibh endit nisim digna feum quisi tis essi. Quisit nonse
consenibh exeraestio odolutatet nos nisl utat, quamconsequi tet amet, susci bla
corem dui blamcon sectetummod magna ad magna consed tat alit praesequam, core
molore dip enim exeratuerate commy nit, consectem nos autem volobore magna conulla
conullan velit at. Duismod olorercil dolesed do exercidunt et la adip eu feum
vel do duisi. Cummy nosto odolobortin utet, vel do consecte tio corpero dolore
min velis augait nonseEt, sed molendrerci blan ut la facilla facipit at. Hent
adit autpat. Ut nim quam, sit aliquis alis aute velisl utpate euisi. Isit wis
num illutatisi.

</body>
</html>

Gibt es eine Möglichkeit, das so zu lösen, oder muss der Kasten mitten im Text stehen, dass der Effekt erziehlt wird.

Wie es aussehen soll, habe ich im Anhang nochmals kurz illustriert.

**ein schlauer** · 05-05-2008 18:14

Die Angaben für top und left sind überflüssig, aber ansonsten macht dein Code doch genau das was du willst.

**jump.blueberry** · 06-05-2008 15:14

Zitat von ein schlauer

Die Angaben für top und left sind überflüssig, aber ansonsten macht dein Code doch genau das was du willst.

Dass die Angaben überflüssig sind, ist mir schon aufgefallen.
Ich wollte damit nur verdeutlichen, dass ich den Kasten z.B. 150px nach unten rücken will.

Der Code macht nicht, was ich will... sonst wär ich ja nicht hier.

Ich möchte, dass das Element zwar am Anfang des Textes steht, aber in der Mitte erscheint.
Gibts da eine Möglichkeit?

Weil man kann ja "position:absolute" und "float:left" nicht verbinden...

**ein schlauer** · 06-05-2008 15:45

Jetzt verstehe ich, nein das geht nicht.

**jump.blueberry** · 06-05-2008 18:50

Echt ned?
Schade!

**anna55** · 06-05-2008 20:36

Zitat von ein schlauer

Jetzt verstehe ich, nein das geht nicht.

Ich will nicht sagen, dass es gar nicht geht, aber bei dem vorliegenden Beispiel muss man schon ein wenig zaubern.

PHP-Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>test</title>

<style type="text/css">

body{width:500px;}

#bild{width:200px; height:100px; float:left; margin:20px 20px 10px 50px; background-color:#CC0033}

*+html #bild{margin:120px 20px 10px 50px;}

*html #bild{margin:120px 20px 10px 20px;}

html:first-child>body #bild{margin:120px 20px 10px 50px;}

.text{position:absolute; left:20px; top:0; margin:30px;width:500px;}

.absatz{margin:110px 0 0 40px;}

.normal{margin-left:40px;}

p:before{content:(class);}

div:after{ content:(id);}

</style>

</head>

<body>

<div id="bild">x</div>

<p class="text">Liquat lortio erilis nos nis nullaore exer ad et velessequi blandreet ulputat

pratin utpatum eum quat aliquat. Lobore minisis nullamet augue facincinit ea

alit lut incilit non utatue consectem iusci bla aliquis nulla cor sum vero dolobor

eetuerosto odio odolum am init pratetue do consed dolore volorerat ulputat.</p>

<p class="absatz">Duislulluptat, quis ea facip et, volore tem vullan ullan henisl inci blam, quatuemin erate modolum velit lutatum iusci tatio delestrud digna feugueril in hendre

dunt nonse doluptatie conum quismod ignibh eliquisi. Xercilit vullam qui tin

utem voleniat. Gueros atissi bla facin eummy nummy nim quam venibh ex eum aut

at ing erilit, volor ip estrud eu feugueratuer ing er iriuree tumsand ignismo

dolore eliquat vero delenibh endit nisim digna feum quisi tis essi.</p>

<p class="normal">Quisit nonseconsenibh exeraestio odolutatet nos nisl utat, quamconsequi tet amet, susci blacorem dui blamcon sectetummod magna ad magna consed tat alit praesequam, core

molore dip enim exeratuerate commy nit, consectem nos autem volobore magna conulla

conullan velit at. Duismod olorercil dolesed do exercidunt et la adip eu feum

vel do duisi. Cummy nosto odolobortin utet, vel do consecte tio corpero dolore

min velis augait nonseEt, sed molendrerci blan ut la facilla facipit at. Hent

adit autpat. Ut nim quam, sit aliquis alis aute velisl utpate euisi. Isit wis

num illutatisi.</p>

</body>

</html>

Ich hab's mit FF2, IE6, IE7 und Opera getestet. Man könnte aber vielleicht einfacher das Bild positionieren mit

PHP-Code:


:before { content:url("")}(

Mal was zum Lesen:
content: Inhalte einfügen: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets
SELFHTML: Stylesheets / CSS-Eigenschaften / Pseudoelemente und Pseudoklassen

**jump.blueberry** · 14-05-2008 16:22

Hm, ich hab mir das mal angeschaut.
Für das wie ich es brauche, funktioniert es nicht.
Ich möchte den Text aus der Datenbank auslesen und das Bild dann auf jeder Seite anders im Text platzieren können.

Für diese Methode müsste ich so viele Anpassungen vornehmen, dass ich den DIV-Tag oder das Bild auch gleich vor den 2. Absatz schieben kann.

P.S.
Wofür steht eigentlich *+html und *html??

Leider kann man das nicht googeln, weil die Zeichen ignoriert werden.

**anna55** · 14-05-2008 16:31

Zitat von jump.blueberry

Wofür steht eigentlich *+html und *html??

Mit diesen "Hacks" wird den unterschiedlichen Versionen des Internetexplorers "erklärt", wie verschiedene CSS-Angaben ordentlich umzusetzen sind. Hier findest Du eine Erläuterung.

Thema: Element mitten in den Text schieben

LinkBack

Themen-Optionen

Anzeige

Element mitten in den Text schieben

Empfehlenswerte Literatur von unserem Partner Terrashop

AW: Element mitten in den Text schieben

AW: Element mitten in den Text schieben

AW: Element mitten in den Text schieben

AW: Element mitten in den Text schieben

AW: Element mitten in den Text schieben

AW: Element mitten in den Text schieben

AW: Element mitten in den Text schieben

Ähnliche Themen

Navigation in eigener datei ablegen...

DIV mittels JS immer an Browser-Top ausrichten ?!

Iframe mit anker - hauptseite lädt iframe anker

NUR "Druckbereich" festlegen

Objekt an "unbekannter" Position erstellen

Lesezeichen

Lesezeichen

Berechtigungen