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

HTML - Text neben Bild?

Sorry jetzt muss ich noch eine Variante einführen:(
img sind inline Objekte und müssen innerhalb von Blockelementen dargestellt werden.

<p><img />Dies ist mein Text</p>

außerdem solltest du nach Möglichkeit kein style Attribut verwenden, sondern Styles extern entweder im HEAD oder besser in einer separaten CSS Datei einfügen.
Da ich aber annehme, dass dies im Moment überfordern würde hier eine funktionsfähige Variante:
PHP: 
<p>
<img style="float: left; margin-right: 10px; margin-bottom:10px;" src="http://www.html.de/html-und-xhtml/html-und-xhtml/...." />Fließtext, der je nach Größe des Bildes rechts am Bild vorbeifliießt oder auch darunter.</p>
<p style="clear:left">Dieser Text ist dann unter dem Bild</p> 

<p style="clear: both;">Text unter dem Bild</p>
 
Werbung:
@ WAY_KOW

Lies dir bitte die anderen Postings durch.

Deine Version ist nicht das was der TO will.
Bei dir schiebt sich der Text neben dem Bild unter das Bild wenn er zu lang wird, und das will der TO nicht.

Gruss
Elroy
 
Werbung:
Elroy schrieb:
Wohl eher nicht. Wenn das Bild einen Bezug zum Text hat sollte es auch entsprechend ausgezeichnet werden...
Zum Vergrößern anklicken....
Nun stellt <p> keinen Bezug zu Garnichts her, sondern zeichnet einen eigenen Absatz aus, sonst nix.
Was soll denn nun bitte wie geschehen, dutzendfach Code und die Lösung ist schon auf der ersten Seite zu finden.
 
Hallo,

ich muss mich mal wieder melden. Und zwar habe ich folgendes Problem: In der Beitrags-Vorschauansicht wird alles super dargestellt. Text neben Bild und unten dann unterhalb.



Wenn ich aber den Beitrag erstelle, sieht das so aus:




Was ist falsch?
 
Werbung:
Etwas am HTML/CSS-Code. Wahrscheinlich irgendwas mit Floats.

Moment. Ist die Seite auf dem unteren Bild nicht einfach schmaler?
 
Stimmt. Ja, da ist sie schmaler. Die Vorschauansicht ist wohl breiter. Aber gibt es hierfür keinen Code, der sich dem einfach anpasst und es gleich aussehen lässt?
 
Ich fürchte, das ist an dieser Stelle weniger eine Frage der passenden CSS-Regeln als eine Frage, wie dein bestehendes System das handhabt und wie es sich gegebenenfalls modifizieren lässt.

Ein herkömmlicher Ansatz sähe so aus:

HTML: 
<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>Simple layout with teaser image</title>
        <style type="text/css">

            .content { width: 50%; }

            .content img { float: left; margin: 0 10px 10px 0; }

        </style>
    </head>

    <body>

        <div class="content">

        <img src="http://imgs.xkcd.com/comics/content_protection.png" alt="XKCD" />

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut turpis tortor, lacinia adipiscing orci. Vivamus sodales tellus at neque aliquet volutpat. Etiam id mauris justo. Phasellus lobortis nulla vitae dolor lacinia quis placerat lorem varius. Quisque fringilla, odio at posuere bibendum, sapien massa pulvinar erat, ac sollicitudin leo leo nec nisi. Nulla vestibulum felis quis sapien ultricies feugiat. Vestibulum egestas viverra fermentum. Quisque a arcu sit amet dolor condimentum lobortis. Mauris ac mauris et ipsum elementum tincidunt vel sed justo. Nunc a purus massa. Nam ornare, ligula id ornare mattis, nisi quam pharetra sem, et convallis lectus felis fermentum nunc. Duis aliquet ornare odio, quis varius quam euismod a. Curabitur sit amet nibh in nisl mattis egestas et et justo. Phasellus pharetra velit nec odio lacinia venenatis. Mauris placerat, mi molestie auctor commodo, erat lacus convallis dolor, ut ultrices nulla nibh id turpis.</p>

        <p>Vivamus quis arcu hendrerit ante sodales luctus in vel libero. Sed dictum eros a velit laoreet euismod. Donec mattis, purus eget interdum bibendum, sapien nisi posuere sem, in vehicula felis dolor ac diam. Aenean fringilla luctus posuere. Nulla risus metus, feugiat sed hendrerit quis, vestibulum aliquet enim. Sed lobortis blandit adipiscing. Nunc id interdum ante. Phasellus at scelerisque dui. Donec tristique, lacus ac gravida posuere, metus massa aliquet magna, nec fermentum sapien nulla quis velit. Pellentesque vitae augue nunc. Nunc quis lacinia tellus. Nam facilisis nulla in urna tempor tempus. Donec ac metus turpis, ac aliquam arcu. Integer purus lacus, sodales eget posuere sit amet, ultrices pulvinar tortor.</p>

        <p>Maecenas et porttitor dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi non dolor et odio sagittis congue non et nisi. Maecenas luctus suscipit nisl, ac aliquet nisi volutpat ut. Fusce pellentesque pellentesque pretium. Vivamus venenatis porttitor mi, vitae vestibulum velit eleifend sed. Maecenas ornare felis at orci dapibus vel aliquet lacus rutrum. Etiam posuere, dui suscipit accumsan pellentesque, ligula elit convallis nunc, eget pellentesque augue justo et lorem. Sed tristique ultrices eros, eget gravida risus fermentum ac. Curabitur rutrum, sapien non tincidunt pharetra, magna magna dictum libero, ac ornare turpis ipsum at dui. Nulla aliquam lorem nunc. Nullam scelerisque, dolor in faucibus accumsan, metus tortor consequat ligula, nec lobortis orci arcu ut quam. </p>

        </div>

    </body>

</html>
 
Werbung:
Naja das ganze ist nur ein Beitrag im Woltlab Burning Board Lite. Ich weiß nicht, inwiefern da HTML gezielt möglich ist. Wenn die Seite breiter ist, wird es ja korrekt angezeigt. Nur ist die Beitragsansicht eben nicht ganz so breit wie die Vorschauansicht.
 
Wie gesagt, du müsstest dann wahrscheinlich ins CSS des Systems eingreifen oder vielleicht auch einfach nur eine andere BBCode-Auszeichnung für den entsprechenden Bereich wählen (würde nicht völlig ausschließen, dass „die“ an solche Fälle gedacht haben). Im schlimmsten Fall wird es nötig, Templates anzupassen oder sogar den Code selbst zu „hacken“.

Das ist alles „downstream“ nie gut, da bei einem Update der Forensoftware/-komponenten deine Anpassungen wieder überschrieben würden.

Es ist ohne weitere Kenntnisse nicht zu beurteilen, ob es eine optimale Vorgehensweise gibt, um das aktuelle Verhalten zu ändern.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben