nicht angemeldet
Header in Tabelle
Hallo zusammen...
Bin sehr neu hier, habe aber bereits viel HTML, CSS und Scriptsprachen-Erfahrung.
Allerdings komme ich an einem Punkt einfach nicht weiter.
Für eine Webapplikation habe ich eine Tabelle mit 3 Zeilen, 1 Spalte als Haupttabelle definiert.
In jede Zelle habe ich wiederum eine Tabelle verschachtelt.
Die oberste soll dabei als Banner dienen und hat 1 Zeile, 3 Spalten.
Die Idee war nun, die beiden Zellen Links und Rechts auf eine feste Grösse zu stellen und die mittlere dynamisch zu verbreitern, so dass der Banner immer 100% der Breite der Haupttabelle einnimmt.
Soweit sogut.
Ich habe natürlich 3 Grafiken dafür präpariert.
Die Mittlere ist nur 1 Pixel breit, da sie ja durch den Repeat nicht mehr braucht.
Trotzdem funktioniert es nicht.
Als Ergebnis sehe ich dann die Grafik Links bis ca. zur Mitte wiederholt und dann die Grafik rechts bis zum rechten Rand wiederholt.
Ob die mittlere Grafik sichtbar ist, lässt sich aufgrund der 1px-Breite kaum bestimmen.
Jedenfalls wird sie nicht korrekt repeatet, so dass sie den Inhalt der Banners "auffüllt".
Ich poste mal ein Codeschnipsel, vielleicht findet ja jemand gleich den Fehler.
Bin für jede Hilfe sehr dankbar.
Gruss
Andy
<body>
<form id="form1" runat="server">
<div>
<table class="MainTable" cellpadding="0" cellspacing="0">
<tr>
<td>
<table class="SubTable" cellpadding="0" cellspacing="0">
<tr class="HeaderRow">
<td style="width: 250px; background-image: url(Images/HeaderLeft.gif)">
</td>
<td style="background-image: url(Images/HeaderMitte.gif); background-repeat: repeat-x">
</td>
<td style="width: 300px; background-image: url(Images/HeaderRight.gif)">
</td>
</tr>
</table>
</td>
</tr>
-
Hi heiligenschein,
haben die Tabellen denn Breitenangaben?
Davon abgesehen würde ich dir empfehlen, diese Art Grundgerüst sein zu lassen und stattdessen CSS basierte Layouts zu benutzen. Erfahrung mit CSS hast du ja wie sagst...
Gruß
Antipitch-
Hallo Antipitch
Ja, sorry, sollte die entsprechenden CSS-Klassen auch noch posten:
.MainTable
{
width: 100%;
border-bottom: solid 1px #000000;
}.SubTable
{
width: 100%;
}/********************************************************/
/* Header */
/********************************************************/.HeaderRow
{
width: 100%;
height: 90px;
}CSS ist okay. Leider ist das aber eine Auftragsarbeit und das Tabellenlayout wird ausdrücklich verlangt... :-(
Viele Grüsse
Andy-
Moin Andy,
CSS ist okay. Leider ist das aber eine Auftragsarbeit und das Tabellenlayout wird ausdrücklich verlangt... :-(
den Kunden vielleicht nochmal drauf hinweisen, dass das nicht gerade "state-of-the art" ist. Sonst so:
<style type="text/css">
* {
margin: 0;
padding: 0;
border: 0 none;
}
.container {
width: 100%;
border-collapse: collapse;
}
.header {
height: 90px;
}
.header_left {
width: 250px;
background-color: yellow;
}
.header_middle {
background-color: red;
}
.header_right {
width: 300px;
background-color: blue;
}
</style><table class="container">
<tr class="header">
<td class="header_left"> </td>
<td class="header_middle"> </td>
<td class="header_right"> </td>
</tr>
</table>Die äußere Tabelle kannst du ihr also sparen. Content- bzw. Footerbereich einfach neue Zeile.
Gruß
Antipitch-
Ich befürchte, du hast mich nicht ganz richtig verstanden...
Die verschachtelten Tabellen möchte ich möglichst belassen, da ich in unteren Zellen der Haupttabelle wiederum Tabellen habe, welche unterschiedlich aufgeteilt sind.
Colspan kann ich hier nicht brauchen, da dadurch die Breiten der Zellen nicht mehr frei wählbar sind.Die Problematik besteht ja vorallen darin, dass ich bei (width: 300px), (width: 250px) in zwei Zellen in der Dritten Zelle keine Eigenschaft (width: FillWidthToParentCell) bzw. ein Äquivalent dazu habe...
-
Wenn du dir meinen code mal in einer Seite nsiehst, erkennst du, dass diese Tabelle genau 100% der Breite des sie umgebenden Elements (in diesem Fall body, bei äußerer Tabelle halt die entsprechende td) einnimmt und die mittlere Zelle wiederum genau 100% Breite minus (links + rechts) hat. Ich dachte, das sei dein Ziel, und um das zu erreichen bekommt die mittlere Zelle KEINE Breitenangabe.
Im Übrigen kannst du auch mehrere dieser Tabellen untereinander legen, ohne sie in einer umfassenden Tabelle zu verschchtelen (> kein colspan problem).
Wenn du etwas anderes erreichen willst, müsstest du das bitte nochmal genauer erklären.
Gruß
Antipitch-
richtig.
wenn du dir meinen code ansiehst wirst du aber merken dass ich genau das gemacht habe (in der mitte keine breitenangabe) und es trotzdem nicht hinhaut.
habe gerade ein "nude-beispiel" mit demselben szenario gebastelt, wo's geklappt hat.
also nehme ich an, es liegt an irgendwelchen geerbten css-definitionen. (an welchen auch immer).werde mal versuchen, es ohne über-tabelle hinzukriegen.
vielen dank für diesen tip, wär ich selber nicht drauf gekommen *schäm*grüsse
andy-
also nehme ich an, es liegt an irgendwelchen geerbten css-definitionen. (an welchen auch immer).
Unerwartete Ergebnisse können sonst auch durch fehlende/ falsche Doctype Deklarationen zustande kommen.
werde mal versuchen, es ohne über-tabelle hinzukriegen.
Hat bei langen Inhalten auch den Vorteil, das nicht erst die ganze Tabelle vom Browser eingelesen werden muss, bevor sie anständig gerendert wird.
vielen dank für diesen tip, wär ich selber nicht drauf gekommen *schäm*
Kein Grund. Grundproblem aber geklärt, nehm ich an.
Gruß
Antipitch-
WOOOOOOOOOOOOOOW.
Hat tatsächlich funktioniert.
Ja, HTML hat halt so seine Tücken... ^^Aber vielen Dank für die Kompetente Hilfe, auch wenn ich jetzt meine ganze MasterPage umstellen musste...
Magst du Bier? ;-)Gruss
Andy-
Aber vielen Dank für die Kompetente Hilfe, auch wenn ich jetzt meine ganze MasterPage umstellen musste...
Gern geschehen.
Magst du Bier? ;-)
You bet! Wenn du mal nach Hamburg kommst, kannst du gern einen ausgeben...
Gruß
Antipitch
-
-
-
-
-
-
-
-