✔ Text in div automatisch umbrechen

Status
Nicht offen für weitere Antworten.
Microhome

Microhome

Erfahrenes Mitglied
Hallo Ihrs,
ich bins nochmal. Ich habe eine Tabelle mit 3 Spalten und 3 Zeilen. Alle Zellen haben eine feste Größe. Die Tabelle ist 100% breit. In der mittleren Zelle steht der Haupttext. Wenn ich das Browserfenster nun kleiner schiebe möchte ich, dass der Text in dieser Zelle entsprechend umbricht, sodass unten keine Scrollbar erscheint. Wie kann ich das machen, ohne das Tabellen-Layout in ein DIV Layout umwandeln zu müssen?


Mit Dank für eure Hilfe,
m!cro
 
Ich glaube, dass man mit JavaScript die Scrollbalken in einem Browserfenster ausschalten kann. Aber warum möchtest du die Scrollbalken ausgeblendet haben, dann kann man den Text ja gar nicht mehr lesen, wenn du das Fenster kleiner machst.

Wenn du Scrollbalken in den Zellen meinst, keine Ahnung wie und ob das geht.

Gruß di-five
 
Ich möchte den Scrollbalken nicht ausblenden, sondern den Text automatisch umbrechen, wenn das Browserfenster kleiner gemacht wird. Also dass der Text immer länger wird, je schmaler ich das Fenster schiebe.
 
Dann musst du die Breite der Tabelle in Prozent und nicht in Pixel angeben.

Wenn das nicht funktioniert poste mal die Tabelle.

Gruß di-five
 
Hier mal dei Tabelle (ist nen kleines Bissl).

Code: 
<table border="0" cellpadding="0" cellspacing="0" width="100%">
	<tbody><tr>
		<td colspan="3" bgcolor="#ffd108" height="5" width="100%"></td>
	</tr>
	<tr>
		<td width="252"><img src="gfx/index_04.gif"></td>
		<td width="750"><img src="gfx/header.jpg"></td>
		<td bgcolor="#ffeb96" width="100%">&nbsp;</td>
	</tr>
	<tr>
		<td bgcolor="#ffd108" width="252">&nbsp;</td>
		<td colspan="2" bgcolor="#ffd108" height="30" width="100%"><div style="margin-left: 12px;"><a href="#" class="navitop"><b>Link 1</b></a><b>&nbsp;<a href="#" class="navitop">Link 2</a>&nbsp;<a href="#" class="navitop"><b>Link 3</b></a><b>&nbsp;<a href="#" class="navitop">Link 4</a></b></b></div></td>
	</tr>
	<tr>
		<td background="gfx/index_10.gif" height="20" width="252"></td>
		<td colspan="2" bgcolor="#ffe577" height="30" width="100%"><div style="margin-left: 20px; font-size: 10px;">Sie sind hier: <a href="#" class="wo">Startseite</a></div></td>
	</tr>
	<tr>
		<td bgcolor="#ffe577" valign="top" width="252"><div style="margin-left: 20px; margin-right: 10px; margin-top: 20px;">
		<div id="nav">
		  <ul><li><a href="#">Submenu 1</a></li><li><a href="#">Submenu 2</a></li><li><a href="#">Submenu 3</a></li></ul>
		</div>
		</div></td>
		<td bgcolor="#ffffff" valign="top"><div id="main"><h2>Der Text steht hier</h2>Wenn das browser-Fenster verkleinert wird, soll sich dieser Text hier entsprechend nach unten strecken.</div><br><br><br><br><br></td>
		<td bgcolor="#ffffff" valign="top" width="100%">
		<div style="margin-left: 10px; margin-right: 20px; margin-top: 20px;">
		<div id="related">
		  <div style="margin-left: 10px; width: 230px;"><b>Related Links</b></div>
		  <ul>
		  <li><a href="#" style="background: transparent url(./Bilder/icon_pdf_0.gif) no-repeat scroll right 5px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-right: 10px;" onmouseover="this.style.backgroundImage='url(Bilder/icon_pdf_1.gif)';" onmouseout="this.style.backgroundImage='url(Bilder/icon_pdf_0.gif)';">Doku 1</a></li>
		  <li><a href="#" style="background: transparent url(./Bilder/icon_pdf_0.gif) no-repeat scroll right 5px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-right: 10px;" onmouseover="this.style.backgroundImage='url(Bilder/icon_pdf_1.gif)';" onmouseout="this.style.backgroundImage='url(Bilder/icon_pdf_0.gif)';">Doku 2</a></li>
		  <li><a href="#" style="background: transparent url(./Bilder/icon_link_0.gif) no-repeat scroll right 5px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-right: 10px;" onmouseover="this.style.backgroundImage='url(Bilder/icon_link_1.gif)';" onmouseout="this.style.backgroundImage='url(Bilder/icon_link_0.gif)';">Google.de</a></li>
		  </ul>
		</div>
		</div></td>
	</tr>
	<tr>
		<td width="252"><img src="gfx/index_16.gif"></td>
		<td colspan="2" background="gfx/index_18.gif" width="100%"></td>
	</tr>
</tbody></table>
 
Sehr konfus:
In der zweiten Tabellenzeile hast du für die zweite Tabellenspalte eine Breitenangabe von 750px und für die dritte Spalte eine Breitenangabe von 100% ( - also die gleiche Breite wie die Tabelle) gemacht. Ein Stück weiter erwartest du, dass die zweite Spalte eine variable Breite hat.

Übrigens wird die Gestaltung einer Tabelle in SelfHTML ganz gut beschrieben und übrigens ist das hier das CSS-Forum.
 
Hast du mal den gesamten Beitrag gelesen Es geht mir darum, wie ich in der mittlersten Zelle den Text automatisch länger strecken kann, wenn das Browserfenster schmaler wird.


Wäre für SINNVOLLE Tipps dankbar.
m!cro
 
Hallo.

Ich denke auch, dass es dir reichen sollte, wenn du die Breitenangaben in Prozent anstatt in Pixelzahlen angibst.

Gruß.
 
Nabend, hab nen Bissl gebastelt und eine, zugegeben viel zu einfache, Lösung gefunden. Irgendwie hattet ihr alle vollkommen recht. So funktionierts:

- Pixelangabe für erste und dritte Spalte
- mittlere Spalte, bzw. colspan-Zellen auf 100%
- Images mit best. Breite in den Hintergrund mit background-repeat:no-repeat

Das wars eigentlich schon.


Vielen Dank für eure Hilfe und frohes CSSen.

Euer m!Cro
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück