• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Textumfluß um Bilder die frei positionierbar sind

I

Industriemeister

Mitglied
Auch wenn ich das ganze später in php umsetzen werde, möchte ich das Grundsätzliche gern erst mal hier klären.

Ich möchte in einem Textblock ein Bild einfügen.
Da ich aber über mehrere Textblöcke verfüge die jeweils in *.inc gespeichter sind.
Möchte ich diese über eine Datenbank verwalten.

Ich stelle mir also vor das ich folgende Spalten habe.
Textblock
Bild1
Bild2
x-postion-bild1
y-postion-bild1
x-postion-bild2
y-postion-bild2

Ich möchte eine GerüstDatei haben. z.B Storygerüst.php

in dieser wird der text und das bild über die Spalten eingelesen.
Doch möchte ich eben nicht das der Text einfach vor oder hinter dem Bild steht, so wie es der code unten hergibt.
Sondern ich dachte daran über style position x/y das Bild frei im Text positionieren zu können.
Um so Bilder und Text unabhängig von einander in das Gerüst einlesen und verwalten zu können.

Hintergrund: Es gibt aktuell ca 80 Texte die fertig mit Absätzen formatiert sind. Im Moment ohne Bilder.
Ich habe eine GerüstDatei in der die Überschrift und andere Infos zum Text verarbeitet werden. In diese Datei wird auch der Textblock eingefügt.
Da ich mir vorstelle das die Bilder wechseln können möchte ich die Bilder eben unabhänig von der inc-Datei machen.

Ich hoffe ich habe verständlich machen können was ich mir denke.

Code: 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Basic//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd">
<html>
<head>
<title>Storybildtest</title>
<meta name="author" content="Frank">
<meta name="editor" content="html-editor phase 5">
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<div style="float: left; width: 700px; align: center; border: 1px;">
<img src="../Images/Stellungen/liebeswippe.jpg" style="position-top: 640px;">
<span style="color: #5F00FF;">Lorem ipsum dolor sit amet, semper mi, pede lectus. Tincidunt gravida consectetuer, sed fermentum ut felis, suscipit fermentum vestibulum blandit odio, urna at quis turpis convallis vel donec, eros ut eu vel lacus vehicula. Et proin laboriosam pede ac id id. Morbi porta eros turpis lectus nam mi. In vel a a officia elit et, per suspendisse rutrum posuere pretium velit, blandit a ut, rhoncus et lectus vitae accumsan, eros lobortis vitae. Amet et nullam vehicula quam, at ante dui tellus nunc per vestibulum. Eget suspendisse leo nec ut vel ut, duis pede. Enim justo ligula, nunc nulla libero magna felis, curabitur leo dui. Elit pulvinar, urna risus et facilisis elit enim quis, erat rutrum, dolor nec, vitae vulputate vitae.<br />

........
 pulvinar wisi eu sociis, integer urna, tempus dolor dui porttitor, adipiscing dolor donec phasellus. Pellentesque neque eget odio vivamus ridiculus.</span>
</div>
</body>
</html>
 
Eine Eigenschaft

Code: 
position-top

gibt es nicht.

Was Du willst, lässt sich nicht durch absolut positionierte Element erreichen. Du musst schon bei jedem Bild selbst angeben, ob dieses links oder rechts vom Text stehen soll.

HTML
HTML: 
<img src="bild.jpg" alt="" class="links"><p>Text</p>
HTML: 
<img src="bild.jpg" alt="" class="rechts"><p>Text</p>

CSS
Code: 
img.links { float: left; }
img.rechts { float: right; }

Die entsprechende Klasse kannst Du dann in deiner PHP-Programmierung je nach Wunsch setzen.
 
OK, das wäre für Links / Rechts eine Möglichkeit und mit SQL-Spalten auch machbar.
Doch so habe ich nur die x-achse definiert.

Gibt es auch eine Möglichkeit die y-achse zu definieren?
Denn anders als bei der Horizontalen Bildposition ist die Vertikale Bildposition im Text nicht egal.
Ich möchte hier gern steuern können ob das Bild oben, unten, mittig oder optimal irgendwo im Text auftaucht.

und mit
Code: 
style="position:absolute; top:100px;

liegt das Bild über dem Text.
Ist also keine Lösung für meine Vorstellung
 
Zuletzt bearbeitet:
Wie schon gesagt und wie Du schon selbst festgestellt hast, ist absolute Positionierung in dem Fall nicht möglich. Wenn Du das Bild innerhalb des Textes positionieren willst, schreib es im Quellcode an die entsprechende Stelle und floate es.

HTML: 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rhoncus, nibh eu lacinia suscipit, metus velit ultrices nisl, eu dictum turpis ante eu felis. Nunc eu ultricies lorem.</p><img src="bild.jpg" alt="" class="rechts"><p>Donec elementum metus vel justo venenatis id consectetur diam malesuada. Nunc porttitor, leo dapibus faucibus adipiscing, felis quam dictum enim, blandit tincidunt felis risus sed nibh. Proin ut dolor egestas dui porta tristique nec id turpis.</p><img src="bild.jpg" alt="" class="links"><p>Nulla sollicitudin odio vel tellus imperdiet dapibus. Nulla et condimentum nibh. Morbi id erat in eros pellentesque euismod at vel ligula. </p>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben