nicht angemeldet
colspan und feste spaltenbreite durch 1px-Grafik oder kapier ichs einfach nicht?
Hallo!
Ich versuche die ganze Zeit, volgendes Layout hinzubekommen:
Überschrift
Text Text Text Text
Text Text Text Text
Überschrift
Text Text Text Text
Text Text Text Text
:
:
Das ganze soll durch eine Tabelle realisiert werden, also 3 Spalten,:
1. Zeile <td colspan=2>Überschrift</td><td></td>
2. Zeile <td></td><td colspan=2>text</td>
Soweit kein Problem, allerdings schaffe ich es nicht, mit einer Dummy-Grafik in einer neuen Zeile die Spaltenbreite der ersten Spalte zu erzwingen,
also sozusagen den durch die Tabelle simulierten margin-left für den Textabschnitt.
Theoretische Lösung:
<tr> <td><img src ...width="100" ..></td> <td></td> <td></td> </tr>
<tr> <td colspan=2 >Überschrift</td> <td></td> </tr>
<tr> <td></td> <td colspan=2></td> </tr>
Die "100" sollte jetzt ja eigentlich die Breite der ersten Spalte einstellen, tut sie aber nicht.
Stattdessen ist die Breite viel zu groß: Bildbreite kleiner oder gleich null ergibt ca 200 Pixel,
Bildbreite größer null ergibt 200+die Bildbreite.
So, jetzt nochwal den Quelltext:
<html>
<head>
<title></title>
</head>
<body bgcolor="#8888ff">
<table border="1">
<tr>
<td><img src="IMG/D.GIF" width="100" height="1" border="0" alt=" "></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2" bgcolor="#ccccff">
<a name="beispiel"><h2 align="left" class="bs">Überschrift</h2></a></td>
<td></td>
</tr>
<tr>
<td></td>
<td bgcolor="#6666ff" colspan="2">
<p class="leisttext">texttext text text texttexttexttexttext text text texttexttexttexttext text text texttexttexttexttext text text texttexttexttexttext text text texttexttexttexttext text text texttexttext<br>texttext text text texttexttexttexttext text text texttexttexttexttext text text texttexttexttexttext text text texttexttexttexttext text text texttexttexttexttext text text texttexttext</p>
<a href="leistung.html" class="backlink">... zurück zum Anfang</a>
</td>
</tr>
</table>
</body>
</html>
könnte meinen A.... darauf verwetten, daß ichs einfach nicht sehe obwohl/gerade weil es so simpel ist...
-
Hallo,
sehr eigenartige Problem. Ich konnte es nur einkreisen: Nimm das H-Tag bei der Überschrift raus, und es funktioniert..... ein "neuer" Bug? (Allerdings bei NS und IE gleichermassen.....)
Chräcker (der auch sehr neugierig auf eine Begründung ist....)
-
Hi
Ich kann leider auch keinen Fehler finden in deinem Quelltext:-((
Ich hab dann mal herumprobiert und habe eine hoffentlich akzeptable ;-) Loesung gefunden.
Eine Moeglichkeit besteht darin einfach die Ueberschriften ausserhalb der Tabelle zu schreiben. Die Dummy Grafik muss dann natuerlich in die erste Zelle der Tabelle.
Falls du das nicht willst, musst du die Tabelle zu ihrem Glueck zwingen, indem du die zweite Spalte auf 99% setzt. Dadurch wird die erste (und die dritte) Spalte so klein gemacht wie es eben geht. Die erste Spalte ist ja durch die Dummy Grafik auf 100 gesetzt, und die dritte Spalte musst du halt auch durch so eine DummySpalte setzen, falls du sie ueberhaupt brauchst. (In deinem kleine Beispiel ist sie jedenfalls nicht noetig)
So jetzt mal der Quelltext: <html>
<head>
<title></title>
</head>
<body bgcolor="#8888ff">
<table border="2" cellspacing="0" cellpadding="0">
<tr>
<td width="100"></td>
<td width="99%"></td>
<td><img src="IMG/D.GIF" width="100" height="10" border="0" alt=" "></td>
</tr>
<tr>
<td colspan="2" bgcolor="#ccccff">
<a name="beispiel"><h2 align="left" class="bs">Überschrift</h2></a></td>
<td></td>
</tr>
<tr>
<td width="100"><img src="IMG/D.GIF" width="100" height="10" border="0" alt=" "></td>
<td bgcolor="#6666ff" colspan="2">
<p class="leisttext">texttext text text texttexttexttexttext text text texttexttexttexttext text text texttexttexttexttext text text texttexttexttexttext text text texttexttexttexttext text text texttexttext<br>texttext text text texttexttexttexttext text text texttexttexttexttext text text texttexttexttexttext text text texttexttexttexttext text text texttexttexttexttext text text texttexttext</p>
<a href="leistung.html" class="backlink">... zurück zum Anfang</a>
</td>
</tr>
</table>
</body>
</html>
Kleine Anmerkung: Dadurch, dass du eine 100Pixel grosse Grafik einfuegst erreichst du nur, dass diese Spalte mindestens!! 100Pixel gross ist. Ohne eine Angabe von width="100" im <td> fuehlt sich der Browser voellig frei in der Tabellengestaltung. Aber die Erfahrung zeigt, dass sich Netscape fast immer voellig frei fuehlt Tabellen so darzustellen wie er will.(ganz im Sinne des Internet ;-))
Tschau Holger-
Hi
Ich kann leider auch keinen Fehler finden in deinem Quelltext:-((
Ich hab dann mal herumprobiert und habe eine hoffentlich akzeptable ;-) Loesung gefunden.
Eine Moeglichkeit besteht darin einfach die Ueberschriften ausserhalb der Tabelle zu schreiben. Die Dummy Grafik muss dann natuerlich in die erste Zelle der Tabelle.
Falls du das nicht willst, musst du die Tabelle zu ihrem Glueck zwingen, indem du die zweite Spalte auf 99% setzt. Dadurch wird die erste (und die dritte) Spalte so klein gemacht wie es eben geht. Die erste Spalte ist ja durch die Dummy Grafik auf 100 gesetzt, und die dritte Spalte musst du halt auch durch so eine DummySpalte setzen, falls du sie ueberhaupt brauchst. (In deinem kleine Beispiel ist sie jedenfalls nicht noetig)Erstmal Danke für die Mühe.
So recht ist mir aber noch nicht geholfen. Ich hatte mir eigentlich erhofft, durch die drei Spalten, das Layout
möglichst genau bestimmen zu können, genauer gesagt:Erste Spalte so groß, wie ich das will (recht klein).
Dritte Spalte so groß wie möglich, d.h. genau so groß, daß Spalten 1+2 gerade genug Platz für die größte
Überschrift haben.(möglichst nicht mit festem Wert vorgegeben, sondern je nach Browser-Textdarstellung)Mit Deinem Code bekomm ich die erste Spalte leider auch nicht beliebig klein, ob ich die erste spalte
mit width="100" oder width="10" angebe ändert schonmal garnichts.
Sollte ja eigentlich bei nem schlauen Tabellen-Algorithmus drin sein: Tabelle auf 100%,
erste Spaltenbreite definieren und die letzte fehlende Angabe wird durch die Inhalte bestimmt.
Naja, werd ich mich gleich mal ranmachen und alle möglichen Tabelle-in-Tabelle-Kombinationen
ausprobieren
-
-
Hallo Phillip!
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td><img src="trans.gif" width="100" height="1" alt="" border="0"></td>
<td width="50%"></td>
<td width="50%"></td>
</tr><tr>
<td colspan="2" bgcolor="#ccccff" align="left">
<h2 class="bs"><a name="beispiel">Überschrift</a></h2></td>
<td></td>
</tr><tr>
<td></td>
<td bgcolor="#6666ff" colspan="2">
<p class="leisttext">
viel text<br><br><br><br><br><br><br>
</p>
<a href="leistung.html" class="backlink">... zurück zum Anfang</a>
</td>
</tr>
</table>bitte nicht <a><h2>...</h2></a> sondern <h2><a>...</a></h2> verwenden.
Grüße
Thomas -
Hallo!
Danke nochmal an alle, die sich mit meiner Problematik auseinandergesetzt haben, ist echt nett von Euch!Ich hab einen Tabelle-in-Tabelle-Workaround gebastelt, den wollte ich jetzt
der Vollständigkeit halber zeigen:<html>
<head>
<title></title>
</head>
<body bgcolor="#8888ff">
<table cellpadding="0" cellspacing="0" border="0"><tr>
<td valign="middle" align="center" bgcolor="#ccccff">
<h2 style="line-height:25px;"><a name="beispiel"> textextexttextext</a></h2></td>
<td width="100%"></td>
</tr><tr>
<td colspan="2"><table border="0" cellspacing="0" cellpadding="10" >
<tr>
<td><img src="IMG/D.GIF" width="30" height="1" border="0" alt=""></td>
<td bgcolor="#6666ff">
<p class="leisttext">texttext text text texttexttexttexttext
text text texttexttexttexttext text text texttexttexttexttext
text text texttexttexttexttext text text texttexttexttexttext
text text texttexttext<br>texttext text text texttexttexttexttext
text text texttexttexttexttext text text texttexttexttexttext
text text texttexttexttexttext text text
texttexttexttexttext text text texttexttext</p>
<a href="leistung.html" class="backlink">... zurück zum Anfang</a>
</td>
</tr>
</table></td>
</tr></table>
</body>
</html>Wenn mir jetzt noch irgendwer den Tip hätte, wie ich die Überschrift zentriert bekomme,
so daß sie schick im Farbkasten platziert ist ....
(Kommt mir so vor, als ob der Browser bei <td><h1>.....</h1></td> einen Zeilenumbruch
vorsieht, und dann die erste (eigentlich einzige) Zeile so positioniert, als wäre da noch ne zweite.)philipp
Philipp
-
Hall Phillip!
Wenn mir jetzt noch irgendwer den Tip hätte, wie ich die Überschrift zentriert bekomme,
so daß sie schick im Farbkasten platziert ist ....
(Kommt mir so vor, als ob der Browser bei <td><h1>.....</h1></td> einen Zeilenumbruch vorsieht, und dann die erste (eigentlich einzige) Zeile so positioniert, als wäre da noch ne zweite.)Bei Überschriften bekommst du auch immer einen "quasi"-Zeilenumbruch mit, denn das ist u.a. der Sinn einer Überschrift, daß sie sich vom normalen Text abehebt.
Ich sage das zwar ungern, aber nimm dafür ein eigene Klasse:
.beispiel {
font-family:20pt;
/* und so weiter */
}Grüße
Thomas
-