XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Zeilenumbruch: gleich lange Zeilen (http://xhtmlforum.de/showthread.php?t=62959)

kleinpoe 14.11.2010 15:08

Zeilenumbruch: gleich lange Zeilen
 
Liste der Anhänge anzeigen (Anzahl: 1)
Hallo,
ich hoffe ich ziehe jetzt nicht in irgendeiner Weise den Zorn des Forums auf mich, aber ich habe eine Frage deren Lösung ich einfach nicht finden konnte.
Es geht um folgendes:
Ich versuche mich gerade daran ein Ieview Template für Miranda zu modifizieren, welches die Darstellung des Nachrichtenverlaufs im Miranda Chatfenster verändert. Das Ganze ist aber nichts anderes als HTML und CSS (auch javascript möglich), insofern ist es kein wirkliches "Miranda-Problem".
Ich habe eine Tabelle mit zwei Spalten. In der linken befindet sich ein Div mit variabler Breite. In diesen Div kommt die Nachricht, die ein Benutzer sendet und je nach Größe eine Sprechblase drumherum macht. Allerdings entsteht bei zweizeiligen Nachrichten manchmal eine hässliche freie Stelle.
Ich brauche also etwas, was einen Zeilenumbruch so erzwingt, dass der Text zum Schluss gleiche Zeilenlänge hat.
Zum besseren Verständnis (ein Bild sagt mehr als tausend Worte) habe ich ein Bild angehängt.

Vielen Dank an jeden der versucht mir zu helfen! :)

Gruß

ArcVieh 14.11.2010 19:24

Eigentlich müsste das Div wo der Text drin steht, die gleiche Breite einnehmen wie das Fenster hergibt, egal wie viel Text drin steht. Es sei denn es wird float verwendet oder display:inline...

Wie schaut denn der Code dazu aus?

kleinpoe 14.11.2010 19:45

HTML-Code:

<table cellpadding="0" cellspacing="0">
<tr><td>&nbsp;</td><td width="100%">

<table cellpadding="0" cellspacing="0" align="left">
<tr><td>
        <td class="minsize">
        <div class="outcenter">
        <div class="outtop">
        <div class="outbottom">
        <div class="outleft">
        <div class="outright">
        <div class="outlefttop">
        <div class="outrighttop">
        <div class="outrightbottom">
        <div class="outleftbottom">
        <div class="textmargin">%text%</div></div></div></div></div></div></div></div></div></div></td>

</td></tr>
</table>
<td width="30" align="right" style="padding:0px 2px 2px 0;" valign="bottom"><span class="timestampout">%time%</span></td>       
</td></tr></table>
<table cellpadding="0" cellspacing="0" class="spacer"><tr><td></td></tr></table>

Also das ist der HTML-Code einer Zeile wie auf dem Bild zu sehen. Es ist nicht so einfach, weil die Sprechblasen ziemlich kompliziert mit den ganzen divs gemacht werden :D. Aber das sollte keinen Unterschied machen, wie ich das sehe.

kleinpoe 14.11.2010 22:22

Lasst mich das Problem anders formulieren, ich glaube ich verwirre damit nur:
Ich habe einen Div Container der mit Text gefüllt wird und je nach Text die Größe anpasst. Ist der Text länger als die Seitenbreite wird eine neue Zeile im Div begonnen und der Div hat die Breite der Seite.

Nun angenommen, dass der Text um ein Wort länger ist, als gerade so auf die Seite passt. Dann habe ich eine volle Zeile und ein Wort in der nächsten Zeile. Nun ist es aber für mich aus irgendeinem Grund wichtig die Breite des Divs möglichst klein zu halten. Würde der Text schon vorher einen Zeilenumbruch machen, sodass beide Zeilen etwa gleich lang sind, wäre der Div nicht mehr so breit, obwohl er die gleiche Höhe hat. Und genau das ist es was ich erreichen will.

ArcVieh 14.11.2010 22:24

Also Du willst erreichen, dass Falls 2 auf deinem Bildchen oben passiert?

kleinpoe 14.11.2010 22:27

genau, Fall 2 ist mein Ziel.
Sorry, man kann Fragen auch echt umständlich stellen :(

ArcVieh 14.11.2010 22:39

Uff... Das ist schon ein krass beschissener Code... Probier es mal so:

HTML-Code:

<table cellpadding="0" cellspacing="0">
<tr><td>&nbsp;</td>
<td width="100%">
        <div class="outcenter">
        <div class="outtop">
        <div class="outbottom">
        <div class="outleft">
        <div class="outright">
        <div class="outlefttop">
        <div class="outrighttop">
        <div class="outrightbottom">
        <div class="outleftbottom">
        <div class="textmargin">%text%</div></div></div></div></div></div></div></div></div></div></td>

<td width="30" align="right" style="padding:0px 2px 2px 0;" valign="bottom"><span class="timestampout">%time%</span></td>       
</td></tr></table>
<table cellpadding="0" cellspacing="0" class="spacer"><tr><td></td></tr></table>

Ich hab die verschachtelte Tabelle um die divs entfernt.
Ist aber auch nur ein Stich ins blaue.

kleinpoe 14.11.2010 22:47

hat leider nicht funktioniert, jetz werden die Sprechblasen nur fehlerhaft dargestellt. Ich verstehe nicht ganz wie das gemacht ist, ich habe den code auch nur übernommen und modifiziere ihn, aber wenn man meine vereinfachte Beschreibung des Problems lösen könnte, würde das glaube ich reichen.


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:37 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023