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

HTML - Text neben Bild?

fearyou

Neues Mitglied
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?
 
Werbung:
wieso setzt du ein img in nen p tag? ist mit css leicht zu machen zb.
PHP:
<img src="test.png" /><div id="nebenbild">Text .... </div>
und die css
PHP:
#nebenbild {
margin:dann halt positionieren ;
}
... wen du nämlich p per
PHP:
<p style="blabla;" /> würde sich auch dein bild verschieben...
 
Werbung:
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!?
 
Werbung:
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?
 
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.
 
Werbung:
PHP:
<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
 
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?
 
Werbung:
Hallo.

Schau dir mal meine Lösung an:

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

 #links {margin-left: 170px;}
HTML:
<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
 
#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.
 
In welcher "Beitragserstellung" kannst Du kein CSS einfügen? Womit arbeitest Du? Wo willst Du CSS und HTML einfügen?
 
Werbung:
Dann wird dort vermutlich keine Unterstützung für CSS dabei sein, aber man kann es ja mit Inline-Style versuchen ..
 
Hallo.

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

HTML:
<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
 
Werbung:
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*)
 
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:
HTML:
<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
 
Zurück
Oben