HTML - Text neben Bild?

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

Werbung

Jetzt auf elektrisches Fahren umstellen, Umwelt schonen und 1.500km kostenlosen Strom von Tesla bekommen. https://ts.la/carsten15473.

fearyou

Neues Mitglied
3 Februar 2011
10
0
0
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?
 

NE4Y

Mitglied
2 Dezember 2010
285
3
18
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...
 

fearyou

Neues Mitglied
3 Februar 2011
10
0
0
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!?
 

fearyou

Neues Mitglied
3 Februar 2011
10
0
0
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

Aktives Mitglied
30 Juni 2008
2.062
20
38
www.ohne-css.gehts-gar.net
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.
 

NE4Y

Mitglied
2 Dezember 2010
285
3
18
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
 

fearyou

Neues Mitglied
3 Februar 2011
10
0
0
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

Senior HTML'ler
4 August 2009
1.520
31
48
www.css-spielereien.de
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
 

fearyou

Neues Mitglied
3 Februar 2011
10
0
0
#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.
 

NE4Y

Mitglied
2 Dezember 2010
285
3
18
in einem forum gibt es die funktion html aktivieren, diese will er nutzen ...
 

Elroy

Senior HTML'ler
4 August 2009
1.520
31
48
www.css-spielereien.de
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
 

fearyou

Neues Mitglied
3 Februar 2011
10
0
0
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

Neues Mitglied
9 März 2010
495
4
0
Augsburg
www.rundphm.de
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