[Erledigt] CSS Problem (Links Bild, Rechts Text nicht 100% korrekt)

smilla · 14.04.2011, 16:47

Hi,

ich möchte Links ein Bild anzeigen und rechts daneben ein Text. Das klappt auch. Nun ist der Text so groß, dass dieser höher ist als das Bild. Der Text geht also direkt unter den Bild weiter. Genau das will ich nicht. Ich will das unter den Bild ein Leerraum bleibt, wenn der Text länger ist.

So schaut mein Ansatz aus:

PHP-Code:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Unbenanntes Dokument</title>

<style type="text/css">

.foo img {

float: left;

}

 

.foo p {

margin: 0;

padding: 0;

}

 

.clear {

clear: left;

font-size: 1px;

line-height: 0;

}

</style>

</head>

 
<body>

<div class="foo" style="border:1px solid #000000;width:250px">

     <a href="foobar.html"><img src="" alt="" name="test" width="50" height="50" id="test" /></a>

     <p class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer sodales congue ante. Vestibulum felis. Phasellus nunc urna, gravida in, egestas quis, vehicula nec, quam.</p>

     <div class="clear">&nbsp;</div>

</div>

</body>

</html>

Hat jemand eine Idee wie man es machen kann? Ich meine ich muss beim foo p die margin mit 4 Parameter nutzen. Habe da aber alle kombinationen ausprobiert und jeden Parameter mal nen Wert von 50 gegeben. Das klappe nicht.

Ich denke es ist nur eine Kleinigkeit

nikosch · 14.04.2011, 17:23

Mit float und margin-left;

smilla · 14.04.2011, 19:10

Jo danke. Mit margin left im p Tag konnte ich das Problem lösen.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Es erscheint das alte Bild (cache problem) !!	mac	PHP-Fortgeschrittene	12	18.05.2011 11:23
Mail HEADER	GELight	PHP Einsteiger	2	06.01.2011 13:25
[Erledigt] Mit PHP einen Text ins Bild einfügen	olixes	PHP Tipps 2010	5	14.06.2010 01:02
php-Ausgabe des Artikeldatums bei Mouse-over über Bild	McBorney	PHP Tipps 2010	3	26.04.2010 13:40
Verschachtelte Auswahlfenster	RichieG	PHP Tipps 2010	3	10.03.2010 07:58
[Erledigt] CSS Problem, Links ausrichten	monk	HTML, Usability und Barrierefreiheit	7	09.03.2010 20:33
[Erledigt] Text über Bild in Tabelle	Ryuuzaki93	HTML, Usability und Barrierefreiheit	8	17.12.2009 16:56
Text Ersetzen an anderer Stelle	phpde	Off-Topic Diskussionen	6	03.08.2009 20:12
Webdesign dringend Hilfe	Rambo02	HTML, Usability und Barrierefreiheit	3	25.07.2009 10:40
CSS: Text an zentriertem Text rechts ausrichten	rocco	HTML, Usability und Barrierefreiheit	5	18.04.2009 09:00
Textfelder Array in Datenbank schreiben	raa	PHP Tipps 2009	16	14.03.2009 21:41
[Erledigt] Link		PHP Tipps 2005-2	10	20.07.2005 21:28
[Erledigt] durch Klick auf Text anderen Text einblenden		HTML, Usability und Barrierefreiheit	3	03.07.2005 14:41
[Erledigt] DIV´s wollen nicht wie ich das will :-)		HTML, Usability und Barrierefreiheit	22	28.03.2005 18:36

14.04.2011, 16:47
smilla Erfahrener Benutzer Registriert seit: 09.11.2008 Beiträge: 200	[Erledigt] CSS Problem (Links Bild, Rechts Text nicht 100% korrekt) Hi, ich möchte Links ein Bild anzeigen und rechts daneben ein Text. Das klappt auch. Nun ist der Text so groß, dass dieser höher ist als das Bild. Der Text geht also direkt unter den Bild weiter. Genau das will ich nicht. Ich will das unter den Bild ein Leerraum bleibt, wenn der Text länger ist. So schaut mein Ansatz aus: PHP-Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Unbenanntes Dokument</title> <style type="text/css"> .foo img { float: left; } .foo p { margin: 0; padding: 0; } .clear { clear: left; font-size: 1px; line-height: 0; } </style> </head> <body> <div class="foo" style="border:1px solid #000000;width:250px"> <a href="foobar.html"><img src="" alt="" name="test" width="50" height="50" id="test" /></a> <p class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer sodales congue ante. Vestibulum felis. Phasellus nunc urna, gravida in, egestas quis, vehicula nec, quam.</p> <div class="clear"> </div> </div> </body> </html> Hat jemand eine Idee wie man es machen kann? Ich meine ich muss beim foo p die margin mit 4 Parameter nutzen. Habe da aber alle kombinationen ausprobiert und jeden Parameter mal nen Wert von 50 gegeben. Das klappe nicht. Ich denke es ist nur eine Kleinigkeit


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

14.04.2011, 17:23
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Mit float und margin-left; __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

14.04.2011, 19:10
smilla Erfahrener Benutzer Registriert seit: 09.11.2008 Beiträge: 200	Jo danke. Mit margin left im p Tag konnte ich das Problem lösen.