Text Positionierung mit CSS

[obaran]

Hallo,

ich habe ein Problem bei der Positionierung von Text in einem DIV-Element,
das ganze habe ich mal aufgemalt (siehe Bild im Anhang) und einen snip vom Quelltext dazugelegt.

Hoffentlich kann mir einer Helfen.

Danke und Gruß
Oli

  #mitte {
  	background-color: #cbb1a8;
	position: absolute;
  	top: {$oben[1]}px;		/* Abstand zum oberen Fensterrand */
  	left: {$links[0]}px;		/* Abstand zum linken Fensterrand */
  	bottom: {$unten[1]}px;		/* Abstand zum unteren Fensterrand */
  	right: auto;		/* Abstand zum rechten Fensterrand */
  	overflow: auto;		/* Scrollbalken, falls notwendig */
	width: {$mitte[0]}px;
  	height: {$mitte[1]};
	z-index: 1;
  }
  * html #mitte {
	top: 0;
	left: 0;
 	border-top-width: {$oben[1]}px;	/* = Kopfzeilenhöhe */
  	border-left-width: {$links[0]}px;
  	border-bottom-width: {$unten[1]}px;	/* = Fußzeilenhöhe */
  	border-right-width: 0;
  	border-style: solid;
 	border-color: #8e1a16;
  }
  #mitte .inhaltDiv {
  	margin: 0px;		/* Abstand des Inhalts zum Blockrand */
	padding:0px;
  }

  #mitte .inhaltDiv h2{
	font-size:12px;
	font-weight:bold;
	color: #BD1E18;
	margin: 0px;
	padding: 0px;
	margin-bottom: 5px;
  }

  #mitte .inhaltDiv p{
	margin:0px;
	padding:0px;
  }

  #mitte .inhaltDiv .text_l{
	padding:5px;
	margin: 5px;
	margin-left: 8px;
	width: 384px;
	border: 2px solid #BD1E18;
	background-color:#FFFFFF;
  }
  * html #mitte .inhaltDiv .text_l{
	width: 390px;
  }

  #mitte .inhaltDiv img{
	margin:	0px;
	padding:0px;
  }
  #mitte .inhaltDiv img.t1{
	margin-right:-3px;
	float:right;
  }
  #mitte .inhaltDiv img.t2{
	margin-left:-3px;
	float:left;
  }
  #mitte .inhaltDiv a{
	color: #BD1E18;
	font-weight:bold;
  }

<div id="mitte">
	<div class="inhaltDiv">
	<div class="text_l">
		<p>
		<a href="ID=5165"><img class="t1" src="0eba.jpg" alt="Test Überschrift" border="0"></a>
		<h2>Test Überschrift</h2>
		Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein:
		<a href="ID=5165" >mehr</a>
		</p>
	</div>

	<div class="text_l">
		<p>
		<a href="ID=5165"><img class="t2" src="0eba.jpg" alt="Test Überschrift" border="0"></a>
		<h2>Test Überschrift</h2>
		Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein:
		<a href="ID=5165" >mehr</a>
		</p>
	</div>

	<div class="text_l">
		<p>
		<a href="ID=5165"><img class="t1" src="0eba.jpg" alt="Test Überschrift" border="0"></a>
		<h2>Test Überschrift</h2>
		Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein:
		<a href="ID=5165" >mehr</a>
		</p>
	</div>
	</div>
</div>

 

[versuch13]

Hi, hier mal ein kleines Beispiel:

CSS:

div {
 	width:400px;
 }
 img {
 	float:left;
 }
 span {
 	float:right;
 }

HTML:

<div>
 <img src="bild.gif" />Text Text Text Text Text Text Text Text Text Text Text Text 
 Text Text Text Text Text Text Text Text Text Text Text Text 
 Text Text Text Text Text Text <span>mehr</span>
 </div>

Also, mit float arbeiten.


Gruß

 

[obaran]

Hallo versuch13,

danke für deine Antwort, diese Variante hatte ich auch schon ausprobiert, nur das ist
nicht das was ich wollte :-/
Das "mehr" soll jeweils in der letzten Zeile stehen und nicht unter dem Textblock.


Gruß
Oli

 

[obaran]

Hat denn keiner eine Idee, wie das zu lösen wäre?

Gruß
Oli

 

[Gottox]

kleine Zwischenfrage: Tut float nicht genau das, was du wolltest? So wie ich den Befehl interpretiere... Und sein Verhalten kenne...

 

[obaran]

Hallo Gottox,

meines erachtens sollte es auch mit dem "float" Befehl gehen, nur dann wird mein Element immer eine Zeile tiefer angezeigt.

Im Opera macht er es so wie ich es mir vorstelle, da steht das Element ganz rechts in der letzten Zeile (da wo auch der restliche Text zu ende ist), nur im IE und Firefox dort setzt er das Element eine Zeile tiefer und ganz rechts.

Hat denn noch wer eine Idee, wie ich mein Problem lösen kann?

Gruß
Oli

 

[dark_ghost]

Also wenn ich das richtig verstehe dann möchtest du, dass das "mehr" ganz unten rechts in der letzten Zeile steht. ?!
Du könntest mit einer festgelegten positon des Textes arbeiten.
<div style="position:absolute; top10px; left10px;"> an die richtige Stelle bringen. Wär das in etwas das was du meintest. ?!

Gruß
dark_ghost

 

[Inspector]

Hi,

nein, mit float alleine wird das so nicht gehen. Float lässt das so formatierte Element so plazieren, daß folgender Inhalt darum herum fließt. Man könnte also das Wort "mehr" vor den Text setzen und mit float nach rechts positionieren, aber dann würde es am Anfang (oben) des Textes stehen. Das ist auch nicht ganz Sinn der Sache.

Das ist recht diffizil. Hmmm, wie wär's (nur mal als Versuch), das Pferd mal von hinten aufzuzäumen? Also, das Wort "mehr" in einen separaten Paragraphen mit text-align: right nach rechts positionieren, und den vorherigen Text per position: relative; top: 1em; nach unten verschieben? Sozusagen von hinten durch die Brust ins Auge

---------------------------
Nachtrag: Vielleicht geht's ja auch ganz einfach mit span style="text-align: right;"