HTML - Text neben Bild?

[fearyou]

Hallo,

ich hätte gerne einen Text neben einem Bild. Folgender Code funktioniert auch:

<p><img style="float: left;" src="...." />Text ....</p>

Nur klebt der Text dann am Bild an. Wie bekomme ich dazwischen einen kleinen Abstand?

 

[Arcsinh]

Mit margin ...

 

[NE4Y]

wieso setzt du ein img in nen p tag? ist mit css leicht zu machen zb.

<img src="test.png" /><div id="nebenbild">Text .... </div>

und die css

#nebenbild {
margin:dann halt positionieren ;
}

... wen du nämlich p per

<p style="blabla;" /> würde sich auch dein bild verschieben...

 

[fearyou]

Sry, ich muss dazu sagen, dass ich absolut fast keinen Plan von HTML habe. Ich habe das mit dem Bild und dem Text ergooglet.
Es geht um die Beitragserstellung in einem Forum. Dort gibt es die Funktion "HTML aktivieren".

Wenn ich "<img src="test.png" /><div id="nebenbild">Text .... </div>" eingebe, ist der Text unter dem Bild. Und dieser "margin" Code funktioniert in Beiträgen ja nicht!?

 

[prm]

So sollte es klappen:

<img style="float: left; margin-right: 10px;" src="http://www.html.de/html-und-xhtml/html-und-xhtml/...." /><p>Text ....</p>

siehe auch http://www.ohne-css.gehts-gar.net/0019.php

 

[Arcsinh]

So sollte es klappen:


siehe auch Text zu Bildern anordnen

Der p-Tag sollte weggelassen werden.

 

[Elroy]

Der p-Tag sollte weggelassen werden.

Wohl eher nicht. Wenn das Bild einen Bezug zum Text hat sollte es auch entsprechend ausgezeichnet werden.

Hat das Bild keinen Bezug zum Text sollte es trotzdem richtig ausgezeichnet werden.

Gruss
Elroy

 

[fearyou]

Vielen Dank!

Wie müsste der Code denn aussehen, wenn ich einen Text gleichzeitig neben aber auch einen unter dem Bild haben möchte? Ist das möglich?

 

[prm]

Im Prinzip genauso.
Nur musst du dann vor dem Text darunter clearen, z.B. mit
<p style="clear: both;">Text unter dem Bild</p>

Wenn es einen Zusammenhang zwischen Bild und Bilduntertext gibt, dann kannst du beides auch in einen Div packen, diesen floaten und ihm eine bestimmte Breite geben.

 

[fearyou]

Wie füge ich

<img style="float: left; margin-right: 10px;" src="http://www.html.de/html-und-xhtml/html-und-xhtml/...." /><p>Text ....</p>
und
<p style="clear: both;">Text unter dem Bild</p>

zusammen, sodass das passt?

 

[NE4Y]

<img style="float: left; margin-right: 10px;" src="[URL]http://www.html.de/html-und-xhtml/html-und-xhtml/[/URL]...." />
<p style="clear: both;">Text unter dem Bild</p>

so müsst es gehen

 

[fearyou]

Danke.

Wenn ich aber jetzt einen Text unter das Bild schreibe und dann noch einen links schreibe und der so lange ist, dass er länger/höher als das Bild ist, schreibt er automatisch unterhalb vom Bild weiter und schiebt dann den Text der eigentlich unter dem Bild sein sollte, immer weiter runter.
Gibt es dafür auch noch eine Lösung?

 

[Elroy]

Hallo.

Schau dir mal meine Lösung an:

 #bild {width: 160px;
        float: left;}

 #links {margin-left: 170px;}

<div id="bild">
<p><img src="Testbild.jpg" width="150" height="232" alt="Test" /></p>
<p>Dieser Text steht unter dem Bild</p>
</div>
<p id="links">Ganz viel Text</p>

Das müsste eigentlich das sein was du suchst.

Gruss
Elroy

 

[fearyou]

#bild {width: 160px;
float: left;}

#links {margin-left: 170px;}

Das kann ich in der Beitragserstellung nicht nutzen.

Wenn ich nur:

<div id="bild">
<p><img src="Testbild.jpg" width="150" height="232" alt="Test" /></p>
<p>Dieser Text steht unter dem Bild</p>
</div>
<p id="links">Ganz viel Text</p>

eingebe, dann kommt ja nach "Test" /> der Text den ich neben dem Bild möchte? Der fängt dann links erst in der Mitte des Bildes an.

 

[threadi]

In welcher "Beitragserstellung" kannst Du kein CSS einfügen? Womit arbeitest Du? Wo willst Du CSS und HTML einfügen?

 

[NE4Y]

in einem forum gibt es die funktion html aktivieren, diese will er nutzen ...

 

[threadi]

Dann wird dort vermutlich keine Unterstützung für CSS dabei sein, aber man kann es ja mit Inline-Style versuchen ..

 

[Elroy]

Hallo.

Es sollte ja kein Problem sein meine Vorlage mit Inline Styles umzusetzten.

<div style="width: 160px; float: left;">
<p><img src="Testbild.jpg" width="150" height="232" alt="Test" /></p>
<p>Dieser Text steht unter dem Bild</p>
</div>
<p style="margin-left: 170px">Dieser Text steht neben dem Bild</p>

Gegebenenfalls natürlich die Maße noch ein bisschen anpassen.

Gruss
Elroy

 

[fearyou]

Danke, das funktioniert. Wo muss ich da noch ein "<br>" einfügen, wenn ich möchte, dass unter dem Text der unter dem Bild ist, eine leere Zeile ist? Sodass der linke Text nicht direkt unterhalb des Textes unter dem Bild klebt? (*confuse*)

 

[lowsaxonian]

Wo muss ich da noch ein "<br>" einfügen, wenn ich möchte, dass unter dem Text der unter dem Bild ist, eine leere Zeile ist? Sodass der linke Text nicht direkt unterhalb des Textes unter dem Bild klebt? (*confuse*)

Gar nicht, dafür gibt´s css. Elroy hat´s doch schon mit dem Abstand zum linken Rand gezeigt, also brauchst Du den entsprechenden Code nur noch anzupassen:

<div style="width: 160px; float: left;">
<p><img src="Testbild.jpg" width="150" height="232" alt="Test" /></p>
<p style="margin-top:10px">Dieser Text steht unter dem Bild</p>
</div>
<p style="margin-left: 170px">Dieser Text steht neben dem Bild</p>

Grüße
low