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

Element mitten in den Text schieben

jump.blueberry

New member
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:
<!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.
 

Anhänge

  • textumbild.png
    textumbild.png
    49,4 KB · Aufrufe: 6
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...
 
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:
<!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>b\ody #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:
: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
 
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.
 
Zuletzt bearbeitet:
Zurück
Oben